/* ==========================================================================
   Al Muntazar theme — built from the design canvas.
   Tokens are --am-* so the Al Muntazar Core plugin's parts pick them up too.
   ========================================================================== */

:root{
	--am-bg:#F0F5F2;--am-surface:#FFFFFF;--am-surface-2:#E5EDE8;--am-shelf:#E5EDE8;--am-field:#F0F5F2;
	--am-ink:#0E2622;--am-ink-2:#40524B;--am-ink-3:#5A6B64;
	--am-line:rgba(14,38,34,.11);--am-line-2:rgba(14,38,34,.2);
	--am-accent:#1E5E51;--am-accent-text:#1E5E51;--am-accent-ink:#FFFFFF;--am-accent-soft:#E1EDE7;
	--am-cover:#E1E9E4;--am-olive:#6E7536;--am-olive-soft:#E3ECE5;
	--am-deep:linear-gradient(160deg,#1F5B4C 0%,#174A3F 45%,#0F3229 100%);
	--am-band:linear-gradient(160deg,#1F5B4C 0%,#174A3F 60%,#113830 100%);
	--am-footer:#0B2621;--am-header:rgba(255,255,255,.82);
	--am-shadow:rgba(9,31,26,.45);
	--am-font-head:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
	--am-font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
	--am-font-serif:'Literata',Georgia,'Times New Roman',serif;
	--am-font-arabic:Arial,'Segoe UI',Tahoma,sans-serif;
	--read-size:19px;
	color-scheme:light;
}
[data-scheme="dark"]{
	--am-bg:#18221F;--am-surface:#0E1513;--am-surface-2:#1A2320;--am-shelf:#0E1513;--am-field:#080C0B;
	--am-ink:#EEF5F1;--am-ink-2:#C2D0C9;--am-ink-3:#93A39B;
	--am-line:rgba(220,240,230,.12);--am-line-2:rgba(220,240,230,.2);
	--am-accent:#1E5E51;--am-accent-text:#A6DBC0;--am-accent-ink:#FFFFFF;--am-accent-soft:rgba(166,219,192,.14);
	--am-cover:#26332E;--am-olive:#D2D69A;--am-olive-soft:rgba(210,214,154,.12);
	--am-deep:linear-gradient(160deg,#1A4A3D 0%,#123A31 50%,#0B2720 100%);
	--am-band:linear-gradient(160deg,#1A4A3D 0%,#123A31 60%,#0B2720 100%);
	--am-footer:#0A0F0E;--am-header:rgba(14,21,19,.86);
	--am-shadow:rgba(0,0,0,.6);
	color-scheme:dark;
}

/* Base ------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
body{margin:0;background:var(--am-bg);color:var(--am-ink);font:16px/1.6 var(--am-font-body);-webkit-font-smoothing:antialiased;overflow-wrap:anywhere}
img,svg,video{max-width:100%;height:auto;vertical-align:middle}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--am-accent);outline-offset:3px;border-radius:6px}
[lang="ar"],.arabic,.wp-block-quote[lang="ar"]{font-family:var(--am-font-arabic)!important}
.screen-reader-text,.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;border-radius:10px;background:var(--am-ink);color:var(--am-bg);text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.site{min-height:100vh;display:flex;flex-direction:column}
.site>*{width:100%}
.main{flex:1}
.container{max-width:1240px;margin:0 auto;padding-left:32px;padding-right:32px}
.muted{color:var(--am-ink-3)}
.link{color:var(--am-accent-text);font-weight:600}
.only-dark{display:none}
[data-scheme="dark"] .only-dark{display:inline-block}
[data-scheme="dark"] .only-light{display:none}
.logo .logo__dark{display:none}
[data-scheme="dark"] .logo .logo__dark{display:block}
[data-scheme="dark"] .logo .logo__light{display:none}
.lattice{position:absolute!important;inset:0;width:100%;height:100%;pointer-events:none}
.lift{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.lift:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px var(--am-shadow)}

/* Buttons & chips ---------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 18px;border:1px solid transparent;border-radius:999px;font:600 15px var(--am-font-head);text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .15s,background .15s,border-color .15s}
.btn:hover{transform:translateY(-1px)}
.btn--accent{background:var(--am-accent);color:var(--am-accent-ink)}
.btn--ghost{background:var(--am-surface);border-color:var(--am-line-2);color:var(--am-ink)}
.btn--outline{background:transparent;border-color:var(--am-line-2);color:var(--am-ink);border-radius:14px;height:50px}
.btn--outline:hover{border-color:var(--am-ink)}
.btn--lg{height:54px;padding:0 26px;font-size:16px}
.btn--sm{height:44px;padding:0 16px;font:600 14px var(--am-font-body);border-radius:999px;background:var(--am-surface)}
.btn--accent.btn--sm{background:var(--am-accent);color:var(--am-accent-ink)}
.btn--outline.btn--sm{background:transparent}
.btn--block{flex:1;width:100%;height:50px;border-radius:14px}
.iconbtn{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--am-line);border-radius:999px;background:var(--am-surface);color:var(--am-ink-2);cursor:pointer;transition:background .15s,color .15s}
.iconbtn:hover{background:var(--am-surface-2);color:var(--am-ink)}
.chip{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border:1px solid var(--am-line-2);border-radius:999px;background:var(--am-surface);color:var(--am-ink-2);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;transition:border-color .15s,background .15s,color .15s}
.chip:hover{border-color:var(--am-ink)}
.chip--on{background:var(--am-ink);color:var(--am-bg);border-color:var(--am-ink)}
.chip__count{opacity:.7;font-size:11px}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.chips--lg .chip{height:auto;padding:9px 16px;font-size:14px}
.chips--lg .chip__count{font-size:12px}
.chip--live{height:auto;padding:6px 14px 6px 12px;border:0;background:var(--am-accent-soft);color:var(--am-accent-text);font-size:13.5px;margin:0 0 22px}
.chip__dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.pill{display:inline-block;padding:8px 14px;border:1px solid var(--am-line-2);border-radius:999px;font-size:14px;font-weight:600;text-decoration:none;color:var(--am-ink-2)}
.pill:hover{color:var(--am-ink);border-color:var(--am-ink)}
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--am-surface-2)}
.seg--surface{background:var(--am-surface)}
.seg__btn{height:38px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--am-ink-2);font:600 14px var(--am-font-body);cursor:pointer;transition:background .15s,color .15s}
.seg__btn.is-on{background:var(--am-surface);color:var(--am-ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.seg__btn--accent{height:36px}
.seg__btn--accent.is-on{background:var(--am-accent);color:var(--am-accent-ink);box-shadow:none}
.badge{padding:3px 10px;border-radius:999px;background:var(--am-accent-soft);color:var(--am-accent-text);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.more{display:inline-flex;align-items:center;gap:6px;color:var(--am-accent-text);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap}
.social{display:flex;gap:8px}
.social__btn{display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:50%;color:#DCE9E3;text-decoration:none;transition:background .15s}
.social__btn:hover{background:rgba(255,255,255,.1)}

/* Header ------------------------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:40;padding:12px 24px 0}
.is-reading .hdr{top:3px;padding-top:9px}
.hdr__bar{max-width:1240px;margin:0 auto;display:flex;flex-wrap:nowrap;align-items:center;gap:12px 20px;padding:10px 10px 10px 18px;border:1px solid var(--am-line);border-radius:20px;background:var(--am-header);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.logo{display:flex;align-items:center;flex:none;text-decoration:none}
.logo img{width:auto;display:block}
.hdr__nav{display:flex;flex-wrap:nowrap;gap:2px;margin:0 auto;font-weight:500;font-size:15px;min-width:0}
.navlink{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:10px 14px;border-radius:12px;text-decoration:none;color:var(--am-ink-2);transition:background .15s,color .15s}
.navlink:hover{background:var(--am-surface-2);color:var(--am-ink)}
.navlink.is-active{background:var(--am-surface-2);color:var(--am-ink)}
.hdr__tools{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
.hdr__burger{display:none}
.hdr__menu{max-width:1240px;margin:8px auto 0;border:1px solid var(--am-line);border-radius:20px;background:var(--am-header);backdrop-filter:blur(14px);padding:10px}
.hdr__menu[hidden]{display:none}
.hdr__menu nav{display:flex;flex-direction:column;gap:2px}
.hdr__menu .navlink{font-size:16px;padding:12px 14px}
.hdr__menu .btn{margin-top:8px;height:50px}
@media (max-width:1100px){.hdr__nav{display:none}.hdr__burger{display:grid}.hdr__register{white-space:nowrap}}
@media (max-width:640px){.hdr{padding:10px 12px 0}.hdr__bar{padding:8px;gap:6px;border-radius:16px}.hdr__register{display:none}.logo img{height:32px!important}.iconbtn{width:40px;height:40px}}

/* Search ------------------------------------------------------------------- */
.search{position:fixed;inset:0;z-index:60;display:flex;justify-content:center;align-items:flex-start;padding:10vh 16px;background:rgba(9,31,26,.5);backdrop-filter:blur(8px)}
.search[hidden]{display:none}
.search__box{width:min(680px,100%);border:1px solid var(--am-line-2);border-radius:24px;background:var(--am-surface);box-shadow:0 40px 80px -30px rgba(0,0,0,.6);overflow:hidden}
.search__form{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 20px;border-bottom:1px solid var(--am-line);color:var(--am-ink-3)}
.search__input{flex:1;min-width:0;height:44px;border:0;background:transparent;color:var(--am-ink);font:400 18px var(--am-font-body);outline:0}
.search__results{max-height:60vh;overflow:auto;padding:8px}
.search__results:empty{display:none}
.search__item{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;text-decoration:none;color:var(--am-ink)}
.search__item:hover,.search__item.is-active{background:var(--am-surface-2)}
.search__item b{font-weight:600}
.search__item span{font-size:12.5px;color:var(--am-ink-3);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.search__item mark{background:var(--am-accent-soft);color:inherit;border-radius:3px}
.search__empty{padding:18px;color:var(--am-ink-3);font-size:15px}
.search__hint{margin:0;padding:10px 20px;color:var(--am-ink-3);font-size:12.5px;border-top:1px solid var(--am-line)}

/* Hero ---------------------------------------------------------------------- */
.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:56px;align-items:center;padding-top:50px;padding-bottom:56px}
.hero__arabic{margin:0 0 18px;font-family:var(--am-font-arabic);font-size:26px;line-height:1.6;color:var(--am-olive);text-align:left}
.hero__title{margin:0 0 22px;font-family:var(--am-font-head);font-weight:700;font-size:62px;line-height:1.04;letter-spacing:-.035em}
.hero__title em,.sec-title em,.page-title em{font-family:var(--am-font-serif);font-weight:400;font-style:italic;letter-spacing:-.02em;color:var(--am-accent-text)}
.hero__courses{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px}
.course{padding:9px 14px;border:1px solid var(--am-line-2);border-radius:12px;background:var(--am-surface);font-size:14px;font-weight:600}
.course span{color:var(--am-ink-3);font-weight:500}
.hero__text{margin:0 0 26px;max-width:540px;font-size:18px;color:var(--am-ink-2)}
.hero__note{margin:0 0 26px;color:var(--am-ink-3);font-size:14px;font-style:italic;font-family:var(--am-font-serif)}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px}
.hero__side{display:flex;flex-direction:column;gap:28px;padding:12px 0 0 12px}
.hadith{position:relative;overflow:hidden;border-radius:32px;background:var(--am-deep);color:#F2F7F4;padding:40px;transform:rotate(-1.5deg);box-shadow:0 40px 80px -40px rgba(9,31,26,.7)}
.hadith>*{position:relative}
.hadith__eyebrow{margin:0 0 18px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#C9CD8C}
.hadith__text{margin:0 0 22px;font-family:var(--am-font-serif);font-size:24px;line-height:1.5;font-style:italic}
.hadith__cite{font-style:normal;font-size:14px;color:#A9C9BE}
.videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.videos--one{grid-template-columns:1fr}
.video{display:block;padding:7px;border:1px solid var(--am-line);border-radius:20px;background:var(--am-surface);box-shadow:0 24px 44px -24px var(--am-shadow);text-decoration:none;color:var(--am-ink)}
.video__frame{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;border-radius:14px;background:#0F3D34}
.video__frame img{display:block;width:100%;height:100%;object-fit:cover}
.video__play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(255,255,255,.94);color:#0E2622;box-shadow:0 8px 20px rgba(0,0,0,.3);transition:transform .2s}
.video:hover .video__play{transform:scale(1.08)}

/* Features ------------------------------------------------------------------ */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;border:1px solid var(--am-line);border-radius:24px;background:var(--am-line);overflow:hidden;box-shadow:0 18px 40px -30px rgba(9,31,26,.35)}
.feature{display:flex;gap:16px;align-items:center;padding:24px 26px;background:var(--am-surface)}
.feature__icon{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:16px;background:var(--am-accent-soft);color:var(--am-accent-text)}
.feature b{display:block;margin-bottom:2px;font-family:var(--am-font-head);font-weight:600;font-size:17px;letter-spacing:-.01em}
.feature span span{font-size:14px;color:var(--am-ink-3)}

/* Sections ------------------------------------------------------------------ */
.section{padding-top:96px;padding-bottom:24px}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:flex-start;gap:20px 28px;margin-bottom:28px}
.sec-head__seg{margin-bottom:6px}
.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 12px;color:var(--am-ink-3);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.eyebrow__num{padding:2px 8px;border:1px solid var(--am-line-2);border-radius:7px;color:var(--am-accent-text);font-family:ui-monospace,SFMono-Regular,monospace;letter-spacing:0}
.sec-title{margin:0;font-family:var(--am-font-head);font-weight:700;font-size:46px;line-height:1.06;letter-spacing:-.03em}
.kicker{margin:0 0 14px;color:var(--am-accent-text);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}

/* Articles ------------------------------------------------------------------ */
.articles{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch}
.articles__main{flex:999 1 620px;min-width:0;display:flex;flex-direction:column;gap:20px}
.articles__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;min-height:46px}
.art-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.art-grid .card{height:100%}
.art-grid .card__cover{height:100%;min-height:206px}
.articles__main{justify-content:stretch}
.articles__main .art-grid{flex:1}
.art-grid[hidden]{display:none}
.articles__side{flex:0 0 360px;max-width:100%;display:flex}
.ig-flyer{width:360px}
.articles__foot{display:flex;flex-wrap:wrap;gap:24px;margin-top:20px}
.articles__foot .btn--outline{flex:999 1 620px}
.articles__ig{flex:0 0 360px;max-width:100%}
.card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--am-line);border-radius:24px;background:var(--am-surface);text-decoration:none;color:var(--am-ink);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover,.card:focus-visible{border-color:var(--am-accent);box-shadow:0 0 0 1px var(--am-accent),0 22px 44px -22px var(--am-shadow);transform:translateY(-3px)}
.card:hover .card__title{color:var(--am-accent-text)}
.card--img:hover .card__title{color:#fff}
.post-row:hover{border-color:var(--am-accent);box-shadow:0 0 0 1px var(--am-accent),0 18px 40px -24px var(--am-shadow)}
.card__cover{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:14px;padding:18px 22px 16px;background:var(--am-cover);overflow:hidden;height:184px}
.card__cover>*{position:relative}
.card__top{flex:none;display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:34px}
.card__emblem{width:34px;height:34px;border-radius:9px;background:var(--am-surface);padding:3px;object-fit:contain;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.card__tag{padding:6px 12px;border:1px solid var(--am-line-2);border-radius:999px;background:var(--am-surface);color:var(--am-ink-2);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.card__title{flex:none;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--am-font-head);font-weight:700;font-size:21px;line-height:1.14;letter-spacing:-.03em}
.card__meta{flex:none;display:flex;align-items:center;gap:12px;color:var(--am-ink-3);font-size:12.5px;font-weight:600;white-space:nowrap}
.card__rule{flex:1;height:1px;background:var(--am-line-2)}

/* Library ------------------------------------------------------------------- */
.shelf{padding:32px;border-radius:28px;background:var(--am-shelf)}
.shelf+.shelf{margin-top:20px}
.shelf--page{padding:40px;border-radius:30px}
.shelf__head{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;margin-bottom:26px}
.shelf__titles{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.shelf__title{margin:0;font-family:var(--am-font-head);font-weight:600;font-size:22px}
[data-tab-panel][hidden]{display:none}

/* Footer -------------------------------------------------------------------- */
.ftr{padding-top:96px;padding-bottom:32px}
.ftr--compact{padding-top:80px}
.ftr__card{padding:48px 48px 28px;border-radius:32px;background:var(--am-footer);color:#DCE9E3}
.ftr__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.ftr__text{margin:20px 0 0;max-width:320px;color:#A9C9BE;font-size:15px}
.ftr__col{display:flex;flex-direction:column;gap:10px;font-size:15px}
.ftr__col b{color:#fff;font-family:var(--am-font-head);font-weight:600}
.ftr__col a{text-decoration:none;color:#DCE9E3}
.ftr__col a:hover{color:#fff;text-decoration:underline}
.ftr .navlink{display:inline;padding:0;border-radius:0;background:none!important;color:#DCE9E3;font-weight:400;font-size:inherit}
.ftr .navlink.is-active{color:#fff}
.ftr__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);color:#8FB3A7;font-size:13.5px}
.ftr__bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding:32px 40px;border-radius:28px;background:var(--am-footer);color:#DCE9E3;font-size:14.5px}
.ftr__mid{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.ftr__links{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.ftr__links a{text-decoration:none;color:#DCE9E3}
.ftr__links a:hover{text-decoration:underline}
.ftr__copy{color:#8FB3A7;font-size:13.5px}
@media (max-width:1100px){.ftr__grid{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:640px){.ftr__grid{grid-template-columns:1fr;gap:28px}.ftr__bar{padding:28px 20px}}
/* Compact footer: logo with the copyright under it. Stacks and centres once the row no longer fits. */
.ftr__brand{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ftr__brand .ftr__logo{display:block;line-height:0}
@media (max-width:980px){.ftr__bar{flex-direction:column;justify-content:center;align-items:center;gap:22px;text-align:center}.ftr__brand{align-items:center}.ftr__bar .social{justify-content:center}}

/* Page heads & archives ------------------------------------------------------ */
.page-head{padding-top:72px;padding-bottom:28px}
.page-head--narrow{max-width:784px}
.page-head--split{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;padding-bottom:40px}
.page-head--split>div{max-width:720px}
.page-title{margin:0 0 14px;font-family:var(--am-font-head);font-weight:700;font-size:60px;line-height:1.04;letter-spacing:-.035em}
.page-title--md{font-size:54px}
.page-title--book{font-size:40px}
.page-intro{margin:0 0 6px;max-width:640px;color:var(--am-ink-2);font-size:18px}
.page-intro p{margin:0 0 .6em}
.page-count{margin:0;color:var(--am-ink-3);font-size:14px;font-weight:600}
.page-head .chips{margin-top:28px}
.searchbar{display:flex;align-items:center;gap:10px;max-width:640px;margin-top:24px;padding:6px 6px 6px 18px;border:1px solid var(--am-line-2);border-radius:999px;background:var(--am-surface);color:var(--am-ink-3)}
.searchbar input{flex:1;min-width:0;height:40px;border:0;background:transparent;color:var(--am-ink);font:400 16px var(--am-font-body);outline:0}
section.archive{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:40px;align-items:start;padding-top:8px}
.feature-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--am-line);border-radius:26px;background:var(--am-surface);text-decoration:none;color:var(--am-ink)}
.feature-card__cover{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;background:var(--am-deep);color:#9FD3B8}
.feature-card__cover img{width:100%;height:100%;object-fit:cover}
.feature-card__arabic{position:absolute;right:28px;bottom:18px;font-family:var(--am-font-arabic);font-size:34px;color:#EEF6F2}
.feature-card__body{display:block;padding:26px 28px 28px}
.feature-card__meta{display:flex;gap:10px;align-items:center;margin:0 0 12px;color:var(--am-ink-3);font-size:13px}
.feature-card__title{display:block;margin:0 0 10px;font-family:var(--am-font-head);font-weight:700;font-size:28px;line-height:1.18;letter-spacing:-.02em}
.feature-card__excerpt{display:block;color:var(--am-ink-2)}
.rows{border-top:1px solid var(--am-line)}
.rows--full{grid-column:1/-1}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;padding:20px 14px;border-bottom:1px solid var(--am-line);text-decoration:none;color:var(--am-ink);transition:background .15s}
.row:hover{background:var(--am-surface)}
.row__title{display:block;font-family:var(--am-font-head);font-weight:600;font-size:18px;line-height:1.32;transition:color .15s}
.row:hover .row__title{color:var(--am-accent-text)}
.row__meta{display:block;margin-top:4px;color:var(--am-ink-3);font-size:14px}
.row__go{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--am-line-2);border-radius:50%;color:var(--am-ink-2)}
.pages{padding:48px 32px 0}
.pages .nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.pages .page-numbers{display:grid;place-items:center;min-width:44px;height:44px;padding:0 14px;border:1px solid var(--am-line-2);border-radius:12px;color:var(--am-ink-2);font-weight:700;text-decoration:none}
.pages .page-numbers.current{background:var(--am-ink);color:var(--am-bg);border-color:var(--am-ink)}
.pages .page-numbers.dots{border:0}
.pages h2{display:none}

/* Reading ------------------------------------------------------------------- */
.progress{position:sticky;top:0;z-index:41;height:3px;background:transparent}
.progress__bar{width:0;height:3px;background:linear-gradient(90deg,var(--am-accent),var(--am-olive));transition:width .1s linear}
.pagewrap{max-width:1240px;margin:0 auto;padding:56px 32px 0;display:flex;flex-wrap:wrap;gap:56px;align-items:flex-start}
.read__article{flex:999 1 640px;min-width:0}
.read__col{max-width:720px;margin:0 auto}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;font-size:14px;font-weight:500;color:var(--am-ink-3)}
.crumbs a{text-decoration:none;color:var(--am-ink-2)}
.crumbs__current{color:var(--am-accent-text)!important}
.read__title{margin:0 0 18px;font-family:var(--am-font-head);font-weight:700;font-size:50px;line-height:1.08;letter-spacing:-.03em}
.read__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding:14px 0;border-top:1px solid var(--am-line);border-bottom:1px solid var(--am-line);color:var(--am-ink-3);font-size:14px}
.read__thumb{margin:28px 0 0}
.read__thumb img{width:100%;border-radius:20px}
.read__thumb--page{max-width:784px;margin:0 auto 28px}
.read__body{margin-top:36px}
.read__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.read__end{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:20px;padding:22px 0;border-top:1px solid var(--am-line);border-bottom:1px solid var(--am-line)}
.read__hamd{font-family:var(--am-font-arabic);font-size:24px;color:var(--am-olive)}
.read__end-actions{display:flex;gap:8px}
.prevnext{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:24px}
.prevnext__item{display:block;padding:18px 20px;border:1px solid var(--am-line);border-radius:16px;background:var(--am-surface);text-decoration:none;color:var(--am-ink)}
.prevnext__item span{display:block;margin-bottom:6px;color:var(--am-ink-3);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.prevnext__item b{font-weight:600}
.prevnext__item--next{text-align:right}
.read__aside{flex:1 1 300px;max-width:100%;display:flex;flex-direction:column;gap:20px;position:sticky;top:110px}
.side-card{padding:22px;border:1px solid var(--am-line);border-radius:24px;background:var(--am-surface)}
.side-card__title{margin:0 0 8px;font-family:var(--am-font-head);font-weight:600;font-size:17px}
.side-link{display:block;padding:14px 0;border-bottom:1px solid var(--am-line);text-decoration:none;color:var(--am-ink)}
.side-link:last-child{border-bottom:0;padding-bottom:4px}
.side-link__title{display:block;font-weight:600;font-size:15px;line-height:1.4;transition:color .15s}
.side-link:hover .side-link__title{color:var(--am-accent-text)}
.side-link__meta{font-size:13px;color:var(--am-ink-3)}

/* Prose --------------------------------------------------------------------- */
.prose{font-family:var(--am-font-serif);font-size:var(--read-size);line-height:1.8;color:var(--am-ink)}
.prose--page{max-width:784px;margin:0 auto;padding-bottom:40px}
.prose--sm{font-family:var(--am-font-body);font-size:17px;line-height:1.6;color:var(--am-ink-2)}
.prose p{margin:0 0 1.15em}
.prose p,.prose li,.prose p span,.prose li span,.prose p font{font-size:inherit!important;line-height:inherit!important}
.prose :where(p,li) span[style*="font-size"],.prose :where(p,li) span[style*="font-family"]{font:inherit!important}
.prose h2,.prose h3,.prose h4{margin:2em 0 .7em;font-family:var(--am-font-head);font-weight:700;line-height:1.25;letter-spacing:-.02em;color:var(--am-ink)}
.prose h2{font-size:1.4em}
.prose h3{font-size:1.18em}
.prose h4{font-size:1.05em}
.prose a{color:var(--am-accent-text);text-decoration-thickness:1px;text-underline-offset:3px}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.3em}
.prose li{margin-bottom:.5em}
.prose blockquote{margin:1.6em 0;padding:22px 26px;border-radius:18px;background:var(--am-accent-soft);color:var(--am-ink);font-style:italic}
.prose blockquote p:last-child{margin-bottom:0}
.prose blockquote[lang="ar"],.prose [lang="ar"]{font-style:normal;font-family:var(--am-font-arabic)}
/* Arabic in articles: 30px by default, scales with the reader text-size control. */
.prose p[lang="ar"],.prose li[lang="ar"],.prose blockquote p[lang="ar"],.prose blockquote[lang="ar"] p{font-size:calc(var(--read-size) + 11px)!important;line-height:2!important;text-align:right}
.prose :where(h2,h3,h4,h5,h6)[lang="ar"]{text-align:right}
.prose p[lang="ar"].has-text-align-center,.prose li[lang="ar"].has-text-align-center{text-align:center}
.prose img{border-radius:14px}
.prose figure{margin:1.6em 0}
.prose figcaption{font-family:var(--am-font-body);font-size:.8em;color:var(--am-ink-3);text-align:center;margin-top:.6em}
.prose hr{border:0;border-top:1px solid var(--am-line);margin:2em 0}
.prose table{width:100%;border-collapse:collapse;font-family:var(--am-font-body);font-size:.85em}
.prose th,.prose td{padding:10px 12px;border-bottom:1px solid var(--am-line);text-align:left}
.prose pre{padding:16px;border-radius:12px;background:var(--am-surface-2);overflow:auto;font-size:.85em}
.prose .wp-block-embed iframe{border-radius:14px}
.prose .alignwide{margin-left:-40px;margin-right:-40px;max-width:none}
.prose .alignfull{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:none}
.prose .wp-block-button__link{border-radius:999px;background:var(--am-accent);color:var(--am-accent-ink);font:600 15px var(--am-font-head)}
.prose .wp-block-table{overflow:auto}

/* Floating toolbar ----------------------------------------------------------- */
.toolbar-wrap{position:sticky;bottom:20px;z-index:30;display:flex;justify-content:center;margin-top:48px;pointer-events:none;padding:0 16px}
.toolbar-stack{pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:10px}
.toolbar{display:flex;align-items:center;gap:2px;padding:6px;border:1px solid var(--am-line-2);border-radius:999px;background:var(--am-header);backdrop-filter:blur(14px);box-shadow:0 24px 50px -20px var(--am-shadow)}
.tool{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--am-ink-2);cursor:pointer;transition:background .15s,color .15s}
.tool:hover,.tool.is-on{background:var(--am-surface-2);color:var(--am-ink)}
.tool.is-saved svg{fill:currentColor}
.toolbar__pct{padding:0 14px 0 6px;color:var(--am-ink-3);font:600 12px ui-monospace,SFMono-Regular,monospace}
.sheet{width:320px;max-width:calc(100vw - 32px);max-height:50vh;overflow:auto;padding:18px;border:1px solid var(--am-line-2);border-radius:20px;background:var(--am-surface);box-shadow:0 24px 50px -20px var(--am-shadow)}
.sheet[hidden]{display:none}
.sheet__label{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--am-ink-3)}
.sheet__size{display:flex;align-items:center;justify-content:space-between;padding:6px;border:1px solid var(--am-line);border-radius:14px}
.sheet__size b{font-family:ui-monospace,SFMono-Regular,monospace}
.sheet__hint{margin:12px 0 0;font-size:13px;color:var(--am-ink-3)}
.sheet__toc{list-style:none;margin:0;padding:0}
.sheet__toc li{padding:0}
.sheet__toc a{display:block;padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--am-ink-2);font-size:14px;line-height:1.35}
.sheet__toc a:hover{background:var(--am-surface-2);color:var(--am-ink)}
.sheet__toc .is-h3 a{padding-left:24px;font-size:13.5px}
.sheet__toc .is-empty{padding:8px 10px;color:var(--am-ink-3);font-size:14px}

/* Split pages (Register, Contact) --------------------------------------------- */
.split{padding-top:64px;gap:48px}
.split__aside{flex:1 1 340px;max-width:100%}
.split--contact .split__aside{flex-basis:360px}
.split__main{flex:999 1 560px;min-width:0}
.split--contact .split__main{flex-basis:520px}
.split .page-intro{margin-bottom:28px;font-size:17px}
.split .side-card{padding:26px}
.split .side-card__title{font-size:18px;margin-bottom:14px}
.checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:15px;color:var(--am-ink-2)}
.checklist li{display:flex;gap:12px}
.checklist__icon{display:grid;place-items:center;flex:none;width:24px;height:24px;margin-top:1px;border-radius:50%;background:var(--am-accent-soft);color:var(--am-accent-text)}
.note{margin:18px 0 0;padding:14px 16px;border-radius:14px;background:var(--am-olive-soft);color:var(--am-ink-2);font-size:14px}
.split .muted{margin:18px 0 0;font-size:14px}
.channels{display:flex;flex-direction:column;gap:12px}
.channel{display:flex;align-items:center;gap:16px;padding:18px 20px;border:1px solid var(--am-line-2);border-radius:20px;background:var(--am-surface);text-decoration:none;color:var(--am-ink);transition:border-color .2s,transform .25s}
.channel:hover{border-color:var(--am-accent);transform:translateY(-2px)}
.channel__icon{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:14px;background:var(--am-accent-soft);color:var(--am-accent-text)}
.channel__icon--accent{background:var(--am-accent);color:var(--am-accent-ink)}
.channel__text{flex:1;display:flex;flex-direction:column}
.channel__text b{font-family:var(--am-font-head);font-weight:600}
.channel__text span{color:var(--am-ink-3);font-size:14px}
.form-card{padding:32px;border:1px solid var(--am-line);border-radius:26px;background:var(--am-surface)}
.form-card__title{margin:0 0 6px;font-family:var(--am-font-head);font-weight:600;font-size:24px}
.form-card__text{margin:0 0 22px;color:var(--am-ink-3);font-size:15px}
.form-card .almc-fieldset{padding:0;border:0;background:transparent;border-radius:0}
.form-card .almc-grid{margin-top:0}

/* Book page ------------------------------------------------------------------ */
.page-head--book{padding-bottom:32px}
.book-head{display:grid;grid-template-columns:150px 1fr;gap:32px;align-items:center}
.book-head__cover{width:150px;aspect-ratio:211/300;object-fit:cover;border-radius:4px 10px 10px 4px;box-shadow:inset 6px 0 10px -6px rgba(0,0,0,.4),0 16px 30px -18px rgba(0,0,0,.55)}
.page-head--book .page-title{margin-bottom:10px}
.page-head--book .page-count{margin-bottom:14px}

/* Comments ------------------------------------------------------------------- */
.comments{margin-top:48px}
.comments__title{font-family:var(--am-font-head);font-weight:600;font-size:22px}
.comment-list{list-style:none;margin:0;padding:0}
.comment-list .comment{padding:18px 0;border-top:1px solid var(--am-line)}
.comment-list .children{list-style:none;padding-left:28px}
.comment-author .avatar{border-radius:50%;margin-right:8px;vertical-align:middle}
.comment-metadata{font-size:13px;color:var(--am-ink-3)}
.comment-metadata a{color:inherit}
.comment-content{font-family:var(--am-font-serif);font-size:17px}
.comment-form label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.comment-form input:not([type=checkbox]):not([type=submit]),.comment-form textarea{width:100%;padding:12px 14px;border:1px solid var(--am-line-2);border-radius:12px;background:var(--am-field);color:var(--am-ink);font:400 16px var(--am-font-body)}
.comment-form p{margin:0 0 14px}

/* Toasts ---------------------------------------------------------------------- */
.toasts{position:fixed;left:50%;bottom:90px;z-index:70;display:flex;flex-direction:column;align-items:center;gap:8px;transform:translateX(-50%);pointer-events:none}
.toast{padding:10px 16px;border-radius:999px;background:var(--am-ink);color:var(--am-bg);font-size:14px;font-weight:500;box-shadow:0 10px 30px -10px rgba(0,0,0,.4);animation:toast .25s ease}
@keyframes toast{from{opacity:0;transform:translateY(8px)}}

/* Responsive ------------------------------------------------------------------- */
@media (max-width:1100px){
	.features{grid-template-columns:repeat(2,minmax(0,1fr))}
	.hero__title{font-size:44px}
	.sec-title{font-size:36px}
	.page-title{font-size:44px}
	.read__title{font-size:40px}
}
@media (max-width:900px){
	.read__aside{position:static}
	.hero__side{padding-left:0}
}
@media (max-width:640px){
	.container,.pagewrap,.pages{padding-left:16px;padding-right:16px}
	.hero{padding-top:28px;padding-bottom:40px;gap:36px}
	.hero__title{font-size:36px}
	.hero__arabic{font-size:22px}
	.sec-title{font-size:30px}
	.section{padding-top:64px}
	.page-head{padding-top:40px}
	.page-title{font-size:36px}
	.read__title{font-size:32px}
	.pagewrap{padding-top:36px;gap:36px}
	.art-grid{grid-template-columns:1fr}
	.features{grid-template-columns:1fr}
	.ig-flyer,.articles__side,.articles__ig{flex-basis:100%;width:100%}
	.pad-card,.hadith,.ftr__card{padding:24px 20px!important}
	.hadith__text{font-size:20px}
	.shelf,.shelf-pad,.shelf--page{padding:20px 16px}
	.feature-card__body{padding:20px}
	.feature-card__title{font-size:24px}
	.row{padding:16px 6px}
	.read__end{flex-direction:column;align-items:flex-start}
	.prevnext__item--next{text-align:left}
	.toolbar__pct{display:none}
	.toolbar-wrap{bottom:12px}
	.form-card{padding:20px 16px}
	.channel{padding:14px 16px}
	.prose .alignwide{margin-left:0;margin-right:0}
	.book-head{grid-template-columns:110px 1fr;gap:18px}
	.book-head__cover{width:110px}
}

/* Shelf grid (books & magazines) ---------------------------------------------- */
.shelf__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px 18px}
.shelf--page .shelf__grid{gap:28px 20px}
.book,a.book._3d-flip-book{display:flex;flex-direction:column;gap:10px;min-width:0;text-decoration:none;color:var(--am-ink);cursor:pointer}
.book__cover{position:relative;display:block;aspect-ratio:211/300;overflow:hidden;border-radius:4px 10px 10px 4px;background:var(--am-cover);box-shadow:inset 6px 0 10px -6px rgba(0,0,0,.35),0 16px 30px -18px rgba(0,0,0,.55);transition:transform .25s ease,box-shadow .25s ease}
.book:hover .book__cover{transform:translateY(-4px);box-shadow:inset 6px 0 10px -6px rgba(0,0,0,.35),0 24px 40px -20px rgba(0,0,0,.6)}
.book__cover img{display:block;width:100%;height:100%;object-fit:cover}
.book__placeholder{position:relative;display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:14px;background:var(--am-deep);color:#F2F7F4}
.book__placeholder img{width:38%;height:auto;object-fit:contain;opacity:.95}
.book__placeholder span{font:600 13px/1.3 var(--am-font-head);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.book__title{font-family:var(--am-font-head);font-weight:600;font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.book__meta{font-size:12px;color:var(--am-ink-3)}
.book-head__cover.book__placeholder{width:150px;aspect-ratio:211/300;border-radius:4px 10px 10px 4px}
.book-head__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.reader{padding-top:28px;padding-bottom:16px}
.reader .fb3d-fullscreen-mode,.reader ._3d-flip-book{min-height:70vh}
.reader__frame{width:100%;height:80vh;border:1px solid var(--am-line);border-radius:20px;background:var(--am-surface)}
@media (max-width:1100px){.shelf__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.shelf__grid,.shelf--page .shelf__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}.reader .fb3d-fullscreen-mode,.reader ._3d-flip-book{min-height:60vh}.reader__frame{height:65vh}.book-head__cover.book__placeholder{width:110px}}

/* 3D FlipBook shortcode grids on the Books / Magazines pages ---------------------- */
.prose table.fb3d-categories{display:block;width:100%;border:0;font-family:var(--am-font-body)}
.prose .fb3d-categories tbody{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px}
.prose .fb3d-categories tr{display:contents}
.prose .fb3d-categories td{display:block;padding:0;border:0;min-width:0}
.prose .fb3d-categories td:empty{display:none}
.prose .fb3d-categories ._3d-flip-book{width:100%!important;max-width:100%}
.prose .fb3d-categories .fb3d-thumbnail-lightbox-mode img,.prose .fb3d-thumbnail-lightbox-mode img{width:100%;height:auto;border-radius:4px 10px 10px 4px;box-shadow:0 16px 30px -18px rgba(0,0,0,.55)}
.prose .fb3d-thumbnail-lightbox-mode .fb3d-title,.prose .fb3d-thumbnail-lightbox-mode .title{font:600 14px/1.3 var(--am-font-head);color:var(--am-ink);text-align:left;margin-top:10px}
.prose .cnvs-block-tabs-buttons{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 24px;padding:4px;border-radius:999px;background:var(--am-surface-2);width:max-content;max-width:100%}
.prose .cnvs-block-tabs-button a{display:inline-block;padding:8px 16px;border-radius:999px;color:var(--am-ink-2);font:600 14px var(--am-font-body);text-decoration:none}
.prose .cnvs-block-tabs-button-active a{background:var(--am-accent);color:var(--am-accent-ink)}
@media (max-width:900px){.prose .fb3d-categories tbody{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.prose .fb3d-categories tbody{gap:20px 12px}}

/* Ninja Forms (Register, Contact) ------------------------------------------------ */
.nf-form-cont{font-family:var(--am-font-body);color:var(--am-ink)}
.nf-form-cont .nf-form-title,.nf-form-cont .nf-form-fields-required{display:none}
.nf-form-cont .nf-form-content{padding:0;max-width:none}
.nf-form-cont nf-fields-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px}
.nf-form-cont nf-field{display:block;min-width:0}
.nf-form-cont nf-field:has(.textarea-container),.nf-form-cont nf-field:has(.address-container),.nf-form-cont nf-field:has(.listcheckbox-container),.nf-form-cont nf-field:has(.recaptcha-container),.nf-form-cont nf-field:has(.submit-container),.nf-form-cont nf-field:has(.html-container),.nf-form-cont nf-field:has(.hr-container),.nf-form-cont nf-field:has(.listradio-container li:nth-child(3)),.nf-form-cont nf-field:has(.nf-form-errors),.nf-form-cont nf-field:has(.nf-response-msg){grid-column:1/-1}
.nf-form-cont .nf-field-container{margin:0;min-width:0}
.nf-form-cont .nf-field-container.textarea-container,.nf-form-cont .nf-field-container.address-container,.nf-form-cont .nf-field-container.listcheckbox-container,.nf-form-cont .nf-field-container.recaptcha-container,.nf-form-cont .nf-field-container.submit-container,.nf-form-cont .nf-field-container.html-container,.nf-form-cont .nf-field-container.hr-container,.nf-form-cont .nf-field-container.listradio-container.wide{grid-column:1/-1}
.nf-form-cont .nf-field-label{margin-bottom:8px}
.nf-form-cont .nf-field-label label{font-family:var(--am-font-head);font-size:14px;font-weight:600;color:var(--am-ink);margin:0;padding:0}
.nf-form-cont .nf-field-label .ninja-forms-req-symbol{color:var(--am-accent-text);margin-left:2px}
.nf-form-cont .nf-field-element{position:relative}
.nf-form-cont .nf-field-element input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]),.nf-form-cont .nf-field-element textarea,.nf-form-cont .nf-field-element select{width:100%;min-height:50px;padding:12px 16px;border:1px solid var(--am-line-2);border-radius:14px;background:var(--am-field);color:var(--am-ink);font:400 16px var(--am-font-body);box-shadow:none;transition:border-color .15s,box-shadow .15s,background .15s;-webkit-appearance:none;appearance:none}
.nf-form-cont .nf-field-element input::placeholder,.nf-form-cont .nf-field-element textarea::placeholder{color:var(--am-ink-3)}
.nf-form-cont .nf-field-element textarea{min-height:150px;resize:vertical;line-height:1.5}
.nf-form-cont .nf-field-element input:focus,.nf-form-cont .nf-field-element textarea:focus,.nf-form-cont .nf-field-element select:focus{outline:0;border-color:var(--am-accent);background:var(--am-surface);box-shadow:0 0 0 4px var(--am-accent-soft)}
.nf-form-cont .nf-field-element select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A6B64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
/* Radio and checkbox lists as selectable pills */
.nf-form-cont .list-container .nf-field-element ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.nf-form-cont .list-container .nf-field-element li{margin:0;padding:0;position:relative}
.nf-form-cont .list-container .nf-field-element li input[type=radio],.nf-form-cont .list-container .nf-field-element li input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.nf-form-cont .list-container .nf-field-element li label{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px 0 12px;border:1px solid var(--am-line-2);border-radius:999px;background:var(--am-surface);color:var(--am-ink-2);font:500 14.5px var(--am-font-body);cursor:pointer;user-select:none;transition:border-color .15s,background .15s,color .15s}
.nf-form-cont .list-container .nf-field-element li label::after{display:none!important}
.nf-form-cont .list-container .nf-field-element li label::before,.nf-form-cont .list-container .nf-field-element li label.nf-checked-label::before{content:"";position:static!important;left:auto!important;top:auto!important;bottom:auto!important;width:16px!important;height:16px!important;border:1.5px solid var(--am-line-2);border-radius:50%;background:var(--am-field);transition:border-color .15s,background .15s,box-shadow .15s}
.nf-form-cont .listcheckbox-container .nf-field-element li label.nf-checked-label::before{border-radius:5px}
.nf-form-cont .listcheckbox-container .nf-field-element li label::before{border-radius:5px}
.nf-form-cont .list-container .nf-field-element li label:hover{border-color:var(--am-ink)}
.nf-form-cont .list-container .nf-field-element li input:checked+label{border-color:var(--am-accent);background:var(--am-accent-soft);color:var(--am-accent-text);font-weight:600}
.nf-form-cont .list-container .nf-field-element li input:checked+label::before,.nf-form-cont .list-container .nf-field-element li label.nf-checked-label::before{border-color:var(--am-accent);background:var(--am-accent)!important;box-shadow:inset 0 0 0 3px var(--am-surface)}
.nf-form-cont .listcheckbox-container .nf-field-element li input:checked+label::before,.nf-form-cont .listcheckbox-container .nf-field-element li label.nf-checked-label::before{box-shadow:none;background:var(--am-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/11px no-repeat!important}
.nf-form-cont .list-container .nf-field-element li input:focus-visible+label{box-shadow:0 0 0 4px var(--am-accent-soft)}
/* Date picker */
.nf-form-cont .pikaday__container{position:relative}
.nf-form-cont .date-container .nf-field-element input[type=text]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235A6B64' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:46px}
.flatpickr-calendar{font-family:var(--am-font-body);border-radius:16px;box-shadow:0 24px 50px -20px var(--am-shadow)}
.flatpickr-day.selected,.flatpickr-day.selected:hover{background:var(--am-accent);border-color:var(--am-accent)}
/* Submit */
.nf-form-cont .submit-container .nf-field-label{display:none}
.nf-form-cont .submit-container{margin-top:6px}
.nf-form-cont .nf-field-element input[type=button],.nf-form-cont .nf-field-element input[type=submit],.nf-form-cont .submit-container input{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:54px;height:54px;padding:0 26px;border:0;border-radius:999px;background:var(--am-accent);color:var(--am-accent-ink);font:600 16px var(--am-font-head);letter-spacing:.01em;cursor:pointer;box-shadow:0 14px 30px -16px var(--am-shadow);transition:transform .15s,box-shadow .15s}
.nf-form-cont .submit-container input:hover{transform:translateY(-1px);box-shadow:0 18px 34px -16px var(--am-shadow)}
.nf-form-cont .submit-container input[disabled]{opacity:.6;cursor:wait;transform:none}
/* Messages */
.nf-form-cont .nf-field-description{font-size:13px;color:var(--am-ink-3);margin-top:6px}
.nf-form-cont .nf-error-wrap{margin:0}
.nf-form-cont .nf-error-msg,.nf-form-cont .nf-error .nf-error-msg{display:block;margin-top:6px;color:#B4322C;font-size:13px;font-weight:500}
.nf-form-cont .nf-error .nf-field-element input,.nf-form-cont .nf-error .nf-field-element textarea{border-color:#B4322C;background:#FFF7F6}
.nf-form-cont .nf-error .list-container .nf-field-element li label,.nf-form-cont .nf-error.list-container .nf-field-element li label{border-color:#E3A9A5}
.nf-form-cont .nf-pass .nf-field-element::after{content:"";position:absolute;right:16px;top:17px;width:16px;height:16px;border-radius:50%;background:var(--am-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/10px no-repeat;pointer-events:none}
.nf-form-cont .list-container.nf-pass .nf-field-element::after,.nf-form-cont .submit-container .nf-field-element::after,.nf-form-cont .recaptcha-container .nf-field-element::after,.nf-form-cont .textarea-container.nf-pass .nf-field-element::after,.nf-form-cont .date-container.nf-pass .nf-field-element::after{display:none}
.nf-form-cont .nf-pass .nf-field-element input:not([type=submit]){padding-right:44px}
.nf-form-cont .nf-response-msg{grid-column:1/-1;padding:18px 20px;border-radius:16px;background:var(--am-accent-soft);color:var(--am-ink);font-size:15px}
.nf-form-cont .nf-response-msg p:last-child{margin-bottom:0}
.nf-form-cont .nf-form-errors{grid-column:1/-1}
.nf-form-cont .nf-form-errors .nf-error-msg{padding:12px 16px;border-radius:12px;background:#FFF1EF}
.nf-form-cont .nf-loading-spinner{margin:30px auto}
.nf-form-cont .recaptcha-container .nf-field-label{display:none}
.nf-form-cont .g-recaptcha{transform-origin:left top}
[data-scheme="dark"] .nf-form-cont .nf-field-element input,[data-scheme="dark"] .nf-form-cont .nf-field-element textarea,[data-scheme="dark"] .nf-form-cont .nf-field-element select{color-scheme:dark}
[data-scheme="dark"] .nf-form-cont .nf-error .nf-field-element input,[data-scheme="dark"] .nf-form-cont .nf-error .nf-field-element textarea{background:rgba(180,50,44,.12)}
/* The form card */
.split__main .nf-form-cont{padding:32px;border:1px solid var(--am-line);border-radius:28px;background:var(--am-surface);box-shadow:0 24px 50px -36px var(--am-shadow)}
.form-card .nf-form-cont{padding:0;border:0;background:transparent;box-shadow:none}
.form-card nf-fields-wrap{grid-template-columns:1fr}
.form-card--register nf-fields-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.form-card--register nf-fields-wrap{grid-template-columns:1fr}}
.form-intro{display:flex;align-items:center;gap:14px;margin:0 0 22px;padding:0 0 20px;border-bottom:1px solid var(--am-line)}
.form-intro__icon{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:14px;background:var(--am-accent-soft);color:var(--am-accent-text)}
.form-intro b{display:block;font-family:var(--am-font-head);font-weight:600;font-size:19px;letter-spacing:-.01em}
.form-intro span{font-size:14px;color:var(--am-ink-3)}
.split__main .nf-form-cont .form-intro{margin-top:0}
@media (max-width:900px){.nf-form-cont nf-fields-wrap{grid-template-columns:1fr}}
@media (max-width:640px){.split__main .nf-form-cont{padding:20px 16px;border-radius:22px}.nf-form-cont .nf-field-element input:not([type=checkbox]):not([type=radio]):not([type=submit]),.nf-form-cont .nf-field-element textarea,.nf-form-cont .nf-field-element select{font-size:16px;min-height:48px}.nf-form-cont .list-container .nf-field-element li label{min-height:40px;padding:0 14px 0 11px;font-size:14px}.nf-form-cont .g-recaptcha{transform:scale(.9)}}

/* WhatsApp / chat widgets dropped into page content ------------------------------ */
.form-card .nta_wa_button,.form-card .wp-block-group,.form-card>h2:not(.form-card__title),.form-card>h3,.form-card>.wp-block-heading{display:none}
.split .nta_wa_button{margin:0 0 20px}

/* Small-screen polish ---------------------------------------------------------- */
@media (max-width:640px){
	.hero__title{font-size:34px;letter-spacing:-.03em}
	.hero__actions .btn{flex:1 1 auto;min-width:0}
	.hadith{transform:none}
	.videos{gap:12px}
	.sec-head{margin-bottom:20px}
	.articles__bar{flex-direction:column;align-items:stretch}
	.articles__bar .seg{align-self:flex-start}
	.chips{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
	.chips::-webkit-scrollbar{display:none}
	.page-head .chips,.chips--lg{flex-wrap:wrap;overflow:visible}
	.card__cover{height:auto;min-height:168px}
	.card__meta{flex-wrap:wrap;white-space:normal}
	.shelf__head{margin-bottom:18px}
	.shelf__titles{gap:10px}
	.seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
	.page-head--split{padding-bottom:28px}
	.book-head{align-items:start}
	.prose{font-size:calc(var(--read-size) - 1px)}
	.ftr__card{padding:28px 20px 20px!important}
	.ftr__text{max-width:none}
}
@media (max-width:380px){
	.hero__title{font-size:30px}
	.sec-title{font-size:27px}
	.page-title{font-size:32px}
	.shelf__grid,.shelf--page .shelf__grid{gap:14px 10px}
}

/* Article archives ------------------------------------------------------------- */
.archive-wrap{padding-top:4px}
.archive__bar{margin-bottom:22px}
.archive__bar .page-count{margin:0}
.archive-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.archive-grid .card__cover{height:200px}
.seg a.seg__btn{display:inline-flex;align-items:center;text-decoration:none}
.page-head .chips{margin-top:22px}
.pages{padding-top:40px}
@media (max-width:1100px){.archive-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.archive-grid{grid-template-columns:1fr;gap:14px}.archive-grid .card__cover{height:auto;min-height:168px}.archive__bar{flex-direction:row;align-items:center;justify-content:space-between}.pages{padding-top:28px}.pages .page-numbers{min-width:40px;height:40px;padding:0 10px}}
/* Instagram flyer card ------------------------------------------------------------ */
.ig-card{display:block;overflow:hidden;border:1px solid var(--am-line);border-radius:24px;background:var(--am-surface)}
.ig-card__head{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--am-ink-3)}
.ig-card__handle{display:block;font-size:13px}
.ig-card__head b{display:block;color:var(--am-ink);font-family:var(--am-font-head);font-weight:600;font-size:15px}
.ig-card__icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:var(--am-accent-soft);color:var(--am-accent-text)}
.ig-card #sb_instagram,.ig-card .sbi_photo_wrap{width:100%!important;padding:0!important;background:transparent!important}
.ig-card #sb_instagram #sbi_images{padding:0!important;gap:0}
.ig-card #sb_instagram .sbi_item{width:100%!important;padding:0!important;margin:0!important}
.ig-card .sbi_photo{display:block;border-radius:0;overflow:hidden;aspect-ratio:4/5}
.ig-card .sbi_photo img{width:100%;height:100%;object-fit:cover}
.ig-card .sbi_caption_wrap{padding:12px 16px 14px}
.ig-card .sbi_caption{font-size:14px;line-height:1.5;color:var(--am-ink-2)}
.ig-card .sbi_expand a{color:var(--am-accent-text)}
.ig-card #sbi_load,.ig-card .sbi_follow_btn,.ig-card .sbi_load_btn{display:none!important}
@media (max-width:640px){.ig-card .sbi_photo{aspect-ratio:1/1}}
/* Library pages & category polish ------------------------------------------------ */
.page-head--library{padding-top:64px;padding-bottom:28px}
.page-head--library .page-intro{margin-top:4px}
.page-head--library .btn--outline{height:50px;padding:0 20px;gap:8px}
.shelf--page{padding:36px}
.shelf--page .shelf__head{margin-bottom:22px}
.shelf--page .shelf__head--tabs{margin-bottom:10px}
.shelf__count{margin:0 0 18px;color:var(--am-ink-3);font-size:14px;font-weight:600}
.shelf__head .shelf__count{margin:0}
.shelf--page .book__title{font-size:15px}
.shelf--page .book{gap:12px}
.book__cover::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);pointer-events:none}
.book__cover .book__open{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.94);color:#0E2622;box-shadow:0 8px 20px rgba(0,0,0,.3);opacity:0;transition:opacity .2s,transform .2s}
.book:hover .book__open{opacity:1;transform:translate(-50%,-50%) scale(1)}
.card--img .card__cover{background-size:cover;background-position:center;color:#fff}
.card--img .card__cover::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,31,26,.1) 0%,rgba(9,31,26,.78) 100%)}
.card--img .card__title{color:#fff}
.card--img .card__meta{color:#DCE9E3}
.card--img .card__rule{background:rgba(255,255,255,.3)}
.card--img .card__tag{background:rgba(255,255,255,.92);border-color:transparent;color:#0E2622}
.page-head .chips--lg{margin-top:26px}
.archive__bar{padding:14px 18px;border:1px solid var(--am-line);border-radius:18px;background:var(--am-surface)}
.archive__bar .seg{background:var(--am-surface-2)}
@media (max-width:640px){.page-head--library{padding-top:40px}.shelf--page{padding:20px 14px}.archive__bar{padding:10px 12px;border-radius:14px}}
/* Article archive: list + sidebar ------------------------------------------------- */
.archive-layout{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start;padding-top:4px}
.archive-main{flex:999 1 600px;min-width:0}
.archive-side{flex:1 1 300px;max-width:360px;position:sticky;top:96px;display:flex;flex-direction:column;gap:20px}
.archive__bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:10px;border:1px solid var(--am-line);border-radius:999px;background:var(--am-surface);margin-bottom:14px}
.archive__search{flex:1 1 260px;display:flex;align-items:center;gap:10px;min-width:0;padding:0 4px 0 14px;color:var(--am-ink-3)}
.archive__search input{flex:1;min-width:0;height:42px;border:0;background:transparent;color:var(--am-ink);font:400 16px var(--am-font-body);outline:0}

.archive__count{margin:0 0 10px 18px;color:var(--am-ink-3);font-size:13.5px;font-weight:600}
.post-list{display:flex;flex-direction:column}
.post-row{display:grid;grid-template-columns:64px minmax(0,1fr) 40px;gap:20px;align-items:center;padding:22px 16px;border-top:1px solid var(--am-line);text-decoration:none;color:var(--am-ink);border-radius:18px;transition:background .15s}
.post-row:last-child{border-bottom:1px solid var(--am-line)}
.post-row:hover{background:var(--am-surface)}
.post-row__mark{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:var(--am-cover);overflow:hidden}
.post-row__mark img{width:100%;height:100%;object-fit:cover}
.post-row__mark .post-row__emblem{width:34px;height:34px;object-fit:contain}
.post-row__n{position:absolute;right:5px;bottom:4px;font:700 10.5px ui-monospace,SFMono-Regular,monospace;color:var(--am-ink-3)}
.post-row__body{display:flex;flex-direction:column;gap:5px;min-width:0}
.post-row__tag{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--am-accent-text)}
.post-row__title{font-family:var(--am-font-head);font-weight:700;font-size:20px;line-height:1.22;letter-spacing:-.02em;transition:color .15s}
.post-row:hover .post-row__title{color:var(--am-accent-text)}
.post-row__excerpt{color:var(--am-ink-2);font-size:15px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-row__meta{color:var(--am-ink-3);font-size:13px;font-weight:600}
.post-row__go{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--am-line-2);border-radius:50%;color:var(--am-ink-2);transition:background .15s,color .15s,transform .2s}
.post-row:hover .post-row__go{background:var(--am-accent);border-color:var(--am-accent);color:var(--am-accent-ink);transform:translateX(3px)}
.chips--cloud{gap:8px;flex-wrap:wrap!important;overflow:visible!important;padding-bottom:0!important}
.archive-side{min-width:0}
.chips--cloud .chip{height:auto;padding:8px 13px;font-size:13.5px;white-space:normal}
.archive-main .pages{padding-left:0;padding-right:0}
@media (max-width:900px){.archive-side{position:static;max-width:none;flex-basis:100%;width:100%}.archive-side .side-card{padding:18px}}
@media (max-width:640px){
	.archive-layout{gap:28px}
	.archive__bar{border-radius:22px;padding:8px}
	.archive__search{flex-basis:100%;padding-left:10px}
	.archive__bar .seg{width:100%;justify-content:stretch}
	.archive__bar .seg__btn{flex:1}
	.archive__count{margin-left:8px}
	.post-row{grid-template-columns:48px minmax(0,1fr);gap:14px;padding:18px 6px;border-radius:0}
	.post-row__mark{width:48px;height:48px;border-radius:14px}
	.post-row__mark .post-row__emblem{width:26px;height:26px}
	.post-row__n{display:none}
	.post-row__go{display:none}
	.post-row__title{font-size:17.5px}
	.post-row__excerpt{font-size:14px;-webkit-line-clamp:2}
}
/* Breadcrumbs (global) ---------------------------------------------------------- */
.crumbs--page{margin:0 auto;padding-top:22px;padding-bottom:0;font-size:13.5px}
.crumbs--page ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
.crumbs--page li{display:flex;align-items:center;gap:6px;min-width:0}
.crumbs--page li+li::before{content:"/";color:var(--am-line-2)}
.crumbs--page a{color:var(--am-ink-2);text-decoration:none}
.crumbs--page a:hover{color:var(--am-accent-text)}
.crumbs--page .crumbs__current{color:var(--am-accent-text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}
.crumbs--page+.page-head,.crumbs--page+.container.page-head,.crumbs--page+.pagewrap{padding-top:28px}
.crumbs--page+.container.page-single .page-head{padding-top:28px}
.is-reading .crumbs--page{padding-top:18px}
/* Live search */
.archive__spinner{width:18px;height:18px;margin-right:10px;border:2px solid var(--am-line-2);border-top-color:var(--am-accent);border-radius:50%;animation:spin .7s linear infinite}
.archive__spinner[hidden]{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.post-list.is-searching{opacity:.55;transition:opacity .15s}
.post-list__empty{padding:28px 16px}
.post-row__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.post-row__meta .post-row__tag{align-self:auto;padding:3px 9px;border:1px solid var(--am-line-2);border-radius:999px;font-size:11px;letter-spacing:.06em;color:var(--am-ink-2);background:var(--am-surface)}
.post-row:hover .post-row__meta .post-row__tag{border-color:var(--am-accent);color:var(--am-accent-text)}
/* Bookmark & share sheets ------------------------------------------------------- */
.sheet__text{margin:0 0 14px;font-size:14px;line-height:1.5;color:var(--am-ink-2)}
.sheet__row{display:flex;flex-wrap:wrap;gap:8px}
.sheet__row .btn--sm{height:40px}
.share-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.share-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px 0 8px;border:1px solid var(--am-line-2);border-radius:12px;background:var(--am-surface);color:var(--am-ink);font:600 14px var(--am-font-body);text-decoration:none;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.share-btn:hover{border-color:var(--am-ink);transform:translateY(-1px)}
.share-btn[hidden]{display:none}
.share-btn__icon{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--am-accent-soft);color:var(--am-accent-text)}
.share-btn--whatsapp .share-btn__icon{background:#E7F7EC;color:#1B8F4A}
.share-btn--facebook .share-btn__icon{background:#E8EFFB;color:#1B55C5}
.share-btn--x .share-btn__icon{background:#ECECEC;color:#111}
.share-btn--telegram .share-btn__icon{background:#E6F2FA;color:#1E7FC0}
[data-scheme="dark"] .share-btn--whatsapp .share-btn__icon,[data-scheme="dark"] .share-btn--facebook .share-btn__icon,[data-scheme="dark"] .share-btn--x .share-btn__icon,[data-scheme="dark"] .share-btn--telegram .share-btn__icon{background:var(--am-surface-2);color:var(--am-ink)}
.sheet[data-sheet="share"]{width:360px}
/* Footer: donate & logo ---------------------------------------------------------- */
.ftr__logo{display:inline-block;text-decoration:none}
.social .donate{display:flex;align-items:center;margin-left:6px}
.donate__btn{display:flex;align-items:center;height:100%}
.donate__btn img{display:block;height:34px!important;width:auto!important;border-radius:999px}
.donate__btn>*{display:flex;align-items:center}
.donate__btn form{margin:0}
.ftr__bottom{gap:14px 24px}
@media (max-width:640px){.ftr__bottom{justify-content:center;text-align:center}.ftr__bottom>*{flex:1 1 100%;display:flex;justify-content:center}}
.sec-head__seg{margin-bottom:6px}
@media (max-width:640px){.sec-head__seg{margin-bottom:0;width:100%}.sec-head__seg .seg__btn{flex:1}}
/* Flyer fills the height of the card grid */
.ig-card{display:flex;flex-direction:column;width:100%;min-height:0}
.ig-card #sb_instagram,.ig-card #sb_instagram #sbi_images,.ig-card #sb_instagram .sbi_item,.ig-card .sbi_photo_wrap,.ig-card .sbi_photo{height:100%!important;min-height:0}
.ig-card #sb_instagram{display:flex;flex-direction:column;flex:1}
.ig-card #sb_instagram #sbi_images{display:flex;flex-direction:column;flex:1}
.ig-card #sb_instagram .sbi_item{display:flex;flex-direction:column;flex:1}
.ig-card .sbi_photo_wrap{flex:1}
.ig-card .sbi_photo{display:block;aspect-ratio:auto;flex:1}
.ig-card .sbi_photo img{width:100%;height:100%;object-fit:cover;object-position:top}
.ig-card .sbi_caption_wrap{display:none}
/* Instagram flyer: always 4:5. */
.articles__side .ig-card{flex:none;height:auto}
.ig-card #sb_instagram,.ig-card #sb_instagram #sbi_images,.ig-card #sb_instagram .sbi_item,.ig-card .sbi_photo_wrap{height:auto!important;flex:none}
.ig-card .sbi_photo{aspect-ratio:4/5!important;height:auto!important;flex:none}
.articles__side{align-self:flex-start}
/* Stacked layout: articles, Browse all articles, flyer, Follow us on Instagram. */
@media (max-width:1080px){
	#articles{display:flex;flex-direction:column;gap:20px}
	#articles>.sec-head{margin-bottom:4px}
	#articles>.articles,#articles>.articles__foot{display:contents}
	#articles .articles__main{order:1;flex:none;width:100%}
	#articles .articles__foot .btn--outline{order:2;flex:none;width:100%}
	#articles .articles__side{order:3;flex:none;width:100%;max-width:480px;align-self:center}
	#articles .articles__ig{order:4;flex:none;width:100%}
}
/* Home footer centred on phones. */
@media (max-width:640px){
	.ftr__grid{text-align:center;justify-items:center}
	.ftr__grid .ftr__logo{margin:0 auto}
	.ftr__text{margin-left:auto;margin-right:auto}
	.ftr__col{align-items:center}
}
@media print{.hdr,.toolbar-wrap,.read__aside,.ftr,.progress,.search{display:none!important}.prose{font-size:12pt}}

/* Hero hadith card matches the Salawat card: border, gradient, diamond pattern, shadow. */
.hadith{
	--hd-border:rgba(199,255,226,.22);
	--hd-glow:rgba(199,255,226,.12);
	--hd-1:#18654c;
	--hd-2:#0b3628;
	--hd-shadow:0 28px 54px -34px rgba(7,34,26,.5),0 1px 2px rgba(7,34,26,.16);
	--hd-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23c7ffe2' stroke-opacity='.12'%3E%3Cpath d='M36 2 70 36 36 70 2 36Z'/%3E%3Cpath d='M36 16 56 36 36 56 16 36Z'/%3E%3C/g%3E%3C/svg%3E");
	isolation:isolate;
	border:1px solid var(--hd-border);
	background:radial-gradient(72% 48% at 100% 0%,var(--hd-glow),transparent 72%),linear-gradient(168deg,var(--hd-1) 0%,var(--hd-2) 74%)!important;
	box-shadow:var(--hd-shadow)!important;
}
[data-scheme="dark"] .hadith{
	--hd-glow:rgba(199,255,226,.08);
	--hd-1:#0d3628;
	--hd-2:#061e17;
	--hd-shadow:0 40px 80px -34px rgba(0,0,0,.92),0 0 72px -24px rgba(76,197,147,.42);
	--hd-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23c7ffe2' stroke-opacity='.10'%3E%3Cpath d='M36 2 70 36 36 70 2 36Z'/%3E%3Cpath d='M36 16 56 36 36 56 16 36Z'/%3E%3C/g%3E%3C/svg%3E");
}
.hadith>.lattice{display:none}
.hadith::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--hd-pattern);background-size:40px 40px;-webkit-mask-image:radial-gradient(115% 85% at 88% -5%,#000 0%,transparent 68%);mask-image:radial-gradient(115% 85% at 88% -5%,#000 0%,transparent 68%);opacity:.9;pointer-events:none}

/* Home library: Books (4) and Magazines (latest Shabaan + latest Moharram) side by side.
   Flex basis = the column gaps, grow = the cover count, so every cover is the same width
   and both cards stretch to the same height. */
.library-row{--lib-gap:18px;display:flex;gap:20px;align-items:stretch}
.library-row>.shelf{margin:0;min-width:0;box-sizing:content-box}
.library-row .shelf__grid{column-gap:var(--lib-gap)!important}
.library-row .shelf--books{flex:4 1 calc(var(--lib-gap) * 3)}
.library-row .shelf--mags{flex:2 1 var(--lib-gap)}
.library-row .shelf--books .shelf__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.library-row .shelf--mags .shelf__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1100px){
	.library-row{flex-direction:column}
	.library-row>.shelf{flex:none}
	.library-row .shelf--mags .shelf__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:640px){
	.library-row{--lib-gap:14px}
	.library-row .shelf--books .shelf__grid,.library-row .shelf--mags .shelf__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Salawat card: even, tighter space above (after the library) and below (before the footer). */
#salawat{padding-top:clamp(24px,4vw,40px)!important;padding-bottom:0!important}
.ftr:not(.ftr--compact){padding-top:clamp(40px,5.5vw,64px)}

/* Compact footer: logo | copyright | social icons. */
.ftr__bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:24px}
.ftr__bar>.ftr__logo{justify-self:start}
.ftr__bar>.social{justify-self:end}
.ftr__copy--mid{margin:0;padding-left:24px;border-left:1px solid rgba(255,255,255,.14);text-align:left}
@media (max-width:980px){
	.ftr__copy--mid{padding-left:0;border-left:0;text-align:center}
	.ftr__bar{display:flex;flex-direction:column;align-items:center;gap:20px}
	.ftr__bar>.ftr__logo,.ftr__bar>.social{justify-self:auto}
}

/* Magazines page: series tabs, latest-issue feature card, earlier issues. ------------- */
.mag-page__tabs{margin:0 0 22px;width:max-content;max-width:100%}
.mag-hero{
	position:relative;isolation:isolate;overflow:hidden;
	display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:40px;
	padding:30px 40px;border-radius:30px;border:1px solid rgba(199,255,226,.22);color:#F2F7F4;
	background:radial-gradient(72% 48% at 100% 0%,rgba(199,255,226,.12),transparent 72%),linear-gradient(168deg,#2C5E4F 0%,#163A30 74%);
	box-shadow:0 28px 54px -34px rgba(7,34,26,.5),0 1px 2px rgba(7,34,26,.16);
}
[data-scheme="dark"] .mag-hero{background:radial-gradient(72% 48% at 100% 0%,rgba(199,255,226,.08),transparent 72%),linear-gradient(168deg,#0d3628 0%,#061e17 74%);box-shadow:0 40px 80px -34px rgba(0,0,0,.92),0 0 72px -24px rgba(76,197,147,.42)}
.mag-hero__media{display:flex;justify-content:center}
.mag-hero__cover,a.mag-hero__cover._3d-flip-book{display:block;width:min(220px,100%);aspect-ratio:211/300;overflow:hidden;border-radius:6px 12px 12px 6px;background:#0b2a22;box-shadow:inset 6px 0 10px -6px rgba(0,0,0,.35),0 30px 50px -20px rgba(0,0,0,.6);cursor:pointer;transition:transform .25s}
.mag-hero__cover:hover{transform:translateY(-4px)}
.mag-hero__cover img{display:block;width:100%;height:100%;object-fit:cover}
.mag-hero__pill{display:inline-block;margin:0 0 14px;padding:5px 11px;border-radius:999px;background:rgba(199,255,226,.14);color:#CFE9DC;font:700 11px/1.2 var(--am-font-head);letter-spacing:.12em;text-transform:uppercase}
.mag-hero__title{margin:0 0 10px;font-family:var(--am-font-head);font-weight:700;font-size:clamp(26px,3vw,34px);line-height:1.15;letter-spacing:-.02em;color:#fff}
.mag-hero__meta{margin:0 0 24px;color:#A9C9BE;font-size:14.5px}
.mag-hero__actions{display:flex;flex-wrap:wrap;gap:10px}
.btn--mint,.mag-hero__open,a.mag-hero__open._3d-flip-book{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 22px;border:0;border-radius:999px;background:#A8DCC0;color:#0E2622;font:600 14.5px var(--am-font-head);text-decoration:none;cursor:pointer}
.btn--mint:hover,.mag-hero__open:hover{background:#BDE7CF}
.btn--ghost-light{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 22px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:transparent;color:#fff;font:600 14.5px var(--am-font-head);text-decoration:none}
.btn--ghost-light:hover{background:rgba(255,255,255,.08)}
.mag-page__sub{margin:40px 0 18px;font-family:var(--am-font-head);font-weight:600;font-size:22px;letter-spacing:-.01em}
@media (max-width:720px){
	.mag-hero{grid-template-columns:1fr;gap:24px;padding:28px 22px;text-align:center}
	.mag-hero__cover,a.mag-hero__cover._3d-flip-book{width:min(180px,60%)}
	.mag-hero__actions{justify-content:center}
	.mag-page__sub{margin-top:30px;font-size:20px}
}

/* Contact + Register: two-line titles ("We’re here / to help", "Register for / class"). ---- */
.page-title--stack em{display:inline}

/* Contact form: Name | Email, Message, then reCAPTCHA with the button on the right. */
.split--contact .form-card nf-fields-wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;align-items:end}
.split--contact .form-card nf-field:has(.textarea-container){grid-column:1/-1}
.split--contact .form-card nf-field:has(.recaptcha-container){grid-column:1;align-self:center}
.split--contact .form-card nf-field:has(.submit-container){grid-column:2;align-self:center;justify-self:end}
.split--contact .form-card .submit-container{margin:0}
.split--contact .form-card .nf-field-element textarea{min-height:110px}
.split--contact .form-card .submit-container input,
.form-card--register .submit-container input{width:auto!important;height:48px;padding:0 46px 0 24px!important;border-radius:999px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 20px center!important;background-size:16px!important}
@media (max-width:640px){
	.split--contact .form-card nf-fields-wrap{grid-template-columns:1fr}
	.split--contact .form-card nf-field:has(.recaptcha-container),.split--contact .form-card nf-field:has(.submit-container){grid-column:1;justify-self:stretch}
	.split--contact .form-card .submit-container input{width:100%!important}
}

/* Register form: "1 About you" and "2 Your class" cards, then a submit bar. ------------ */
.form-card--register{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.form-card--register nf-fields-wrap{display:flex!important;flex-direction:column;gap:22px}
.reg-sec{position:relative;margin-top:12px;padding:38px 22px 24px;border:1px solid var(--am-line);border-radius:26px;background:var(--am-surface)}
.reg-sec__title{position:absolute;top:-14px;left:18px;display:flex;align-items:center;gap:9px;margin:0;padding:0 10px 0 8px;background:var(--am-bg);font:600 17px/28px var(--am-font-head);letter-spacing:-.01em;color:var(--am-ink)}
.reg-sec__num{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--am-accent);color:var(--am-accent-ink);font:700 12.5px var(--am-font-head)}
.reg-sec__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px 16px;align-items:start}
.form-card--register .reg-sec__grid>nf-field{grid-column:span 6!important;min-width:0}
.form-card--register .reg-sec__grid>[data-reg="email"],.form-card--register .reg-sec__grid>[data-reg="phone"],.form-card--register .reg-sec__grid>[data-reg="dob"]{grid-column:span 2!important}
.form-card--register .reg-sec__grid>[data-reg="gender"],.form-card--register .reg-sec__grid>[data-reg="age"],.form-card--register .reg-sec__grid>[data-reg="language"]{grid-column:span 3!important}
.reg-sec--submit{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:0;padding:16px 18px;background:var(--am-surface-2);border-color:transparent}
.reg-sec--submit>nf-field{min-width:0}
.form-card--register .submit-container{margin:0}
.form-card--register .nf-field-container{margin:0!important}
.reg-optional{display:inline;margin:0 0 0 6px;font:500 12.5px var(--am-font-body);color:var(--am-ink-3)}
.form-card--register [data-reg="dob"] .nf-field-label{display:flex;align-items:baseline;flex-wrap:wrap}
.form-card--register [data-reg="dob"] .nf-label-span{display:inline;font-family:var(--am-font-head);font-size:14px;font-weight:600;color:var(--am-ink)}
.reg-fee{margin:16px 0 0!important}
/* Gender and language: segmented control. */
.form-card--register [data-reg="gender"] .nf-field-element ul,.form-card--register [data-reg="language"] .nf-field-element ul{display:grid!important;grid-template-columns:1fr 1fr;gap:4px!important;padding:4px;border-radius:14px;background:var(--am-surface-2)}
.form-card--register [data-reg="gender"] li label,.form-card--register [data-reg="language"] li label{display:flex!important;justify-content:center;width:100%;min-height:40px!important;padding:0 12px!important;border:0!important;border-radius:11px!important;background:transparent!important;color:var(--am-ink-2)!important;font-weight:600!important}
.form-card--register [data-reg="gender"] li input:checked+label,.form-card--register [data-reg="language"] li input:checked+label{background:var(--am-surface)!important;color:var(--am-ink)!important;box-shadow:0 1px 2px rgba(14,38,34,.08),0 4px 10px -6px rgba(14,38,34,.25)}
/* Age group: 2 x 2 grid of tiles. */
.form-card--register [data-reg="age"] .nf-field-element ul{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important}
.form-card--register [data-reg="age"] li label{display:flex!important;justify-content:center;width:100%;min-height:40px!important;padding:0 10px!important;border-radius:12px!important;font-weight:600!important}
/* Days: rounded pills. */
.form-card--register [data-reg="days"] li label{min-height:40px!important;padding:0 14px!important;border-radius:12px!important;font-weight:600!important}
.form-card--register [data-reg="gender"] li,.form-card--register [data-reg="language"] li,.form-card--register [data-reg="age"] li{width:100%;min-width:0}
/* No radio dots or check boxes inside these controls. */
.form-card--register [data-reg="gender"] li label::before,.form-card--register [data-reg="language"] li label::before,.form-card--register [data-reg="age"] li label::before,.form-card--register [data-reg="days"] li label::before{display:none!important}
.form-card--register [data-reg="age"] li input:checked+label,.form-card--register [data-reg="days"] li input:checked+label{border-color:var(--am-accent)!important;background:var(--am-accent-soft)!important;color:var(--am-ink)!important}
@media (max-width:760px){
	.reg-sec__grid{grid-template-columns:1fr}
	.form-card--register .reg-sec__grid>nf-field,.form-card--register .reg-sec__grid>[data-reg]{grid-column:1/-1!important}
	.reg-sec{padding:34px 16px 20px}
	.reg-sec--submit{flex-direction:column;align-items:stretch;padding:16px}
	.form-card--register .submit-container input{width:100%!important}
}

/* Register toggles: drop Ninja Forms' radio-dot indent so tiles and pills fill their space. */
.form-card--register [data-reg="gender"] li,.form-card--register [data-reg="language"] li,.form-card--register [data-reg="age"] li,.form-card--register [data-reg="days"] li{margin:0!important;padding:0!important}
.form-card--register [data-reg="gender"] li label,.form-card--register [data-reg="language"] li label,.form-card--register [data-reg="age"] li label,.form-card--register [data-reg="days"] li label{margin:0!important;box-sizing:border-box}
.form-card--register [data-reg="gender"] li label,.form-card--register [data-reg="language"] li label,.form-card--register [data-reg="age"] li label{width:100%!important;justify-content:center!important;text-align:center}
.form-card--register [data-reg="days"] .nf-field-element ul{gap:8px!important}
.form-card--register [data-reg="days"] li label{justify-content:center}

/* Beat Ninja Forms' "display-opinions" spacing (it uses !important and loads after the theme). */
.split .form-card--register .nf-field-element ul li{margin:0!important;padding:0!important}
.split .form-card--register .nf-field-element ul li label{margin:0!important}
.split .form-card--register [data-reg="gender"] .nf-field-element ul,.split .form-card--register [data-reg="language"] .nf-field-element ul{padding:4px!important;align-items:center}
/* Submit buttons: theme green, darker on hover (not Ninja Forms' grey). */
.split .nf-form-cont .submit-container input,.split .nf-form-cont .submit-container input:focus{background-color:var(--am-accent)!important;color:var(--am-accent-ink)!important;border:0!important;transition:background-color .2s,transform .2s,box-shadow .2s}
.split .nf-form-cont .submit-container input:hover{background-color:color-mix(in srgb,var(--am-accent) 82%,#000)!important;color:var(--am-accent-ink)!important;transform:translateY(-1px);box-shadow:0 18px 34px -16px var(--am-shadow)}
.split .nf-form-cont .submit-container input:focus-visible{outline:0;box-shadow:0 0 0 4px var(--am-accent-soft)}

/* Back to top (Powerkit): round theme-green button with an arrow. */
.pk-scroll-to-top{right:24px!important;bottom:24px!important;display:grid!important;place-items:center;width:46px!important;height:46px!important;padding:0!important;border:1px solid rgba(199,255,226,.22)!important;border-radius:50%!important;background:var(--am-accent)!important;color:var(--am-accent-ink)!important;text-decoration:none!important;box-shadow:0 14px 28px -12px rgba(7,34,26,.55),0 1px 2px rgba(7,34,26,.2);transition:opacity .25s,transform .25s,background-color .2s,box-shadow .2s!important}
.pk-scroll-to-top{--pk-scrolltop-opacity-hover:1}
.pk-scroll-to-top:not(.pk-active){pointer-events:none}
.pk-scroll-to-top .pk-icon{display:none!important}
.pk-scroll-to-top::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.pk-scroll-to-top::after{display:none!important}
.pk-scroll-to-top:hover{background:color-mix(in srgb,var(--am-accent) 82%,#000)!important;transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(7,34,26,.6),0 1px 2px rgba(7,34,26,.2)}
.pk-scroll-to-top:focus-visible{outline:0;box-shadow:0 0 0 4px var(--am-accent-soft)}
[data-scheme="dark"] .pk-scroll-to-top{box-shadow:0 14px 30px -12px rgba(0,0,0,.8),0 0 28px -10px rgba(76,197,147,.35)}
@media (max-width:640px){.pk-scroll-to-top{right:16px!important;bottom:16px!important;width:42px!important;height:42px!important}}

/* Salawat counter icons, solid to match the theme set. */
.sq-resetline>svg,.sq-share>svg{display:none!important}
.sq-resetline::before,.sq-share::before{content:"";display:inline-block;flex:none;background:currentColor;vertical-align:-2px}
.sq-resetline::before{width:12px;height:12px;margin-right:5px;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M12%202.5a9.5%209.5%200%201%200%200%2019%209.5%209.5%200%200%200%200-19zM11%206.5h2v5l3.2%201.9-1%201.7L11%2012.6z%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M12%202.5a9.5%209.5%200%201%200%200%2019%209.5%209.5%200%200%200%200-19zM11%206.5h2v5l3.2%201.9-1%201.7L11%2012.6z%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.sq-share::before{width:15px;height:15px;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202.4%206.3%208.1l1.5%201.5L10.9%206.5V15h2.2V6.5l3.1%203.1%201.5-1.5zM3.8%2013h2.2v5h12v-5h2.2v7.2H3.8z%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202.4%206.3%208.1l1.5%201.5L10.9%206.5V15h2.2V6.5l3.1%203.1%201.5-1.5zM3.8%2013h2.2v5h12v-5h2.2v7.2H3.8z%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}

/* Footer social row: bigger icons and Donate, wraps cleanly on small screens. */
.ftr .social{flex-wrap:wrap;align-items:center;gap:10px}
.ftr .social__btn{width:42px!important;height:42px!important;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);transition:background .15s,border-color .15s,transform .15s}
.ftr .social__btn .icon{width:20px;height:20px}
.ftr .social__btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.ftr .social .donate{height:42px!important;margin-left:4px}
.ftr .donate__btn img{height:42px!important}
@media (max-width:980px){.ftr .social{justify-content:center}}
@media (max-width:420px){
	.ftr .social{gap:10px 12px}
	.ftr .social .donate{flex-basis:100%;justify-content:center;margin-left:0}
}

/* Diamond pattern: smaller 40px tiles everywhere, and on the magazine feature card. */
.salawat-counter .sq-card::before{background-size:40px 40px!important}
.mag-hero{
	--hd-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23c7ffe2' stroke-opacity='.26'%3E%3Cpath d='M36 2 70 36 36 70 2 36Z'/%3E%3Cpath d='M36 16 56 36 36 56 16 36Z'/%3E%3C/g%3E%3C/svg%3E");
}
.mag-hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--hd-pattern);background-size:40px 40px;-webkit-mask-image:radial-gradient(140% 120% at 80% 0%,#000 10%,rgba(0,0,0,.35) 60%,transparent 90%);mask-image:radial-gradient(140% 120% at 80% 0%,#000 10%,rgba(0,0,0,.35) 60%,transparent 90%);pointer-events:none}
.mag-hero::after{content:"";position:absolute;z-index:-1;left:-8%;bottom:-40%;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(199,255,226,.10),transparent);pointer-events:none}

/* Fields: mint-grey fill (#F0F5F2), white with a soft green ring on focus. */
.nf-form-cont .nf-field-element input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]),.nf-form-cont .nf-field-element textarea,.nf-form-cont .nf-field-element select,.comment-form input:not([type=checkbox]):not([type=submit]),.comment-form textarea{background-color:var(--am-field)!important;border-color:rgba(30,94,81,.14)!important}
.nf-form-cont .nf-field-element input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):hover,.nf-form-cont .nf-field-element textarea:hover,.nf-form-cont .nf-field-element select:hover{border-color:rgba(30,94,81,.28)!important}
.nf-form-cont .nf-field-element input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):focus,.nf-form-cont .nf-field-element textarea:focus,.nf-form-cont .nf-field-element select:focus,.comment-form input:not([type=checkbox]):not([type=submit]):focus,.comment-form textarea:focus{background-color:var(--am-surface)!important;border-color:var(--am-accent)!important;box-shadow:0 0 0 4px var(--am-accent-soft)!important}
[data-scheme="dark"] .nf-form-cont .nf-field-element input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]),[data-scheme="dark"] .nf-form-cont .nf-field-element textarea,[data-scheme="dark"] .nf-form-cont .nf-field-element select{border-color:var(--am-line-2)!important}

/* Pagination: hover and keyboard focus. */
.pages .page-numbers{transition:background-color .18s,border-color .18s,color .18s,transform .18s,box-shadow .18s}
.pages a.page-numbers:hover{background:var(--am-surface);border-color:var(--am-accent);color:var(--am-accent-text);transform:translateY(-2px);box-shadow:0 10px 20px -12px var(--am-shadow)}
.pages a.page-numbers:active{transform:translateY(0);box-shadow:none}
.pages a.page-numbers:focus-visible{outline:0;border-color:var(--am-accent);box-shadow:0 0 0 4px var(--am-accent-soft)}
[data-scheme="dark"] .pages a.page-numbers:hover{background:var(--am-surface-2)}

/* Field error badge: small round "!" inside the field instead of Ninja Forms' square red block. */
.nf-form-cont .nf-error.field-wrap .nf-field-element::after{
	content:"!"!important;top:50%!important;bottom:auto!important;right:14px!important;left:auto!important;
	width:20px!important;height:20px!important;border-radius:50%!important;transform:translateY(-50%);
	background:#C8372D!important;color:#fff!important;font:700 12px/20px var(--am-font-body)!important;text-align:center;
	box-shadow:0 0 0 3px rgba(200,55,45,.14);transition:none!important;pointer-events:none;
}
.nf-form-cont .nf-error.field-wrap.textarea-wrap .nf-field-element::after{top:14px!important;transform:none}
.nf-form-cont .nf-error.field-wrap.list-radio-wrap .nf-field-element::after,
.nf-form-cont .nf-error.field-wrap.list-checkbox-wrap .nf-field-element::after,
.nf-form-cont .nf-error.field-wrap.listradio-wrap .nf-field-element::after,
.nf-form-cont .nf-error.field-wrap.listcheckbox-wrap .nf-field-element::after,
.nf-form-cont .nf-error.field-wrap.recaptcha-wrap .nf-field-element::after,
.nf-form-cont .nf-error.field-wrap.submit-wrap .nf-field-element::after,
.nf-form-cont .nf-error.field-wrap.date-wrap .nf-field-element::after{display:none!important}
.nf-form-cont .nf-error.field-wrap .nf-field-element input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]),
.nf-form-cont .nf-error.field-wrap .nf-field-element textarea{padding-right:44px!important;border-color:#C8372D!important;background-color:#FFF6F5!important}
.nf-form-cont .nf-error.field-wrap .nf-field-element input:focus,.nf-form-cont .nf-error.field-wrap .nf-field-element textarea:focus{box-shadow:0 0 0 4px rgba(200,55,45,.12)!important}
.nf-form-cont .nf-error-msg{margin-top:6px!important;color:#B4322C!important;font-size:13px!important}
[data-scheme="dark"] .nf-form-cont .nf-error.field-wrap .nf-field-element input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]),[data-scheme="dark"] .nf-form-cont .nf-error.field-wrap .nf-field-element textarea{background-color:rgba(200,55,45,.1)!important}

/* Field valid badge: same small round badge as the error one, theme green with a check. */
.nf-form-cont .nf-pass.field-wrap .nf-field-element::after{
	content:""!important;top:50%!important;bottom:auto!important;right:14px!important;left:auto!important;
	width:20px!important;height:20px!important;border-radius:50%!important;transform:translateY(-50%);
	background:var(--am-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/11px no-repeat!important;color:transparent!important;font-size:0!important;line-height:0!important;
	box-shadow:0 0 0 3px var(--am-accent-soft);transition:none!important;pointer-events:none;
}
.nf-form-cont .nf-pass.field-wrap.textarea-wrap .nf-field-element::after,
.nf-form-cont .nf-pass.field-wrap.listradio-wrap .nf-field-element::after,
.nf-form-cont .nf-pass.field-wrap.listcheckbox-wrap .nf-field-element::after,
.nf-form-cont .nf-pass.field-wrap.list-radio-wrap .nf-field-element::after,
.nf-form-cont .nf-pass.field-wrap.list-checkbox-wrap .nf-field-element::after,
.nf-form-cont .nf-pass.field-wrap.date-wrap .nf-field-element::after,
.nf-form-cont .nf-pass.field-wrap.recaptcha-wrap .nf-field-element::after,
.nf-form-cont .nf-pass.field-wrap.submit-wrap .nf-field-element::after{display:none!important}
.nf-form-cont .nf-pass .ninja-forms-field:not([type=radio]):not([type=checkbox]):not([type=button]):not([type=submit]){border-color:rgba(30,94,81,.45)!important;padding-right:44px!important}
/* Browser autofill keeps the theme field colour instead of turning blue/yellow. */
.nf-form-cont input:-webkit-autofill,.nf-form-cont input:-webkit-autofill:hover,.nf-form-cont input:-webkit-autofill:focus,.comment-form input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--am-field) inset!important;box-shadow:0 0 0 1000px var(--am-field) inset!important;-webkit-text-fill-color:var(--am-ink)!important;caret-color:var(--am-ink);transition:background-color 9999s ease-out 0s}
.nf-form-cont input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--am-surface) inset,0 0 0 4px var(--am-accent-soft)!important}

/* Same label height on every field so the input boxes in a row line up. */
.form-card--register .nf-field-label,.split--contact .nf-field-label{display:flex!important;align-items:center;flex-wrap:wrap;min-height:26px;margin-bottom:10px!important;line-height:1.4}
.form-card--register .nf-field-label label,.form-card--register .nf-field-label .nf-label-span{line-height:1.4!important}

/* Article list rows: straight inset dividers, calm card hover (no curled border ends). */
.post-list{gap:0}
.post-list .post-row{position:relative;border:1px solid transparent!important;border-radius:20px;box-shadow:none;transition:background-color .2s,border-color .2s,box-shadow .2s}
.post-list .post-row::before{content:"";position:absolute;left:20px;right:20px;top:-1px;height:1px;background:var(--am-line);transition:opacity .2s;pointer-events:none}
.post-list .post-row:first-child::before{display:none}
.post-list .post-row:hover{background:var(--am-surface);border-color:var(--am-line)!important;box-shadow:0 18px 36px -26px var(--am-shadow)!important}
.post-list .post-row:hover::before,.post-list .post-row:hover+.post-row::before{opacity:0}
.post-list .post-row:focus-visible{outline:0;border-color:var(--am-accent)!important;box-shadow:0 0 0 4px var(--am-accent-soft)!important}
.post-list .post-row:hover .post-row__mark{background:var(--am-accent-soft)}
.post-row__mark{transition:background-color .2s}
@media (max-width:640px){.post-list .post-row{border-radius:16px}.post-list .post-row::before{left:6px;right:6px}}

/* Topics: highlighted Quick reads chip. */
.chip--quick{gap:6px;border-color:var(--am-accent)!important;background:var(--am-accent-soft)!important;color:var(--am-accent-text)!important;font-weight:700}
.chip--quick .icon{flex:none;color:#C9A227}
.chip--quick:hover{background:var(--am-accent)!important;color:var(--am-accent-ink)!important}
.chip--quick:hover .icon{color:#F3D36B}
.chip--quick.chip--on{background:var(--am-accent)!important;color:var(--am-accent-ink)!important}
.chip--quick.chip--on .icon{color:#F3D36B}

/* ==========================================================================
   Salawat counter, restyled to the theme (plugin untouched; colours via its
   --sq-* variables, type and buttons matched to the magazine/hadith cards).
   ========================================================================== */
html body .salawat-counter{
	--sq-surface-1:#2C5E4F;--sq-surface-2:#163A30;--sq-surface-glow:rgba(199,255,226,.12);
	--sq-border:rgba(199,255,226,.22);--sq-border-strong:rgba(199,255,226,.32);
	--sq-ink:#FFFFFF;--sq-muted:#CFE9DC;--sq-caption:#A9C9BE;
	--sq-accent:#CFE9DC;--sq-accent-soft:rgba(199,255,226,.14);
	--sq-badge-bg:rgba(199,255,226,.14);--sq-badge-border:rgba(199,255,226,.26);--sq-badge-ink:#CFE9DC;
	--sq-plate:rgba(255,255,255,.06);--sq-plate-border:rgba(199,255,226,.22);--sq-plate-border-hover:rgba(199,255,226,.45);
	--sq-plate-top:rgba(255,255,255,.08);--sq-plate-bottom:rgba(255,255,255,.02);
	--sq-plate-ink:#FFFFFF;--sq-plate-muted:#CFE9DC;--sq-plate-hint:#A8DCC0;
	--sq-faraj:#E9D59A;--sq-track:rgba(255,255,255,.12);--sq-bar-from:#A8DCC0;--sq-bar-to:#D9F2E4;
	--sq-shadow:0 28px 54px -34px rgba(7,34,26,.5),0 1px 2px rgba(7,34,26,.16);--sq-focus:#A8DCC0;
}
html[data-scheme="dark"] body .salawat-counter:not(.salawat-theme-light){
	--sq-surface-1:#0d3628;--sq-surface-2:#061e17;--sq-surface-glow:rgba(199,255,226,.08);
	--sq-ink:#FFFFFF;--sq-muted:#BFDCCE;--sq-caption:#93B5A9;
	--sq-plate:rgba(255,255,255,.04);--sq-plate-top:rgba(255,255,255,.06);--sq-plate-bottom:rgba(255,255,255,.01);
	--sq-shadow:0 40px 80px -34px rgba(0,0,0,.92),0 0 72px -24px rgba(76,197,147,.42);
}
/* Card */
.salawat-counter .sq-card{font-family:var(--am-font-body)}
@media (min-width:970px){.salawat-counter:not(.sq-compact) .sq-card{padding:28px 34px 24px!important;border-radius:30px;column-gap:40px!important}}
.salawat-counter.sq-compact .sq-card{padding:22px 20px 20px;border-radius:24px}
/* Header: badge, pill eyebrow, title */
.salawat-counter .sq-badge{width:42px;height:42px;border-radius:13px}
.salawat-counter .sq-eyebrow{display:block;width:max-content;max-width:100%;margin:0 0 8px;padding:4px 10px;border-radius:999px;background:rgba(199,255,226,.14);color:#CFE9DC;font:700 10.5px/1.3 var(--am-font-head);letter-spacing:.12em}
.salawat-counter .sq-title{font-family:var(--am-font-head);font-weight:700;letter-spacing:-.02em;color:#fff}
.salawat-counter .sq-honorific{font-family:var(--am-font-serif);font-style:italic;font-size:.8em;letter-spacing:0}
/* Labels and numbers */
.salawat-counter .sq-label,.salawat-counter .sq-k{font:700 11px/1.5 var(--am-font-head);letter-spacing:.12em}
.salawat-counter .sq-count{font-family:var(--am-font-head);font-weight:700;letter-spacing:-.04em}
.salawat-counter .sq-total{font-family:var(--am-font-head);font-weight:700;font-size:26px}
/* Tap plate */
.salawat-counter .sq-dhikr-btn{border-radius:22px;padding:22px 20px 18px;transition:border-color .2s,transform .2s,box-shadow .2s,background-color .2s}
.salawat-counter .sq-dhikr-btn:hover{transform:translateY(-2px);box-shadow:0 18px 34px -20px rgba(0,0,0,.55)}
.salawat-counter .sq-dhikr-btn:active{transform:translateY(0) scale(.99)}
.salawat-counter .sq-dhikr-btn:focus-visible,.salawat-counter .sq-share:focus-visible{outline:0;box-shadow:0 0 0 4px rgba(168,220,192,.35)}
.salawat-counter .sq-dhikr{font-size:25px;line-height:1.7}
.salawat-counter .sq-hint{margin-top:10px;font:700 10.5px/1.4 var(--am-font-head);letter-spacing:.14em}
/* Progress and captions */
.salawat-counter .sq-community{border-top-color:rgba(199,255,226,.16)}
.salawat-counter .sq-bar{height:10px}
.salawat-counter .sq-fill{box-shadow:0 0 14px rgba(168,220,192,.35)}
.salawat-counter .sq-goalrow,.salawat-counter .sq-resetline,.salawat-counter .sq-sync{font-family:var(--am-font-body);font-size:12.5px}
.salawat-counter .sq-note{font-family:var(--am-font-body);font-size:13px;line-height:1.55;color:var(--sq-caption)}
/* Share: same as the theme's light ghost button */
.salawat-counter .sq-share{height:42px;padding:0 18px!important;gap:8px;border:1px solid rgba(255,255,255,.28)!important;border-radius:999px;background:transparent;color:#fff!important;font:600 14px var(--am-font-head)!important;transition:background-color .2s,border-color .2s,transform .2s}
.salawat-counter .sq-share:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45)!important;transform:translateY(-1px)}

/* Header logo: same breathing room on phones as on desktop. */
@media (max-width:900px){
	.hdr__bar{padding:8px 8px 8px 18px!important}
	.hdr__bar .logo{flex:none}
	.hdr__bar .logo img{height:34px!important;width:auto!important}
}
@media (max-width:360px){
	.hdr__bar{padding-left:14px!important}
	.hdr__bar .logo img{height:30px!important}
}

/* Home footer on phones: each menu's links on one line that wraps, heading above.
   Dots sit centred between links (12px each side). */
@media (max-width:640px){
	.ftr__grid{gap:22px!important}
	.ftr__col{display:flex!important;flex-direction:row!important;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 0!important;font-size:15px}
	.ftr__col>b{flex:0 0 100%;margin:0 0 4px;text-align:center}
	.ftr__col>a{display:inline-flex;align-items:center;padding:2px 0;line-height:1.5;white-space:nowrap}
	.ftr__col>a+a::before{content:"";display:inline-block;flex:none;width:4px;height:4px;margin:0 12px;border-radius:50%;background:rgba(220,233,227,.4)}
	.ftr__col>a:hover{text-decoration:underline;text-underline-offset:4px}
}

/* Floating reading toolbar + back-to-top: compact, centred shadows that fade out
   before Safari's bottom bar (a long downward shadow was being clipped there). */
.toolbar{box-shadow:0 6px 18px -6px rgba(9,31,26,.22),0 1px 3px rgba(9,31,26,.08)!important}
.pk-scroll-to-top{box-shadow:0 6px 16px -6px rgba(7,34,26,.45),0 1px 3px rgba(7,34,26,.15)!important}
.pk-scroll-to-top:hover{box-shadow:0 8px 20px -6px rgba(7,34,26,.5),0 1px 3px rgba(7,34,26,.15)!important}
[data-scheme="dark"] .toolbar{box-shadow:0 6px 18px -6px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.3)!important}
[data-scheme="dark"] .pk-scroll-to-top{box-shadow:0 6px 18px -6px rgba(0,0,0,.7),0 0 18px -8px rgba(76,197,147,.35)!important}
.toolbar-wrap{bottom:calc(20px + env(safe-area-inset-bottom,0px))}
.pk-scroll-to-top{bottom:calc(24px + env(safe-area-inset-bottom,0px))!important}
@media (max-width:640px){
	.toolbar-wrap{bottom:calc(14px + env(safe-area-inset-bottom,0px))}
	.pk-scroll-to-top{bottom:calc(16px + env(safe-area-inset-bottom,0px))!important}
}

/* Cards and fields, one system: no double inset from Ninja Forms' wrapper, same border,
   radius and soft shadow on every card on Contact / Register. */
.split .form-card .nf-form-cont{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.split .form-card,.split .side-card,.split .channel,.reg-sec:not(.reg-sec--submit){border:1px solid var(--am-line)!important;border-radius:24px!important;background:var(--am-surface);box-shadow:0 1px 2px rgba(14,38,34,.04),0 12px 30px -26px rgba(14,38,34,.35)}
.form-card--register{border:0!important;box-shadow:none!important;background:transparent!important}
.split .channel:hover{border-color:var(--am-accent)!important}
.reg-sec--submit{border-radius:24px!important}
.note{border-radius:20px!important}
/* Fields: same radius family as the cards, comfortable height. */
.split .nf-form-cont .nf-field-element input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]),.split .nf-form-cont .nf-field-element select{border-radius:14px!important;min-height:50px}
.split .nf-form-cont .nf-field-element textarea{border-radius:16px!important}
/* "1 About you" as a tab sitting on the card edge (no square grey block). */
.reg-sec__title{top:-17px!important;left:16px!important;padding:3px 14px 3px 4px!important;border:1px solid var(--am-line);border-radius:999px;background:var(--am-surface)!important;box-shadow:0 4px 12px -8px rgba(14,38,34,.3);font-size:15.5px!important;line-height:26px!important}
.reg-sec__num{width:26px!important;height:26px!important}
.reg-sec{padding-top:36px!important}
@media (max-width:640px){
	.split .form-card{padding:22px 18px!important}
	.reg-sec{padding:34px 18px 20px!important}
	.split .side-card{padding:22px 18px!important}
	.split .channel{padding:14px 16px!important}
}
.split .form-card.form-card--register{padding:0!important;border:0!important;box-shadow:none!important;background:transparent!important}

/* Reading tools moved off the floating bar:
   desktop = right side of the meta row under the title, panels drop down;
   phones/tablets = top of the menu, panels open inline. */
.has-top-tools .toolbar-wrap{display:none!important}
.read__meta{justify-content:space-between}
.read__tools:empty{display:none}
.read__tools .toolbar-stack,.hdr__reading .toolbar-stack{position:relative;pointer-events:auto}
.read__tools .toolbar,.hdr__reading .toolbar{backdrop-filter:none;box-shadow:none!important}
.read__tools .toolbar__pct,.hdr__reading .toolbar__pct{display:none}
.read__tools .toolbar{padding:3px;background:var(--am-surface);border-color:var(--am-line)}
.read__tools .tool{width:40px;height:40px}
.read__tools .sheet{position:absolute;top:calc(100% + 10px);right:0;z-index:45;box-shadow:0 18px 40px -18px var(--am-shadow)}
.read__meta{position:relative;z-index:5}
.hdr__reading{margin:0 0 8px;padding:6px 6px 14px;border-bottom:1px solid var(--am-line)}
.hdr__reading{display:block}
.hdr__reading:not(:has(.toolbar-stack)){display:none}
.hdr__reading-label{margin:0 0 8px;padding:0 4px;color:var(--am-ink-3);font:700 11px/1.3 var(--am-font-head);letter-spacing:.12em;text-transform:uppercase}
.hdr__reading .toolbar-stack{display:flex;flex-direction:column-reverse;align-items:stretch;gap:10px}
.hdr__reading .toolbar{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;width:100%;padding:4px;border:0;border-radius:16px;background:var(--am-surface-2)}
.hdr__reading .tool{width:100%;height:46px;border-radius:12px}
.hdr__reading .tool.is-on{background:var(--am-surface);box-shadow:0 1px 2px rgba(14,38,34,.08)}
.hdr__reading .sheet{width:100%;max-width:none;max-height:52vh;box-shadow:none;border-color:var(--am-line)}
.hdr__menu{max-height:calc(100vh - 100px);overflow:auto}

/* Submit bar / reCAPTCHA: no empty label rows, no stray placeholders, tight padding. */
.split .recaptcha-container .nf-field-label,.split .submit-container .nf-field-label{display:none!important}
.split .recaptcha-container .nf-after-field,.split .submit-container .nf-after-field .nf-input-limit,.split .recaptcha-container .nf-before-field,.split .submit-container .nf-before-field{display:none!important}
.split .submit-container .nf-error-wrap:not(:has(*)),.split .recaptcha-container .nf-error-wrap:not(:has(*)){display:none!important}
.split .recaptcha-container .nf-field-element,.split .submit-container .nf-field-element{margin:0!important}
.split .g-recaptcha>div{margin:0!important}
.reg-sec.reg-sec--submit{padding:16px 18px!important;gap:14px}
@media (max-width:640px){.reg-sec.reg-sec--submit{padding:14px!important;gap:12px}}

/* Reading progress: a slim line built into the bottom edge of the header bar
   (replaces the separate strip at the very top of the screen). */
.is-reading .hdr{top:0!important;padding-top:12px!important}
@media (max-width:640px){.is-reading .hdr{padding-top:10px!important}}
.hdr__bar{position:relative}
.hdr__progress{position:absolute;left:22px;right:22px;bottom:-1px;height:3px;border-radius:3px;background:rgba(30,94,81,.12);overflow:hidden;pointer-events:none}
.hdr__progress-fill{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--am-accent),#5FAE86);box-shadow:0 0 8px rgba(95,174,134,.45);transition:width .12s linear}
[data-scheme="dark"] .hdr__progress{background:rgba(255,255,255,.1)}
[data-scheme="dark"] .hdr__progress-fill{background:linear-gradient(90deg,#3E8F72,#9FD3B8)}
@media (max-width:640px){.hdr__progress{left:16px;right:16px}}

/* Header menu icons (hidden in the footer menus). */
.navlink__icon{flex:none;color:var(--am-accent-text);opacity:.8;transition:opacity .15s,transform .15s}
.navlink:hover .navlink__icon,.navlink.is-active .navlink__icon{opacity:1}
.navlink:hover .navlink__icon{transform:translateY(-1px)}
.hdr__nav .navlink{gap:7px}
.hdr__menu .navlink{gap:12px}
.hdr__menu .navlink__icon{width:20px;height:20px}
.ftr .navlink__icon{display:none}
[data-scheme="dark"] .navlink__icon{color:#9FD3B8}

/* Section eyebrows: icon chip instead of 01 / 02. */
.eyebrow__icon{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;margin-right:2px;border-radius:9px;background:var(--am-accent-soft);color:var(--am-accent-text);vertical-align:middle}
.eyebrow__icon .icon{width:15px;height:15px}

/* Salawat counter badge: the academy emblem instead of the praying-hands icon. */
.salawat-counter .sq-badge{background:#fff var(--am-emblem) center/72% no-repeat!important;border-color:rgba(255,255,255,.5)!important;box-shadow:0 4px 12px -6px rgba(0,0,0,.35)}
.salawat-counter .sq-badge>svg{display:none!important}
[data-scheme="dark"] .salawat-counter .sq-badge{background-color:#0B2621!important;border-color:rgba(199,255,226,.22)!important;box-shadow:0 4px 12px -6px rgba(0,0,0,.6)}
/* Emblem tile spans the full height of the eyebrow + title block, stays square. */
.salawat-counter .sq-head{align-items:flex-start!important}
.salawat-counter .sq-badge{align-self:flex-start;width:51px!important;height:51px!important;flex:0 0 51px;border-radius:14px!important}

/* Button hovers, site-wide: lift + soft shadow, colour shift per style, arrow nudges right. */
.btn,.btn--mint,.btn--ghost-light,.mag-hero__open{transition:background-color .2s,border-color .2s,color .2s,transform .2s,box-shadow .2s!important}
.btn .icon{transition:transform .2s}
.btn:hover .icon-arrow{transform:translateX(3px)}
.btn:active,.btn--mint:active,.btn--ghost-light:active,.mag-hero__open:active{transform:translateY(0)!important;box-shadow:none!important}
.btn:focus-visible,.btn--mint:focus-visible,.btn--ghost-light:focus-visible,.mag-hero__open:focus-visible{outline:0;box-shadow:0 0 0 4px var(--am-accent-soft)!important}
/* Solid green */
.btn--accent:hover,.btn--accent.btn--sm:hover{background:color-mix(in srgb,var(--am-accent) 84%,#000)!important;color:var(--am-accent-ink);transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(30,94,81,.75)}
/* Light outline / ghost */
.btn--ghost:hover,.btn--outline:hover,.btn--sm:not(.btn--accent):hover{background:var(--am-surface)!important;border-color:var(--am-accent)!important;color:var(--am-accent-text)!important;transform:translateY(-2px);box-shadow:0 12px 24px -16px var(--am-shadow)}
[data-scheme="dark"] .btn--ghost:hover,[data-scheme="dark"] .btn--outline:hover,[data-scheme="dark"] .btn--sm:not(.btn--accent):hover{background:var(--am-surface-2)!important;border-color:#9FD3B8!important;color:#fff!important;box-shadow:0 12px 24px -14px rgba(0,0,0,.8)}
/* On dark green cards */
.btn--mint:hover,.mag-hero__open:hover{background:#C3EBD5!important;transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(0,0,0,.6)}
.btn--ghost-light:hover{background:rgba(255,255,255,.1)!important;border-color:rgba(255,255,255,.5)!important;transform:translateY(-2px)}

/* Shared #salawat-counter links land with the card clear of the sticky header. */
#salawat-counter{scroll-margin-top:110px}
@media (max-width:640px){#salawat-counter{scroll-margin-top:90px}}

/* Shared link http://site/#salawat-counter lands with the counter clear of the sticky header. */
#salawat-counter{scroll-margin-top:110px}
@media (max-width:640px){#salawat-counter{scroll-margin-top:90px}}

/* Articles -> Library gap matches Library -> Salawat. */
#library{padding-top:calc(clamp(24px,4vw,40px) + 20px)!important}

/* Header "liquid glass": more see-through, stronger blur + saturation, light sheen,
   bright top edge and a soft floating shadow. Same treatment on the phone menu. */
.hdr__bar,.hdr__menu{
	background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.38) 100%)!important;
	-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)!important;
	border:1px solid rgba(255,255,255,.7)!important;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(14,38,34,.06),0 10px 30px -14px rgba(14,38,34,.28),0 1px 2px rgba(14,38,34,.06)!important;
}
.hdr__bar::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,0) 70%,rgba(255,255,255,.25) 100%);mix-blend-mode:soft-light}
.hdr__bar>*{position:relative}
.hdr__bar>.hdr__progress{position:absolute}
[data-scheme="dark"] .hdr__bar,[data-scheme="dark"] .hdr__menu{
	background:linear-gradient(180deg,rgba(40,40,40,.55) 0%,rgba(18,18,18,.42) 100%)!important;
	border-color:rgba(255,255,255,.12)!important;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 32px -14px rgba(0,0,0,.8)!important;
}
[data-scheme="dark"] .hdr__bar::before{background:linear-gradient(115deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 40%)}
/* Icon buttons inside the glass get a frosted fill too. */
.hdr__bar .iconbtn{background:rgba(225,237,231,.75)!important;border-color:rgba(30,94,81,.14)!important;color:var(--am-accent-text)!important;transition:background-color .2s,border-color .2s,transform .2s}
.hdr__bar .iconbtn:hover{background:rgba(207,229,218,.95)!important;border-color:rgba(30,94,81,.28)!important;transform:translateY(-1px)}
.hdr__bar .iconbtn[aria-expanded="true"]{background:var(--am-accent)!important;border-color:var(--am-accent)!important;color:var(--am-accent-ink)!important}
[data-scheme="dark"] .hdr__bar .iconbtn{background:rgba(159,211,184,.12)!important;border-color:rgba(159,211,184,.2)!important;color:#CFE9DC!important}
[data-scheme="dark"] .hdr__bar .iconbtn:hover{background:rgba(159,211,184,.2)!important}

/* Glass, toned down: a bit more solid, softer sheen, smaller shadow. */
.hdr__bar,.hdr__menu{
	background:linear-gradient(180deg,rgba(255,255,255,.76) 0%,rgba(255,255,255,.62) 100%)!important;
	-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)!important;
	border-color:rgba(255,255,255,.6)!important;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 4px 12px -8px rgba(14,38,34,.22),0 1px 2px rgba(14,38,34,.05)!important;
}
.hdr__bar::before{opacity:.45}
[data-scheme="dark"] .hdr__bar,[data-scheme="dark"] .hdr__menu{
	background:linear-gradient(180deg,rgba(34,34,34,.72) 0%,rgba(18,18,18,.62) 100%)!important;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 14px -8px rgba(0,0,0,.6)!important;
}

/* Video play buttons: liquid glass (light) / smoked glass (dark). */
.video__play{
	width:58px!important;height:58px!important;margin:-29px 0 0 -29px!important;border-radius:50%!important;
	background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.28) 100%)!important;
	-webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);
	border:1px solid rgba(255,255,255,.7)!important;
	color:#0E2622!important;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 8px 20px -10px rgba(0,0,0,.45)!important;
	transition:transform .2s,background .2s,box-shadow .2s!important;
}
.video__play .icon{margin-left:3px}
.video:hover .video__play{transform:scale(1.07);background:linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.42) 100%)!important}
[data-scheme="dark"] .video__play{
	background:linear-gradient(180deg,rgba(30,30,30,.55) 0%,rgba(10,10,10,.4) 100%)!important;
	border-color:rgba(255,255,255,.2)!important;
	color:#fff!important;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 22px -10px rgba(0,0,0,.8)!important;
}
[data-scheme="dark"] .video:hover .video__play{background:linear-gradient(180deg,rgba(40,40,40,.65) 0%,rgba(16,16,16,.5) 100%)!important}

/* Hero -> Articles gap matches Articles -> Library and Library -> Salawat (84px desktop, 68px phones). */
#articles{padding-top:calc(clamp(24px,4vw,40px) + 44px)!important}

/* === Features strip: compact, animates on hover only === */
.features{--amf-tint:color-mix(in srgb,var(--am-accent-soft) 55%,var(--am-surface));border-radius:20px}
[data-scheme="dark"] .features{--amf-tint:#1F2A26}
.feature{position:relative;gap:12px;padding:16px 18px;min-height:0;transition:background .25s ease}
.feature b{font-size:15.5px;line-height:1.3;margin-bottom:3px}
.feature span span{display:block;font-size:13px;line-height:1.45}
.feature::after{content:'';position:absolute;left:18px;right:18px;bottom:0;height:2px;border-radius:2px 2px 0 0;background:var(--am-accent-text);transform:scaleX(0);transform-origin:left;transition:transform .35s ease;pointer-events:none}
.feature__icon{position:relative;flex:none;width:42px;height:42px;border-radius:13px;color:var(--am-accent-text);transition:background .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease}
.feature__icon svg{display:block;width:20px;height:20px;transform-box:fill-box;transform-origin:50% 50%}
.feature__icon .icon-award{transform-origin:50% 15%}
.feature__icon .icon-pulse path{stroke-dasharray:36;stroke-dashoffset:0}
/* Live dot on the "Live and interactive" tile (static) */
.feature__icon:has(.icon-pulse)::before{content:'';position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background:#2FBF71;border:2px solid var(--am-surface);box-sizing:border-box}
/* Hover */
.feature:hover{background:var(--amf-tint)}
.feature:hover::after{transform:scaleX(1)}
.feature:hover .feature__icon{background:var(--am-accent);color:var(--am-accent-ink);transform:translateY(-2px);box-shadow:0 8px 18px -10px rgba(30,94,81,.6)}
.feature:hover .icon-calendar{animation:amf-wiggle .6s ease}
.feature:hover .icon-people{animation:amf-bob .6s ease}
.feature:hover .icon-award{animation:amf-swing .7s ease}
.feature:hover .icon-pulse path{animation:amf-draw .9s ease-out}
@keyframes amf-wiggle{0%,100%{transform:none}30%{transform:rotate(-12deg) scale(1.08)}60%{transform:rotate(9deg) scale(1.08)}85%{transform:rotate(-3deg)}}
@keyframes amf-bob{0%,100%{transform:none}35%{transform:translateY(-3px) scale(1.06)}65%{transform:none}85%{transform:translateY(-1.5px)}}
@keyframes amf-swing{0%,100%{transform:none}30%{transform:rotate(14deg)}60%{transform:rotate(-10deg)}85%{transform:rotate(4deg)}}
@keyframes amf-draw{from{stroke-dashoffset:36}to{stroke-dashoffset:0}}
@media (max-width:640px){.feature{padding:14px 16px}.feature::after{left:16px;right:16px}}
@media (prefers-reduced-motion:reduce){.feature:hover .feature__icon svg,.feature:hover .icon-pulse path{animation:none!important}.feature__icon,.feature::after{transition:none}}
/* === /Features strip === */

/* Video play button sits in the bottom-right corner of the thumbnail. */
.video__play{right:auto!important;top:auto!important;left:12px!important;bottom:12px!important;margin:0!important;width:48px!important;height:48px!important;transform-origin:0 100%}
.video__play .icon{width:18px;height:18px}
@media (max-width:640px){.video__play{left:10px!important;bottom:10px!important;width:42px!important;height:42px!important}}

/* === Courses tabs === */
#courses{padding-top:calc(clamp(24px,4vw,40px) + 44px)!important;scroll-margin-top:90px}
#courses + #articles{padding-top:calc(clamp(24px,4vw,40px) + 20px)!important}
.courses__intro{max-width:620px;margin:-14px 0 26px;color:var(--am-ink-2);font-size:16px;line-height:1.6}
.courses{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:16px;align-items:stretch}
.courses__tabs{display:flex;flex-direction:column;gap:10px}
.courses__tab{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;border:1px solid var(--am-line);border-radius:18px;background:var(--am-surface);color:var(--am-ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}
.courses__tab:hover{border-color:var(--am-line-2);transform:translateY(-1px)}
.courses__tab:focus-visible{outline:2px solid var(--am-accent-text);outline-offset:2px}
.courses__tab.is-on{border-color:transparent;background:var(--am-deep);color:#fff;box-shadow:0 18px 36px -24px rgba(9,31,26,.65);transform:none}
.courses__tab-icon{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:13px;background:var(--am-accent-soft);color:var(--am-accent-text);transition:background .2s,color .2s}
.courses__tab.is-on .courses__tab-icon{background:rgba(255,255,255,.14);color:#fff}
.courses__tab-text{flex:1;min-width:0}
.courses__tab-text b{display:block;font-family:var(--am-font-head);font-weight:600;font-size:16px;line-height:1.25}
.courses__tab-text span{display:block;margin-top:1px;font-size:13px;color:var(--am-ink-3)}
.courses__tab.is-on .courses__tab-text span{color:rgba(255,255,255,.72)}
.courses__tab-ar{flex:none;font-family:var(--am-font-arabic);font-size:20px;line-height:1;color:var(--am-accent-text);opacity:.75}
.courses__tab.is-on .courses__tab-ar{color:#9FD3B8;opacity:1}
.courses__panels{position:relative;min-height:100%;border:1px solid var(--am-line);border-radius:24px;background:var(--am-surface);overflow:hidden;box-shadow:0 18px 40px -30px rgba(9,31,26,.35)}
.courses__panel{position:relative;display:flex;flex-direction:column;height:100%;padding:30px 32px 26px}
.courses__panel[hidden]{display:none}
.courses__panel.is-in{animation:crs-in .4s cubic-bezier(.2,.7,.2,1)}
.courses__panel.is-in .courses__topics li{animation:crs-chip .35s cubic-bezier(.2,.7,.2,1) both}
.courses__topics li:nth-child(2){animation-delay:.04s!important}.courses__topics li:nth-child(3){animation-delay:.08s!important}.courses__topics li:nth-child(4){animation-delay:.12s!important}.courses__topics li:nth-child(5){animation-delay:.16s!important}.courses__topics li:nth-child(6){animation-delay:.2s!important}.courses__topics li:nth-child(n+7){animation-delay:.24s!important}
.courses__ar{position:absolute;right:28px;top:20px;font-family:var(--am-font-arabic);font-size:68px;line-height:1;color:var(--am-accent-text);opacity:.1;pointer-events:none}
.courses__kicker{margin:0 0 4px;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--am-accent-text)}
.courses__name{margin:0 0 12px;font-family:var(--am-font-head);font-weight:700;font-size:30px;line-height:1.15;letter-spacing:-.02em}
.courses__desc{max-width:560px;margin:0 0 24px;font-size:16px;line-height:1.65;color:var(--am-ink-2)}
.courses__label{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--am-ink-3)}
.courses__topics{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;padding:0;list-style:none}
.courses__topics li{margin:0;padding:7px 14px;border-radius:999px;background:var(--am-accent-soft);color:var(--am-accent-text);font-size:14px;font-weight:500;line-height:1.3}
.courses__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:18px;border-top:1px solid var(--am-line)}
.courses__meta{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--am-ink-3)}
.courses__meta .icon{color:var(--am-accent-text)}
a.course{text-decoration:none;color:inherit;cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .2s}
a.course:hover{border-color:var(--am-accent-text);transform:translateY(-1px)}
@keyframes crs-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes crs-chip{from{opacity:0;transform:translateY(4px) scale(.95)}to{opacity:1;transform:none}}
@media (max-width:860px){
.courses{grid-template-columns:1fr;gap:12px}
.courses__tabs{flex-direction:row;gap:4px;padding:4px;border-radius:999px;background:var(--am-surface-2);overflow-x:auto;scrollbar-width:none}
.courses__tabs::-webkit-scrollbar{display:none}
.courses__tab{flex:1;justify-content:center;gap:8px;padding:9px 12px;border:0;border-radius:999px;background:transparent;box-shadow:none}
.courses__tab:hover{transform:none}
.courses__tab.is-on{background:var(--am-accent);box-shadow:none}
.courses__tab-icon{width:auto;height:auto;background:none!important;border-radius:0}
.courses__tab-icon .icon{width:17px;height:17px}
.courses__tab-text{flex:none}
.courses__tab-text b{font-size:14px}
.courses__tab-text span,.courses__tab-ar{display:none}
.courses__panel{padding:22px 20px 20px}
.courses__name{font-size:24px}
.courses__ar{right:18px;top:16px;font-size:46px}
.courses__desc{font-size:15px}
.courses__foot .btn{width:100%;justify-content:center}
}
@media (max-width:380px){.courses__tab-icon{display:none}}
@media (prefers-reduced-motion:reduce){.courses__panel.is-in,.courses__panel.is-in .courses__topics li{animation:none!important}}
/* === /Courses tabs === */

/* Hero title on two lines on wide screens: "Structured courses in" / "core Islamic studies". */
@media (min-width:1101px){
.hero{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
.hero__copy{container-type:inline-size}
.hero__title{font-size:min(62px,9.6cqi)}
.hero__title em{display:block}
}

/* Courses: tabs stretch to the panel height so both columns line up. */
@media (min-width:861px){.courses__tabs{height:100%}.courses__tab{flex:1 1 0;min-height:0}}

/* Features: the live dot on "Live and interactive" keeps blinking. */
.feature__icon:has(.icon-pulse)::before{animation:amf-blink 1.6s ease-in-out infinite}
.feature__icon:has(.icon-pulse)::after{content:'';position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background:#2FBF71;animation:amf-ping 1.6s cubic-bezier(0,0,.2,1) infinite;pointer-events:none}
@keyframes amf-blink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes amf-ping{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.feature__icon:has(.icon-pulse)::before,.feature__icon:has(.icon-pulse)::after{animation:none}}

/* Footer privacy link next to the copyright line. */
.ftr__sep{display:none}
.ftr__privacy{display:block;width:fit-content;margin:6px auto 0;color:inherit;text-decoration:none;white-space:nowrap;opacity:.85}
.ftr__bottom>span:not(.social){display:flex!important;flex-direction:column;align-items:center;gap:0}
@media (min-width:641px){.ftr__bottom>span:not(.social){align-items:flex-start}.ftr__bottom .ftr__privacy{margin-left:0;margin-right:0}}
.ftr__privacy:hover{text-decoration:underline;text-underline-offset:3px}

/* Salawat counter: lighter type. */
.salawat-counter .sq-title{font-weight:600}
.salawat-counter .sq-eyebrow,.salawat-counter .sq-label,.salawat-counter .sq-hint,.salawat-counter .sq-k{font-weight:500}
.salawat-counter .sq-count{font-weight:500}
.salawat-counter .sq-total{font-weight:600}
.ftr__copy .ftr__privacy{margin-left:0;margin-right:0}
@media (max-width:640px){.ftr__copy .ftr__privacy{margin-left:auto;margin-right:auto}}

/* Footer: more room between the social icons and Donate when they wrap. */
.ftr .social{row-gap:18px!important}

/* Plain pages: title and breadcrumb line up with the centred text column. */
.page-single .page-head--narrow{margin-left:auto;margin-right:auto}
body:has(.page-single) .crumbs--page>ol{width:100%;max-width:784px;margin-left:auto;margin-right:auto;justify-content:flex-start}

/* reCAPTCHA: framed to match the form fields. Google's own border is cropped
   away, the box gets the field outline and rounded corners, and in dark mode
   it is colour-inverted so it sits on the dark card. */
.recaptcha-container .g-recaptcha{position:relative;width:302px!important;max-width:none!important;height:76px;overflow:hidden;border:1px solid rgba(30,94,81,.14);border-radius:14px;background:#F9F9F9;box-sizing:content-box}
.recaptcha-container .g-recaptcha iframe{display:block;margin:-1px 0 0 -1px}
[data-scheme="dark"] .recaptcha-container .g-recaptcha{border-color:rgba(255,255,255,.12);background:#222}
[data-scheme="dark"] .recaptcha-container .g-recaptcha iframe{filter:invert(.9) hue-rotate(180deg)}
@media (max-width:380px){.recaptcha-container .g-recaptcha{transform:scale(.92);transform-origin:left center}}

/* Courses on phones: the panel is only as tall as its content (no stretching). */
@media (max-width:860px){.courses{align-items:start}.courses__panels{min-height:0!important;height:auto!important}.courses__panel{height:auto!important}}

/* Books page: space between the latest-book card and the shelf below. */
.shelf--after-hero{margin-top:28px}

/* Read book / Read magazine: theme green with a light outline on the dark card. */
.mag-hero .mag-hero__open,.mag-hero a.mag-hero__open._3d-flip-book{background:#1E5E51!important;color:#FFFFFF!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.32),0 10px 22px -14px rgba(0,0,0,.6)}
.mag-hero .mag-hero__open:hover,.mag-hero a.mag-hero__open._3d-flip-book:hover{background:#25705F!important;color:#FFFFFF!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 12px 24px -14px rgba(0,0,0,.6)!important}

/* Home library: the newest book and the newest magazine are highlighted. */
#library .shelf__grid > .book:first-child .book__cover{box-shadow:0 0 0 3px var(--am-surface),0 0 0 5px var(--am-accent-text),0 16px 30px -18px rgba(9,31,26,.55)}
#library .shelf__grid > .book:first-child .book__cover::after{content:'Latest';position:absolute;inset:auto;top:8px;left:8px;width:auto;height:auto;z-index:2;padding:4px 10px;border-radius:999px;background:var(--am-accent);color:#fff;font:600 11px/1.2 var(--am-font-head);letter-spacing:.04em;box-shadow:0 4px 10px -4px rgba(0,0,0,.4);pointer-events:none}
#library .shelf__grid > .book:first-child .book__title{color:var(--am-accent-text)}

/* Phones: bigger H1 on every page. */
@media (max-width:640px){
main h1,main .page-title{font-size:38px!important;line-height:1.08!important}
main .hero__title{font-size:40px!important;line-height:1.04!important}
}
@media (max-width:380px){
main h1,main .page-title{font-size:34px!important}
main .hero__title{font-size:36px!important}
}

/* === Home articles: latest list + Instagram, random cards, browse button === */
.art-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:20px;align-items:stretch}
.art-top--wide{grid-template-columns:minmax(0,1fr)}
.art-list{display:flex;flex-direction:column;gap:16px;min-width:0}
.art-row{flex:1 1 0;min-height:160px;display:flex;align-items:stretch;overflow:hidden;border:1px solid var(--am-line);border-radius:22px;background:var(--am-surface);color:var(--am-ink);text-decoration:none;box-shadow:0 18px 40px -32px rgba(9,31,26,.35);transition:transform .2s,box-shadow .2s,border-color .2s}
.art-row:hover{transform:translateY(-3px);border-color:var(--am-line-2);box-shadow:0 24px 44px -28px rgba(9,31,26,.45)}
.art-row__thumb{position:relative;flex:0 0 40%;overflow:hidden;background:var(--am-cover) center/cover no-repeat}
.art-row__thumb .lattice{position:absolute;inset:0;width:100%;height:100%}
.art-row__emblem{position:absolute;left:14px;top:14px;width:34px;height:34px;padding:3px;border-radius:9px;background:#fff;object-fit:contain;box-shadow:0 4px 10px -4px rgba(0,0,0,.35)}
.art-row__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;padding:22px 24px}
.art-row__top{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.art-row__new{padding:4px 10px;border-radius:999px;background:var(--am-accent);color:#fff;font:600 11px/1.2 var(--am-font-head);letter-spacing:.04em}
.art-row__tag{padding:4px 10px;border-radius:999px;background:var(--am-accent-soft);color:var(--am-accent-text);font-size:12px;font-weight:600;line-height:1.2}
.art-row__title{font-family:var(--am-font-head);font-weight:700;font-size:22px;line-height:1.22;letter-spacing:-.02em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.art-row__excerpt{color:var(--am-ink-2);font-size:14.5px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.art-row__meta{margin-top:auto;font-size:13px;color:var(--am-ink-3)}
.art-ig{display:flex;flex-direction:column;gap:12px;min-width:0}
.art-ig .articles__ig{flex:none!important;width:100%!important;max-width:none!important;height:auto!important;min-height:48px;order:0!important}
.art-ig .ig-flyer{order:1!important;width:100%!important;max-width:none!important;align-self:stretch!important}
.art-rand{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:20px}
.art-rand__item[hidden]{display:none!important}
.art-rand__item>.card{height:100%}
.art-foot{display:flex;justify-content:center;margin-top:28px}
.art-foot .btn{min-width:260px;justify-content:center}
@media (max-width:1080px){.art-rand{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}.art-foot{margin-top:8px}}
@media (max-width:900px){.art-top{grid-template-columns:minmax(0,1fr)}.art-ig{width:100%;max-width:480px;margin:0 auto}.art-row{flex:none;min-height:0}}
@media (max-width:640px){.art-row{flex-direction:column}.art-row__thumb{flex:none;aspect-ratio:16/9}.art-row__body{padding:18px 20px}.art-row__title{font-size:19px}.art-rand{grid-template-columns:minmax(0,1fr)}.art-foot .btn{width:100%}}
/* === /Home articles === */

/* Articles: "All articles" link and the Instagram button sit in the heading row. */
#articles .sec-head{justify-content:space-between}
#articles .sec-head__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
#articles .sec-head__actions .articles__ig{flex:none!important;width:auto!important;max-width:none!important;height:46px!important;min-height:0;padding:0 20px;gap:8px;justify-content:center;order:0!important}
@media (max-width:640px){#articles .sec-head__actions{width:100%;justify-content:space-between}#articles .sec-head__actions .articles__ig{padding:0 16px}}

/* Articles on phones: flyer first, then the heading, latest list and random cards. */
@media (max-width:900px){
#articles{display:flex;flex-direction:column;gap:20px}
#articles .art-top{display:contents}
#articles .art-ig{order:-1;align-self:center}
#articles>.sec-head{order:0;margin-bottom:0;margin-top:calc(clamp(24px,4vw,40px) + 24px)}
#articles .art-list{order:1}
#articles .art-rand{order:2;margin-top:0}
}

/* Phones: Instagram button under the flyer; desktop keeps it in the heading row. */
.art-ig__follow{display:none!important}
@media (max-width:900px){
.art-ig .art-ig__follow{display:flex!important;order:2!important;flex:none!important;width:100%;height:48px!important;align-items:center;justify-content:center;gap:8px}
#articles .sec-head__actions .articles__ig{display:none!important}
}

/* Latest rows: text layout when there is no featured image, and no clipped titles. */
.art-row{position:relative;isolation:isolate}
.art-row__body{position:relative;z-index:1;justify-content:center;overflow:hidden}
.art-row__top{gap:8px}
.art-row__mark{width:32px;height:32px;flex:none;padding:3px;border-radius:9px;background:#fff;object-fit:contain;box-shadow:0 0 0 1px var(--am-line)}
.art-row__title{flex:none;font-size:23px;-webkit-line-clamp:2}
.art-row__excerpt{flex:none;-webkit-line-clamp:2}
.art-row__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-top:auto;padding-top:4px}
.art-row__foot .art-row__meta{margin-top:0}
.art-row__go{display:inline-flex;align-items:center;gap:6px;color:var(--am-accent-text);font:600 14px var(--am-font-head)}
.art-row__go .icon{transition:transform .2s}
.art-row:hover .art-row__go .icon{transform:translateX(3px)}
.art-row--text .art-row__body{padding:26px 30px}
.art-row__deco{position:absolute;inset:0 0 0 40%;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 70%);mask-image:linear-gradient(90deg,transparent,#000 70%)}
.art-row__deco .lattice{position:absolute;inset:0;width:100%;height:100%}
.art-row--text::before{content:'';position:absolute;left:0;top:22px;bottom:22px;width:4px;border-radius:0 4px 4px 0;background:var(--am-accent);z-index:1}
@media (max-width:640px){.art-row--text .art-row__body{padding:22px 22px 20px 24px}.art-row__title{font-size:20px;-webkit-line-clamp:3}.art-row__deco{inset:0 0 0 30%}}

/* Latest rows: green border on hover (inner ring, so nothing shifts). */
.art-row:hover,.art-row:focus-visible{border-color:var(--am-accent-text);box-shadow:inset 0 0 0 1px var(--am-accent-text),0 24px 44px -28px rgba(9,31,26,.45);outline:0}

/* Emblems: plain logo, no tile, mask or outline. */
.art-row__mark,.art-row__emblem,.card__emblem{padding:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;border:0!important;object-fit:contain!important;-webkit-mask:none!important;mask:none!important;clip-path:none!important}

/* Latest rows: logo in the top-right corner of the card. */
.art-row__body{position:static}
.art-row__mark{position:absolute;top:24px;right:26px;z-index:2;width:26px!important;height:26px!important}
.art-row__top{padding-right:40px}
@media (max-width:640px){.art-row__mark{top:20px;right:20px;width:24px!important;height:24px!important}.art-row__top{padding-right:36px}}

/* === Article carousel: 10 random articles in the latest-row card style === */
.art-car{position:relative;margin-top:20px}
.art-car__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 60px) / 4);gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:4px 2px 18px;margin:-4px -2px -18px}
.art-car__track::-webkit-scrollbar{display:none}
.art-car__item{scroll-snap-align:start;display:flex;min-width:0}
.art-tile{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:10px;width:100%;padding:22px 22px 20px 24px;overflow:hidden;border:1px solid var(--am-line);border-radius:22px;background:var(--am-surface);color:var(--am-ink);text-decoration:none;box-shadow:0 18px 40px -32px rgba(9,31,26,.35);transition:transform .2s,box-shadow .2s,border-color .2s}
.art-tile::before{content:'';position:absolute;left:0;top:20px;bottom:20px;width:4px;border-radius:0 4px 4px 0;background:var(--am-accent)}
.art-tile:hover,.art-tile:focus-visible{transform:translateY(-3px);border-color:var(--am-accent-text);box-shadow:inset 0 0 0 1px var(--am-accent-text),0 24px 44px -28px rgba(9,31,26,.45);outline:0}
.art-tile__mark{position:absolute;top:20px;right:20px;width:24px;height:24px;object-fit:contain}
.art-tile__top{display:flex;flex-wrap:wrap;gap:8px;padding-right:34px;min-height:22px}
.art-tile__title{font-family:var(--am-font-head);font-weight:700;font-size:18px;line-height:1.25;letter-spacing:-.015em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.art-tile__excerpt{color:var(--am-ink-2);font-size:14px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.art-tile__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin-top:auto;padding-top:6px}
.art-tile__meta{font-size:12.5px;color:var(--am-ink-3)}
.art-tile .art-row__go{font-size:13.5px}
.art-tile:hover .art-row__go .icon{transform:translateX(3px)}
.art-car__btn{position:absolute;top:50%;z-index:3;display:grid;place-items:center;width:44px;height:44px;margin-top:-30px;border:1px solid var(--am-line);border-radius:50%;background:var(--am-surface);color:var(--am-ink);box-shadow:0 10px 24px -12px rgba(9,31,26,.45);cursor:pointer;transition:opacity .2s,transform .2s,background .2s,color .2s}
.art-car__btn:hover{background:var(--am-accent);color:#fff;border-color:var(--am-accent)}
.art-car__btn:disabled{opacity:0;pointer-events:none}
.art-car__btn--prev{left:-22px}
.art-car__btn--next{right:-22px}
.art-car.is-static .art-car__btn{display:none}
@media (max-width:1080px){.art-car{margin-top:0}.art-car__track{grid-auto-columns:calc((100% - 20px) / 2.25)}.art-car__btn--prev{left:-10px}.art-car__btn--next{right:-10px}}
@media (max-width:900px){#articles .art-car{order:2}}
@media (max-width:640px){.art-car__track{grid-auto-columns:82%;gap:14px}.art-car__btn{display:none}}
@media (prefers-reduced-motion:reduce){.art-car__track{scroll-behavior:auto}}
/* === /Article carousel === */

/* Carousel: infinite loop, arrows always on. */
.art-car__btn:disabled{opacity:1;pointer-events:auto}
/* Articles heading: "All articles" sits right after the title. */
.sec-head__titlerow{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px}
.sec-head__titlerow .sec-title{margin-bottom:0}
@media (max-width:900px){#articles .sec-head__actions{display:none}}

/* Carousel heading and softer card shadows (room so they are not clipped). */
.art-car__title{margin:44px 0 16px;font-family:var(--am-font-head);font-weight:600;font-size:22px;letter-spacing:-.01em;color:var(--am-ink)}
.art-car{margin-top:0}
.art-car__track{padding:8px 4px 34px!important;margin:-8px -4px -34px!important}
.art-tile{box-shadow:0 1px 2px rgba(9,31,26,.04),0 12px 26px -16px rgba(9,31,26,.26)}
.art-tile:hover,.art-tile:focus-visible{box-shadow:inset 0 0 0 1px var(--am-accent-text),0 2px 4px rgba(9,31,26,.05),0 18px 34px -16px rgba(9,31,26,.34)}
[data-scheme="dark"] .art-tile{box-shadow:0 12px 26px -16px rgba(0,0,0,.7)}
.art-car__btn{margin-top:-17px}
@media (max-width:1080px){.art-car__title{margin-top:24px}}
@media (max-width:900px){#articles .art-car__title{order:2;margin:28px 0 -4px}#articles .art-car{order:3}}
@media (max-width:640px){.art-car__title{font-size:20px}}

/* Topic pills: one line, trimmed with an ellipsis if too long. */
.art-tile__top,.art-row__top{flex-wrap:nowrap;min-width:0}
.art-row__tag{display:block;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:4px 10px}
.art-tile__top .art-row__tag{font-size:11.5px}

/* Instagram flyer: same green hover border and lift as the article cards. */
.art-ig .ig-flyer{position:relative;transition:transform .2s,box-shadow .2s}
.art-ig .ig-flyer::after{content:'';position:absolute;inset:0;z-index:5;border-radius:inherit;box-shadow:inset 0 0 0 2px transparent;pointer-events:none;transition:box-shadow .2s}
.art-ig .ig-flyer:hover,.art-ig .ig-flyer:focus-within{transform:translateY(-3px);box-shadow:0 24px 44px -28px rgba(9,31,26,.45)}
.art-ig .ig-flyer:hover::after,.art-ig .ig-flyer:focus-within::after{box-shadow:inset 0 0 0 2px var(--am-accent-text)}
@media (prefers-reduced-motion:reduce){.art-ig .ig-flyer:hover,.art-ig .ig-flyer:focus-within{transform:none}}

/* Carousel head: title left, "All articles" right. */
.art-car__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;margin:44px 0 16px}
.art-car__head .art-car__title{margin:0!important;order:0!important}
@media (max-width:1080px){.art-car__head{margin-top:24px}}
@media (max-width:900px){#articles .art-car__head{order:2;margin:28px 0 -4px}}

/* Instagram flyer: up to 550px wide when it stacks (tablets and phones). */
@media (max-width:900px){#articles .art-ig{width:100%!important;max-width:550px!important;margin-left:auto;margin-right:auto}}

/* Desktop: Instagram flyer column up to 420px; the latest list takes the rest. */
@media (min-width:901px){.art-top{grid-template-columns:minmax(0,1fr) minmax(300px,420px)}}

/* Phones: carousel runs to the screen edge; first card lines up with the text. */
@media (max-width:640px){
.art-car__track{margin-left:-16px!important;margin-right:-16px!important;padding-left:16px!important;padding-right:16px!important;scroll-padding-left:16px;scroll-padding-right:16px;grid-auto-columns:80%}
}

/* Instagram flyer: transparent hover overlay (no dark panel, caption or icons); still clickable. */
.ig-flyer #sb_instagram .sbi_link,.ig-flyer #sb_instagram .sbi_photo_wrap:hover .sbi_link{background:transparent!important;background-color:transparent!important}
.ig-flyer #sb_instagram .sbi_link .sbi_hover_top,.ig-flyer #sb_instagram .sbi_link .sbi_hover_bottom{opacity:0!important;visibility:hidden!important}

/* Desktop carousel: room for the card shadows at the sides, faded softly at the edges. */
@media (min-width:641px){
.art-car__track{padding:8px 28px 40px!important;margin:-8px -28px -40px!important;scroll-padding-left:28px;scroll-padding-right:28px;-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 9px,#000 28px,#000 calc(100% - 28px),transparent calc(100% - 9px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,transparent 9px,#000 28px,#000 calc(100% - 28px),transparent calc(100% - 9px),transparent 100%)}
}

/* Latest rows: fill the card (longer excerpt, slightly larger title, even spacing). */
@media (min-width:901px){
.art-row--text .art-row__body{gap:14px;padding:28px 32px 26px;justify-content:flex-start}
.art-row__title{font-size:25px;line-height:1.2}
.art-row__excerpt{font-size:15.5px;line-height:1.65;-webkit-line-clamp:4}
}
@media (max-width:900px){.art-row__excerpt{-webkit-line-clamp:3}}

/* Latest rows: body never spills; footer keeps its padding. */
.art-row__body{min-height:0;overflow:hidden}
.art-row__foot{flex:none}

/* Latest rows: title scales on narrower desktops so the excerpt keeps room. */
@media (min-width:901px){.art-row__title{font-size:clamp(19px,calc(1.15vw + 9px),25px)}.art-row--text .art-row__body{padding:clamp(20px,2vw,28px) clamp(22px,2.2vw,32px) clamp(18px,1.8vw,26px)}}

/* Hadith quote: smaller text. */
.hadith__text{font-size:20px!important;line-height:1.6!important}
@media (max-width:640px){.hadith__text{font-size:17px!important}}

/* Desktop hero: fits one screen (with the features strip), same width. */
@media (min-width:1101px) and (min-height:560px){
.hero{min-height:var(--hero-fit,auto);height:auto;box-sizing:border-box;align-items:center;align-content:center;padding-top:clamp(22px,3.2vh,50px);padding-bottom:clamp(22px,3.2vh,56px);row-gap:0}
.hero__title{font-size:min(62px,9.6cqi,6.6vh)}
.hero__copy>*:not(.hero__title){margin-top:0}
.hero__arabic,.hero .chip,.hero__chip{margin-bottom:clamp(8px,1.6vh,18px)}
.hero__title{margin-bottom:clamp(10px,1.9vh,22px)}
.hero__courses{margin-bottom:clamp(12px,2.4vh,28px)}
.hero__text{margin-bottom:clamp(8px,1.6vh,18px)}
.hero__note{margin-bottom:clamp(14px,2.8vh,32px)}
.hadith{padding:clamp(22px,3.6vh,40px) clamp(26px,3.4vh,44px)!important}
.hadith__text{font-size:clamp(16px,2.25vh,20px)!important;margin-bottom:clamp(12px,2vh,22px)!important}
.hero__side{gap:clamp(14px,2.6vh,28px)}
.videos{width:min(100%,calc(var(--hero-fit,900px) * .82));margin-left:auto}
}

/* Shorter desktop screens (laptops): tighter hero so it and the features strip fit. */
@media (min-width:1101px) and (min-height:560px) and (max-height:780px){
.hero{padding-top:16px;padding-bottom:16px}
.hero__arabic{font-size:22px;line-height:1.4;margin-bottom:8px!important}
.hero .chip{margin-bottom:10px!important}
.hero__title{font-size:min(62px,9.6cqi,6.3vh);margin-bottom:12px!important}
.hero__courses{margin-bottom:12px!important}
.hero__courses a,.hero__courses>*{padding-top:6px;padding-bottom:6px}
.hero__text{font-size:16px;line-height:1.55;margin-bottom:8px!important}
.hero__note{font-size:13px;margin-bottom:14px!important}
.hero__actions .btn,.hero__actions a{padding-top:12px;padding-bottom:12px}
}

/* ===== Hero showcase: panel, pattern, glow, docked features, entrance ===== */
.hero{position:relative;isolation:isolate;--hero-dock:0px;margin-top:10px}
.hero::before,.hero::after{content:"";position:absolute;inset:0 12px;border-radius:36px;pointer-events:none}
.hero::before{z-index:-2;background:radial-gradient(55% 75% at 82% 38%,rgba(30,94,81,.14),transparent 70%),linear-gradient(165deg,#E3EEE7 0%,#D6E6DC 100%);border:1px solid rgba(30,94,81,.13);box-shadow:0 34px 70px -48px rgba(9,31,26,.5),inset 0 1px 0 rgba(255,255,255,.8)}
.hero::after{z-index:-1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%231E5E51'%3E%3Cpath d='M36 2 70 36 36 70 2 36Z'/%3E%3Cpath d='M36 16 56 36 36 56 16 36Z'/%3E%3C/g%3E%3C/svg%3E");background-size:46px 46px;opacity:.13;-webkit-mask-image:linear-gradient(100deg,transparent 28%,#000 78%);mask-image:linear-gradient(100deg,transparent 28%,#000 78%)}
[data-scheme="dark"] .hero::before{background:radial-gradient(55% 75% at 82% 38%,rgba(76,197,147,.13),transparent 70%),linear-gradient(165deg,#17271F 0%,#0E1813 100%);border-color:rgba(159,211,184,.15);box-shadow:0 40px 80px -46px rgba(0,0,0,.95),inset 0 1px 0 rgba(159,211,184,.08)}
[data-scheme="dark"] .hero::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23c7ffe2'%3E%3Cpath d='M36 2 70 36 36 70 2 36Z'/%3E%3Cpath d='M36 16 56 36 36 56 16 36Z'/%3E%3C/g%3E%3C/svg%3E");opacity:.08}
.hero__side{position:relative}
.hero__side::before{content:"";position:absolute;left:-4%;right:-4%;top:-6%;height:80%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(30,94,81,.3),transparent);filter:blur(30px);pointer-events:none}
[data-scheme="dark"] .hero__side::before{background:radial-gradient(closest-side,rgba(76,197,147,.34),transparent)}
[data-scheme="dark"] .hero__title em{color:#BDEBD2}
[data-scheme="dark"] .hadith{--hd-border:rgba(199,255,226,.3)}
[data-scheme="dark"] .hadith__eyebrow{color:#E4E8A8}
@media (max-width:1100px){.hero{padding-left:36px;padding-right:36px;padding-top:30px;padding-bottom:32px}}
@media (max-width:640px){.hero::before,.hero::after{inset:0 8px;border-radius:26px}.hero{padding:24px 26px 28px}}
@media (min-width:1101px){
.hero{padding-left:44px;padding-right:44px;--hero-dock:46px;padding-bottom:calc(36px + var(--hero-dock))}
section.container:has(>.features){position:relative;z-index:2;margin-top:-46px}
.features{box-shadow:0 22px 44px -26px rgba(9,31,26,.42)}
[data-scheme="dark"] .features{box-shadow:0 26px 50px -24px rgba(0,0,0,.9)}
}
@media (min-width:1101px) and (min-height:560px){.hero{padding-bottom:calc(clamp(22px,3.2vh,56px) + var(--hero-dock))}}
@media (min-width:1101px) and (min-height:560px) and (max-height:780px){.hero{padding-bottom:calc(16px + var(--hero-dock))}}
@keyframes amHeroRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
.hero-pre .hero__copy>*,.hero-pre .hero__side{opacity:0}
.hero-in .hero__copy>*,.hero-in .hero__side{animation:amHeroRise .7s cubic-bezier(.2,.7,.2,1) both}
.hero-in .hero__copy>*:nth-child(2){animation-delay:.06s}
.hero-in .hero__copy>*:nth-child(3){animation-delay:.12s}
.hero-in .hero__copy>*:nth-child(4){animation-delay:.18s}
.hero-in .hero__copy>*:nth-child(5){animation-delay:.24s}
.hero-in .hero__copy>*:nth-child(6){animation-delay:.3s}
.hero-in .hero__copy>*:nth-child(7){animation-delay:.36s}
.hero-in .hero__side{animation-delay:.2s;animation-duration:.9s}
}

/* Hero panel matches the header bar width; welcome chip reads clearly on the panel. */
.hero{max-width:1240px;width:calc(100% - 48px);margin-left:auto;margin-right:auto;box-sizing:border-box}
.hero::before,.hero::after{inset:0}
@media (min-width:1101px){
.hero{padding-left:40px;padding-right:40px}
section.container:has(>.features){max-width:1240px;width:calc(100% - 48px);box-sizing:border-box;padding-left:20px;padding-right:20px}
}
@media (max-width:640px){.hero{width:calc(100% - 24px);padding-left:20px;padding-right:20px}.hero::before,.hero::after{inset:0}}
.hero .chip{background:rgba(255,255,255,.78);border:1px solid rgba(30,94,81,.16);box-shadow:0 8px 18px -12px rgba(9,31,26,.4),inset 0 1px 0 #fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#1E5E51}
.hero .chip .chip__dot{box-shadow:0 0 0 3px rgba(30,94,81,.14)}
[data-scheme="dark"] .hero .chip{background:rgba(159,211,184,.1);border-color:rgba(159,211,184,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);color:#CFE9DC}
[data-scheme="dark"] .hero .chip .chip__dot{box-shadow:0 0 0 3px rgba(159,211,184,.16)}
@media (max-width:1100px){section.container:has(>.features){margin-top:16px}}

/* Hero docks under the header: the header bar overlaps the panel's top edge by half. */
.hero{--hero-top-dock:33px;margin-top:calc(-1 * var(--hero-top-dock))}
@media (min-width:1101px){.hero{padding-top:calc(30px + var(--hero-top-dock))}}
@media (min-width:1101px) and (min-height:560px){.hero{padding-top:calc(clamp(22px,3.2vh,50px) + var(--hero-top-dock))}}
@media (min-width:1101px) and (min-height:560px) and (max-height:780px){.hero{padding-top:calc(16px + var(--hero-top-dock))}}
@media (max-width:1100px){.hero{padding-top:calc(30px + var(--hero-top-dock))}}
@media (max-width:640px){.hero{--hero-top-dock:29px;padding-top:calc(22px + var(--hero-top-dock))}}
.hdr__bar{box-shadow:0 14px 34px -22px rgba(9,31,26,.45)}
[data-scheme="dark"] .hdr__bar{box-shadow:0 16px 38px -20px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08)!important}

/* Light mode: hadith card is a frosted light card that sits in the mint hero panel. */
html:not([data-scheme="dark"]) .hero .hadith{--hd-1:rgba(255,255,255,.9);--hd-2:rgba(236,245,240,.8);--hd-glow:rgba(30,94,81,.1);--hd-border:rgba(30,94,81,.17);--hd-shadow:0 30px 60px -36px rgba(9,31,26,.38),0 1px 2px rgba(9,31,26,.06),inset 0 1px 0 #fff;--hd-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%231E5E51' stroke-opacity='.16'%3E%3Cpath d='M36 2 70 36 36 70 2 36Z'/%3E%3Cpath d='M36 16 56 36 36 56 16 36Z'/%3E%3C/g%3E%3C/svg%3E");color:#17483D;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html:not([data-scheme="dark"]) .hero .hadith__eyebrow{color:#6E7536!important}
html:not([data-scheme="dark"]) .hero .hadith__text{color:#0E2622!important}
html:not([data-scheme="dark"]) .hero .hadith__cite{color:#5A6B64!important}
html:not([data-scheme="dark"]) .hero__side::before{background:radial-gradient(closest-side,rgba(30,94,81,.16),transparent)}

/* Hero panel narrower than section content; features dock pulled further in. */
@media (min-width:641px){.hero{max-width:1120px;width:calc(100% - 96px)}}
@media (max-width:640px){.hero{width:calc(100% - 40px)}}
@media (min-width:1101px){
.hero{padding-left:36px;padding-right:36px}
section.container:has(>.features){max-width:1120px;width:calc(100% - 96px);padding-left:56px;padding-right:56px}
}
@media (min-width:1101px){
.features{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.features .feature{padding:14px 14px;gap:10px;min-width:0}
.features .feature__icon{width:38px;height:38px;flex:0 0 38px}
.features .feature b{font-size:15px}
.features .feature b+span{font-size:12.5px;line-height:1.4}
}

/* Hero panel: header width, a little wider than the header on wide screens. */
@media (min-width:641px){.hero{max-width:1240px;width:calc(100% - 48px)}}
@media (max-width:640px){.hero{width:calc(100% - 24px)}}
@media (min-width:1101px){
.hero{padding-left:44px;padding-right:44px}
section.container:has(>.features){max-width:1240px;width:calc(100% - 48px)}
}
@media (min-width:1400px){
.hero,section.container:has(>.features){max-width:1320px}
.hero{padding-left:56px;padding-right:56px}
section.container:has(>.features){padding-left:64px;padding-right:64px}
}

/* Arabic greeting in the accent green. */
.hero__arabic{color:var(--am-accent-text)!important}
/* Former olive text now uses the accent green. */
.hero__arabic,.read__hamd,.hadith__eyebrow,html:not([data-scheme="dark"]) .hero .hadith__eyebrow,[data-scheme="dark"] .hadith__eyebrow{color:var(--am-accent-text)!important}
/* Tighter gap between hero text and hadith side. */
@media (min-width:1101px){.hero{column-gap:clamp(20px,2.2vw,36px)!important}}

/* ===== Course tab + Salawat card match the hero panel (light and dark) ===== */
html:not([data-scheme="dark"]) .courses__tab.is-on{background:radial-gradient(70% 90% at 90% 20%,rgba(30,94,81,.12),transparent 70%),linear-gradient(165deg,#E3EEE7 0%,#D6E6DC 100%)!important;color:#0E2622!important;border-color:rgba(30,94,81,.26)!important;box-shadow:0 18px 36px -24px rgba(9,31,26,.38),inset 0 1px 0 rgba(255,255,255,.8)!important}
html:not([data-scheme="dark"]) .courses__tab.is-on .courses__tab-icon{background:rgba(30,94,81,.12)!important;color:#1E5E51!important}
html:not([data-scheme="dark"]) .courses__tab.is-on .courses__tab-text b{color:#0E2622!important}
html:not([data-scheme="dark"]) .courses__tab.is-on .courses__tab-text span{color:#5A6B64!important}
html:not([data-scheme="dark"]) .courses__tab.is-on .courses__tab-ar{color:#1E5E51!important}
[data-scheme="dark"] .courses__tab.is-on{background:radial-gradient(70% 90% at 90% 20%,rgba(76,197,147,.13),transparent 70%),linear-gradient(165deg,#17271F 0%,#0E1813 100%)!important;color:#fff!important;border-color:rgba(159,211,184,.22)!important;box-shadow:0 22px 44px -26px rgba(0,0,0,.9),inset 0 1px 0 rgba(159,211,184,.08)!important}
[data-scheme="dark"] .courses__tab.is-on .courses__tab-icon{background:rgba(159,211,184,.12)!important;color:#CFE9DC!important}
[data-scheme="dark"] .courses__tab.is-on .courses__tab-ar{color:#9FD3B8!important}

html:not([data-scheme="dark"]) .salawat-counter .sq-card{background:radial-gradient(55% 75% at 82% 20%,rgba(30,94,81,.14),transparent 70%),linear-gradient(165deg,#E3EEE7 0%,#D6E6DC 100%)!important;border-color:rgba(30,94,81,.13)!important;box-shadow:0 34px 70px -48px rgba(9,31,26,.5),inset 0 1px 0 rgba(255,255,255,.8)!important;color:#0E2622!important}
html:not([data-scheme="dark"]) .salawat-counter .sq-card::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%231E5E51'%3E%3Cpath d='M36 2 70 36 36 70 2 36Z'/%3E%3Cpath d='M36 16 56 36 36 56 16 36Z'/%3E%3C/g%3E%3C/svg%3E")!important;opacity:.13!important}
html:not([data-scheme="dark"]) .salawat-counter .sq-eyebrow{color:#1E5E51!important;background:rgba(30,94,81,.1)!important}
html:not([data-scheme="dark"]) .salawat-counter .sq-title,html:not([data-scheme="dark"]) .salawat-counter .sq-count,html:not([data-scheme="dark"]) .salawat-counter .sq-total,html:not([data-scheme="dark"]) .salawat-counter .sq-dhikr{color:#0E2622!important}
html:not([data-scheme="dark"]) .salawat-counter .sq-honorific{color:#40524B!important}
html:not([data-scheme="dark"]) .salawat-counter .sq-label,html:not([data-scheme="dark"]) .salawat-counter .sq-k,html:not([data-scheme="dark"]) .salawat-counter .sq-hint{color:#1E5E51!important}
html:not([data-scheme="dark"]) .salawat-counter .sq-faraj{color:#8C6A12!important}
html:not([data-scheme="dark"]) .salawat-counter .sq-dhikr-btn{background:linear-gradient(168deg,rgba(255,255,255,.92),rgba(236,245,240,.8))!important;border-color:rgba(30,94,81,.17)!important;color:#0E2622!important;box-shadow:0 20px 40px -28px rgba(9,31,26,.38),inset 0 1px 0 #fff!important}
html:not([data-scheme="dark"]) .salawat-counter .sq-dhikr-btn:hover{border-color:rgba(30,94,81,.32)!important}
html:not([data-scheme="dark"]) .salawat-counter .sq-bar{background:rgba(30,94,81,.12)!important}
html:not([data-scheme="dark"]) .salawat-counter .sq-fill{background:linear-gradient(90deg,#1E5E51,#4E9E84)!important;box-shadow:0 0 14px rgba(30,94,81,.25)!important}
html:not([data-scheme="dark"]) .salawat-counter .sq-goalrow,html:not([data-scheme="dark"]) .salawat-counter .sq-goalrow *,html:not([data-scheme="dark"]) .salawat-counter .sq-resetline,html:not([data-scheme="dark"]) .salawat-counter .sq-sync,html:not([data-scheme="dark"]) .salawat-counter .sq-note{color:#5A6B64!important}
html:not([data-scheme="dark"]) .salawat-counter .sq-community{border-color:rgba(30,94,81,.14)!important}
html:not([data-scheme="dark"]) .salawat-counter .sq-share{color:#1E5E51!important;border-color:rgba(30,94,81,.26)!important;background:rgba(255,255,255,.6)!important}
html:not([data-scheme="dark"]) .salawat-counter .sq-share:hover{background:#fff!important}
html:not([data-scheme="dark"]) .salawat-counter{--sq-focus:#1E5E51}

[data-scheme="dark"] .salawat-counter .sq-card{background:radial-gradient(55% 75% at 82% 20%,rgba(76,197,147,.13),transparent 70%),linear-gradient(165deg,#17271F 0%,#0E1813 100%)!important;border-color:rgba(159,211,184,.15)!important;box-shadow:0 40px 80px -46px rgba(0,0,0,.95),inset 0 1px 0 rgba(159,211,184,.08)!important}
[data-scheme="dark"] .salawat-counter .sq-card::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23c7ffe2'%3E%3Cpath d='M36 2 70 36 36 70 2 36Z'/%3E%3Cpath d='M36 16 56 36 36 56 16 36Z'/%3E%3C/g%3E%3C/svg%3E")!important;opacity:.08!important}
/* Roomier features strip on desktop. */
@media (min-width:1101px){
.features .feature{padding:20px 26px!important;gap:14px!important}
.features .feature__icon{width:44px!important;height:44px!important;flex:0 0 44px!important}
.features .feature b{font-size:16px!important}
.features .feature b+span{font-size:13.5px!important;line-height:1.45!important}
}
@media (min-width:1101px) and (max-width:1300px){.features .feature{padding:18px 18px!important;gap:12px!important}}
/* Article column starts in line with the breadcrumbs. */
.read__col{margin-left:0!important}
/* Wider article sidebar so the Salawat card fits comfortably. */
@media (min-width:901px){.read__article{flex-basis:560px}.read__aside{flex:1 1 330px}}
@media (min-width:1300px){.read{gap:56px!important}.read__aside{flex:0 1 330px;max-width:330px}}

/* ===== Latest book / magazine card matches the hero panel ===== */
html:not([data-scheme="dark"]) .mag-hero{background:radial-gradient(55% 75% at 82% 30%,rgba(30,94,81,.14),transparent 70%),linear-gradient(165deg,#E3EEE7 0%,#D6E6DC 100%)!important;border-color:rgba(30,94,81,.13)!important;box-shadow:0 34px 70px -48px rgba(9,31,26,.5),inset 0 1px 0 rgba(255,255,255,.8)!important;color:#0E2622!important;--hd-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%231E5E51'%3E%3Cpath d='M36 2 70 36 36 70 2 36Z'/%3E%3Cpath d='M36 16 56 36 36 56 16 36Z'/%3E%3C/g%3E%3C/svg%3E")}
html:not([data-scheme="dark"]) .mag-hero::before{opacity:.13}
html:not([data-scheme="dark"]) .mag-hero__pill{color:#1E5E51!important;background:rgba(30,94,81,.1)!important}
html:not([data-scheme="dark"]) .mag-hero__title{color:#0E2622!important}
html:not([data-scheme="dark"]) .mag-hero__meta{color:#5A6B64!important}
html:not([data-scheme="dark"]) .mag-hero__cover{background:#E1E9E4!important;box-shadow:0 24px 44px -24px rgba(9,31,26,.45)!important}
html:not([data-scheme="dark"]) .mag-hero .btn--ghost-light{color:#1E5E51!important;border-color:rgba(30,94,81,.28)!important;background:rgba(255,255,255,.6)!important}
html:not([data-scheme="dark"]) .mag-hero .btn--ghost-light:hover{background:#fff!important;border-color:rgba(30,94,81,.42)!important}
[data-scheme="dark"] .mag-hero{background:radial-gradient(55% 75% at 82% 30%,rgba(76,197,147,.13),transparent 70%),linear-gradient(165deg,#17271F 0%,#0E1813 100%)!important;border-color:rgba(159,211,184,.15)!important;box-shadow:0 40px 80px -46px rgba(0,0,0,.95),inset 0 1px 0 rgba(159,211,184,.08)!important;--hd-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23c7ffe2'%3E%3Cpath d='M36 2 70 36 36 70 2 36Z'/%3E%3Cpath d='M36 16 56 36 36 56 16 36Z'/%3E%3C/g%3E%3C/svg%3E")}
[data-scheme="dark"] .mag-hero::before{opacity:.08}
[data-scheme="dark"] .mag-hero__pill{color:#CFE9DC!important;background:rgba(159,211,184,.12)!important}
[data-scheme="dark"] .mag-hero__meta{color:#9FB8AE!important}
/* Article column fills its area so the gap to the sidebar stays at the normal 56px. */
@media (min-width:901px){.read__col{max-width:none!important}}
/* Salawat "wa ajjil farajahum" in the accent green. */
.salawat-counter .sq-faraj,html:not([data-scheme="dark"]) .salawat-counter .sq-faraj{color:var(--am-accent-text)!important}
/* Wide Salawat card: more compact. */
@media (min-width:700px){
.salawat-counter:not(.sq-compact) .sq-card{padding:20px 30px 18px!important;column-gap:36px!important}
.salawat-counter:not(.sq-compact) .sq-personal{margin:6px 0 4px!important}
.salawat-counter:not(.sq-compact) .sq-count{font-size:54px!important;line-height:1!important}
.salawat-counter:not(.sq-compact) .sq-dhikr-btn{padding:14px 20px 12px!important}
.salawat-counter:not(.sq-compact) .sq-dhikr{font-size:22px!important;line-height:1.6!important}
.salawat-counter:not(.sq-compact) .sq-hint{margin-top:4px!important}
.salawat-counter:not(.sq-compact) .sq-bar{margin:6px 0 5px!important}
.salawat-counter:not(.sq-compact) .sq-total{font-size:24px!important}
.salawat-counter:not(.sq-compact) .sq-share{height:38px!important}
}
/* Course tabs on phones/tablets: clean segmented control. */
@media (max-width:860px){
.courses__tabs{padding:5px!important;gap:4px!important;background:#E1ECE5!important;border:1px solid rgba(30,94,81,.12)!important;box-shadow:inset 0 1px 2px rgba(9,31,26,.06)}
.courses__tab{padding:11px 10px!important;gap:7px!important;color:#40524B!important;transition:background-color .2s,color .2s}
.courses__tab .courses__tab-icon{background:none!important;color:#5A6B64!important}
.courses__tab .courses__tab-text b{color:inherit!important;font-weight:600}
html:not([data-scheme="dark"]) .courses__tab.is-on,[data-scheme="dark"] .courses__tab.is-on{background:#1E5E51!important;color:#fff!important;border:0!important;box-shadow:0 6px 14px -8px rgba(9,31,26,.55)!important}
.courses__tab.is-on .courses__tab-icon{background:none!important;color:#fff!important}
.courses__tab.is-on .courses__tab-text b{color:#fff!important}
[data-scheme="dark"] .courses__tabs{background:rgba(255,255,255,.05)!important;border-color:rgba(159,211,184,.14)!important;box-shadow:none}
[data-scheme="dark"] .courses__tab{color:#C9C9C9!important}
[data-scheme="dark"] .courses__tab .courses__tab-icon{color:#9FD3B8!important}
[data-scheme="dark"] .courses__tab.is-on{background:#2A7A68!important;box-shadow:0 6px 16px -8px rgba(0,0,0,.8)!important}
}
@media (max-width:860px){
html:not([data-scheme="dark"]) .courses__tab.is-on .courses__tab-icon,[data-scheme="dark"] .courses__tab.is-on .courses__tab-icon{background:none!important;color:#fff!important}
html:not([data-scheme="dark"]) .courses__tab.is-on .courses__tab-text b,[data-scheme="dark"] .courses__tab.is-on .courses__tab-text b{color:#fff!important}
}
/* Home library shelves: more compact. */
@media (min-width:901px){
.library-row .shelf{padding:22px 24px 20px!important}
.library-row .shelf .shelf__head{margin-bottom:16px!important}
.library-row .shelf .shelf__head h2,.library-row .shelf .shelf__head h3{font-size:24px!important}
.library-row .shelf .shelf__grid{gap:16px 14px!important}
.library-row .shelf .book{gap:7px!important}
.library-row .shelf .book__title{font-size:13.5px!important;line-height:1.3!important}
.library-row .shelf .book__meta{font-size:11.5px!important;margin-top:-2px}
}
.library-row{gap:16px!important}
/* More space between book cover and title. */
.book__cover{margin-bottom:8px!important}
/* Register form: training background is a short multi-line box. */
#nf-field-44{height:auto!important;min-height:100px!important;resize:vertical}

/* ===== Wide Salawat card: new layout (title + shared total left, dhikr plate right) ===== */
@media (min-width:700px){
.salawat-counter:not(.sq-compact) .sq-card{grid-template-columns:minmax(0,1.05fr) minmax(0,.5fr) minmax(0,.5fr)!important;grid-template-rows:auto 1fr auto!important;grid-template-areas:"head plate plate" "community plate plate" "note mine share"!important;column-gap:0!important;row-gap:0!important;padding:30px 36px 26px!important;align-items:start}
.salawat-counter:not(.sq-compact) .sq-head,.salawat-counter:not(.sq-compact) .sq-community,.salawat-counter:not(.sq-compact) .sq-note{padding-right:48px}
.salawat-counter:not(.sq-compact) .sq-badge{display:none!important}
.salawat-counter:not(.sq-compact) .sq-head{grid-area:head;display:block!important}
.salawat-counter:not(.sq-compact) .sq-eyebrow{background:none!important;padding:0!important;margin:0 0 10px!important;font-size:11px!important;letter-spacing:.16em!important;font-weight:700!important}
.salawat-counter:not(.sq-compact) .sq-title{font-size:clamp(26px,2.3vw,32px)!important;line-height:1.15!important;font-weight:700!important;margin:0!important}
.salawat-counter:not(.sq-compact) .sq-title-break{display:none}
.salawat-counter:not(.sq-compact) .sq-honorific{font-family:var(--am-font-serif);font-style:italic;font-weight:400;font-size:.72em;color:var(--am-accent-text)!important}
.salawat-counter:not(.sq-compact) .sq-community{grid-area:community;align-self:end;border:0!important;padding-top:0!important;margin:22px 0 0!important}
.salawat-counter:not(.sq-compact) .sq-row{display:flex!important;flex-direction:row-reverse;justify-content:flex-end;align-items:baseline;gap:12px}
.salawat-counter:not(.sq-compact) .sq-total{font-size:52px!important;line-height:1!important;font-weight:700!important;letter-spacing:-.02em}
.salawat-counter:not(.sq-compact) .sq-k{text-transform:none!important;letter-spacing:0!important;font-size:14px!important;font-weight:500!important}
.salawat-counter:not(.sq-compact) .sq-bar{height:8px!important;margin:16px 0 9px!important}
.salawat-counter:not(.sq-compact) .sq-goalrow{font-size:12.5px!important}
.salawat-counter:not(.sq-compact) .sq-foot{display:contents!important}
.salawat-counter:not(.sq-compact) .sq-note{grid-area:note;align-self:end;margin:20px 0 0!important;font-family:var(--am-font-serif)!important;font-style:italic;font-size:13.5px!important;line-height:1.55!important}
.salawat-counter:not(.sq-compact) .sq-dhikr-btn{grid-area:plate;align-self:stretch;display:flex!important;flex-direction:column;align-items:center;justify-content:center;padding:28px 26px!important;min-height:180px;border-radius:22px!important}
.salawat-counter:not(.sq-compact) .sq-dhikr{font-size:25px!important;line-height:1.75!important;text-align:center}
.salawat-counter:not(.sq-compact) .sq-faraj{display:block}
.salawat-counter:not(.sq-compact) .sq-hint,html:not([data-scheme="dark"]) .salawat-counter:not(.sq-compact) .sq-hint{display:inline-block;margin-top:14px!important;padding:7px 16px;border-radius:999px;background:#1E5E51;color:#fff!important;text-transform:none!important;letter-spacing:0!important;font-size:12.5px!important;font-weight:600!important;box-shadow:0 6px 14px -8px rgba(9,31,26,.5)}
[data-scheme="dark"] .salawat-counter:not(.sq-compact) .sq-hint{background:#9FD3B8;color:#0E2622!important}
.salawat-counter:not(.sq-compact) .sq-personal{grid-area:mine;justify-self:end;align-self:center;display:flex!important;align-items:center;gap:10px;margin:18px 5px 0 0!important;padding:6px 8px 6px 16px;border-radius:999px;background:rgba(30,94,81,.08);border:1px solid rgba(30,94,81,.15)}
[data-scheme="dark"] .salawat-counter:not(.sq-compact) .sq-personal{background:rgba(159,211,184,.08);border-color:rgba(159,211,184,.18)}
.salawat-counter:not(.sq-compact) .sq-label{text-transform:none!important;letter-spacing:0!important;font-size:12.5px!important;font-weight:500!important;margin:0!important}
.salawat-counter:not(.sq-compact) .sq-count{font-size:15px!important;line-height:1!important;font-weight:700!important;min-width:26px;padding:6px 8px;border-radius:999px;text-align:center;background:rgba(255,255,255,.7)}
[data-scheme="dark"] .salawat-counter:not(.sq-compact) .sq-count{background:rgba(255,255,255,.08)}
.salawat-counter:not(.sq-compact) .sq-share{grid-area:share;justify-self:start;align-self:center;margin:18px 0 0 5px!important;height:40px!important;border-radius:999px!important}
}
/* Wide Salawat: personal + share pills centred as a group under the plate. */
@media (min-width:700px){
.salawat-counter:not(.sq-compact) .sq-card{grid-template-columns:minmax(0,2.1fr) minmax(0,1fr) auto auto minmax(0,1fr)!important;grid-template-areas:"head plate plate plate plate" "community plate plate plate plate" "note . mine share ."!important}
.salawat-counter:not(.sq-compact) .sq-personal{justify-self:auto!important;margin-right:5px!important}
.salawat-counter:not(.sq-compact) .sq-share{justify-self:auto!important;margin-left:5px!important}
}
/* Wide Salawat: equal halves, pills row centred, title + note wrap nicely. */
@media (min-width:700px){
.salawat-counter:not(.sq-compact) .sq-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-areas:"head plate" "community plate" "note pills"!important}
.salawat-counter:not(.sq-compact) .sq-head,.salawat-counter:not(.sq-compact) .sq-community,.salawat-counter:not(.sq-compact) .sq-note{padding-right:52px!important}
.salawat-counter:not(.sq-compact) .sq-pills{grid-area:pills;display:flex;justify-content:center;align-items:center;gap:10px;margin-top:18px;align-self:center}
.salawat-counter:not(.sq-compact) .sq-pills .sq-personal,.salawat-counter:not(.sq-compact) .sq-pills .sq-share{margin:0!important;justify-self:auto!important}
.salawat-counter:not(.sq-compact) .sq-title{white-space:normal!important;text-wrap:balance;font-size:clamp(24px,2.2vw,31px)!important}
.salawat-counter:not(.sq-compact) .sq-honorific{white-space:nowrap}
.salawat-counter:not(.sq-compact) .sq-note{max-width:none!important;text-wrap:pretty}
.salawat-counter:not(.sq-compact) .sq-eyebrow,html:not([data-scheme="dark"]) .salawat-counter:not(.sq-compact) .sq-eyebrow{background:none!important;padding:0!important}
}

/* Wide Salawat card from tablet up: two-line title, fluid sizes. Phones (<700px) stack. */
@media (min-width:700px){
.salawat-counter:not(.sq-compact) .sq-card{padding:clamp(22px,3cqi,36px) clamp(22px,3.2cqi,38px) clamp(20px,2.6cqi,28px)!important}
.salawat-counter:not(.sq-compact) .sq-head,.salawat-counter:not(.sq-compact) .sq-community,.salawat-counter:not(.sq-compact) .sq-note{padding-right:clamp(26px,4.2cqi,52px)!important}
.salawat-counter:not(.sq-compact) .sq-title{white-space:nowrap!important;text-wrap:nowrap;font-size:min(31px,calc(4.4cqi - 6px))!important;line-height:1.18!important}
.salawat-counter:not(.sq-compact) .sq-title-break{display:inline!important}
.salawat-counter:not(.sq-compact) .sq-total{font-size:min(52px,6.2cqi)!important}
.salawat-counter:not(.sq-compact) .sq-dhikr{font-size:min(25px,2.9cqi)!important}
.salawat-counter:not(.sq-compact) .sq-dhikr-btn{padding:clamp(18px,2.6cqi,28px) clamp(14px,2.2cqi,26px)!important;min-height:0}
.salawat-counter:not(.sq-compact) .sq-pills{gap:8px;flex-wrap:wrap}
.salawat-counter:not(.sq-compact) .sq-note{font-size:min(13.5px,calc(1cqi + 6px))!important}
}
@media (min-width:700px) and (max-width:1099px){
.salawat-counter:not(.sq-compact) .sq-pills{flex-wrap:nowrap!important;gap:6px!important}
.salawat-counter:not(.sq-compact) .sq-personal{padding:4px 5px 4px 12px!important;gap:7px!important}
.salawat-counter:not(.sq-compact) .sq-label{font-size:11.5px!important;white-space:nowrap}
.salawat-counter:not(.sq-compact) .sq-count{font-size:13px!important;padding:5px 7px!important;min-width:22px}
.salawat-counter:not(.sq-compact) .sq-share{height:34px!important;padding:0 13px!important;font-size:13px!important}
}

/* ===== Salawat card on phones (<700px): stacked version of the new design ===== */
@media (max-width:699px){
.salawat-counter:not(.sq-compact) .sq-card{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto!important;grid-template-areas:"head" "community" "plate" "pills" "note"!important;padding:24px 20px 22px!important;row-gap:0!important;column-gap:0!important}
.salawat-counter:not(.sq-compact) .sq-badge{display:none!important}
.salawat-counter:not(.sq-compact) .sq-head{grid-area:head;display:block!important;padding:0!important}
.salawat-counter:not(.sq-compact) .sq-eyebrow,html:not([data-scheme="dark"]) .salawat-counter:not(.sq-compact) .sq-eyebrow{background:none!important;padding:0!important;margin:0 0 8px!important;font-size:10.5px!important;letter-spacing:.16em!important;font-weight:700!important}
.salawat-counter:not(.sq-compact) .sq-title{font-size:min(26px,calc(8cqi - 4px))!important;line-height:1.18!important;font-weight:700!important;white-space:nowrap!important;margin:0!important}
.salawat-counter:not(.sq-compact) .sq-title-break{display:inline!important}
.salawat-counter:not(.sq-compact) .sq-honorific{font-family:var(--am-font-serif);font-style:italic;font-weight:400;font-size:.72em;color:var(--am-accent-text)!important}
.salawat-counter:not(.sq-compact) .sq-community{grid-area:community;border:0!important;padding:0!important;margin:18px 0 0!important}
.salawat-counter:not(.sq-compact) .sq-row{display:flex!important;flex-direction:row-reverse;justify-content:flex-end;align-items:baseline;gap:10px}
.salawat-counter:not(.sq-compact) .sq-total{font-size:44px!important;line-height:1!important;font-weight:700!important;letter-spacing:-.02em}
.salawat-counter:not(.sq-compact) .sq-k{text-transform:none!important;letter-spacing:0!important;font-size:13.5px!important;font-weight:500!important}
.salawat-counter:not(.sq-compact) .sq-bar{height:8px!important;margin:12px 0 8px!important}
.salawat-counter:not(.sq-compact) .sq-goalrow{font-size:12px!important}
.salawat-counter:not(.sq-compact) .sq-dhikr-btn{grid-area:plate;margin-top:20px!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;padding:20px 16px!important;border-radius:20px!important;min-height:0}
.salawat-counter:not(.sq-compact) .sq-dhikr{font-size:21px!important;line-height:1.7!important;text-align:center}
.salawat-counter:not(.sq-compact) .sq-faraj{display:block}
.salawat-counter:not(.sq-compact) .sq-hint,html:not([data-scheme="dark"]) .salawat-counter:not(.sq-compact) .sq-hint{display:inline-block;margin-top:12px!important;padding:7px 16px;border-radius:999px;background:#1E5E51;color:#fff!important;text-transform:none!important;letter-spacing:0!important;font-size:12.5px!important;font-weight:600!important;box-shadow:0 6px 14px -8px rgba(9,31,26,.5)}
[data-scheme="dark"] .salawat-counter:not(.sq-compact) .sq-hint{background:#9FD3B8;color:#0E2622!important}
.salawat-counter:not(.sq-compact) .sq-pills{grid-area:pills;display:flex;justify-content:center;align-items:center;gap:8px;margin-top:14px;flex-wrap:nowrap}
.salawat-counter:not(.sq-compact) .sq-personal{display:flex!important;align-items:center;gap:7px;margin:0!important;padding:4px 5px 4px 12px;border-radius:999px;background:rgba(30,94,81,.08);border:1px solid rgba(30,94,81,.15)}
[data-scheme="dark"] .salawat-counter:not(.sq-compact) .sq-personal{background:rgba(159,211,184,.08);border-color:rgba(159,211,184,.18)}
.salawat-counter:not(.sq-compact) .sq-label{text-transform:none!important;letter-spacing:0!important;font-size:11.5px!important;font-weight:500!important;margin:0!important;white-space:nowrap}
.salawat-counter:not(.sq-compact) .sq-count{font-size:13px!important;line-height:1!important;font-weight:700!important;min-width:22px;padding:5px 7px;border-radius:999px;text-align:center;background:rgba(255,255,255,.7)}
[data-scheme="dark"] .salawat-counter:not(.sq-compact) .sq-count{background:rgba(255,255,255,.08)}
.salawat-counter:not(.sq-compact) .sq-share{margin:0!important;height:34px!important;padding:0 13px!important;border-radius:999px!important;font-size:13px!important}
.salawat-counter:not(.sq-compact) .sq-foot{display:contents!important}
.salawat-counter:not(.sq-compact) .sq-note{grid-area:note;margin:16px 0 0!important;padding:0!important;max-width:none!important;text-align:center;text-wrap:balance;font-family:var(--am-font-serif)!important;font-style:italic;font-size:13px!important;line-height:1.55!important}
}

/* ===== Salawat sidebar widget (compact): same stacked design as the home card on phones ===== */
.salawat-counter.sq-compact .sq-card{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto!important;grid-template-areas:"head" "community" "plate" "personal"!important;padding:22px 20px 20px!important;row-gap:0!important;column-gap:0!important}
.salawat-counter.sq-compact .sq-badge{display:none!important}
.salawat-counter.sq-compact .sq-head{grid-area:head;display:block!important;padding:0!important;text-align:left}
.salawat-counter.sq-compact .sq-eyebrow,html:not([data-scheme="dark"]) .salawat-counter.sq-compact .sq-eyebrow{background:none!important;padding:0!important;margin:0 0 8px!important;font-size:10.5px!important;letter-spacing:.16em!important;font-weight:700!important}
.salawat-counter.sq-compact .sq-title{font-size:min(26px,calc(8cqi - 4px))!important;line-height:1.18!important;font-weight:700!important;white-space:nowrap!important;margin:0!important;text-align:left}
.salawat-counter.sq-compact .sq-title-break{display:inline!important}
.salawat-counter.sq-compact .sq-honorific{font-family:var(--am-font-serif);font-style:italic;font-weight:400;font-size:.72em;color:var(--am-accent-text)!important}
.salawat-counter.sq-compact .sq-community{grid-area:community;border:0!important;padding:0!important;margin:16px 0 0!important}
.salawat-counter.sq-compact .sq-row{display:flex!important;flex-direction:row-reverse;justify-content:flex-end;align-items:baseline;gap:10px}
.salawat-counter.sq-compact .sq-total{font-size:42px!important;line-height:1!important;font-weight:700!important;letter-spacing:-.02em}
.salawat-counter.sq-compact .sq-k{text-transform:none!important;letter-spacing:0!important;font-size:13px!important;font-weight:500!important}
.salawat-counter.sq-compact .sq-bar{height:8px!important;margin:12px 0 8px!important}
.salawat-counter.sq-compact .sq-goalrow{font-size:11.5px!important}
.salawat-counter.sq-compact .sq-dhikr-btn{grid-area:plate;margin-top:18px!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;padding:18px 14px!important;border-radius:20px!important;min-height:0}
.salawat-counter.sq-compact .sq-dhikr{font-size:20px!important;line-height:1.7!important;text-align:center}
.salawat-counter.sq-compact .sq-faraj{display:block}
.salawat-counter.sq-compact .sq-hint,html:not([data-scheme="dark"]) .salawat-counter.sq-compact .sq-hint{display:inline-block;margin-top:12px!important;padding:7px 16px;border-radius:999px;background:#1E5E51;color:#fff!important;text-transform:none!important;letter-spacing:0!important;font-size:12.5px!important;font-weight:600!important;box-shadow:0 6px 14px -8px rgba(9,31,26,.5)}
[data-scheme="dark"] .salawat-counter.sq-compact .sq-hint{background:#9FD3B8;color:#0E2622!important}
.salawat-counter.sq-compact .sq-personal{grid-area:personal;justify-self:center;display:flex!important;align-items:center;gap:7px;margin:14px 0 0!important;padding:4px 5px 4px 12px;border-radius:999px;background:rgba(30,94,81,.08);border:1px solid rgba(30,94,81,.15)}
[data-scheme="dark"] .salawat-counter.sq-compact .sq-personal{background:rgba(159,211,184,.08);border-color:rgba(159,211,184,.18)}
.salawat-counter.sq-compact .sq-label{text-transform:none!important;letter-spacing:0!important;font-size:11.5px!important;font-weight:500!important;margin:0!important;white-space:nowrap}
.salawat-counter.sq-compact .sq-count{font-size:13px!important;line-height:1!important;font-weight:700!important;min-width:22px;padding:5px 7px;border-radius:999px;text-align:center;background:rgba(255,255,255,.7)}
[data-scheme="dark"] .salawat-counter.sq-compact .sq-count{background:rgba(255,255,255,.08)}
.salawat-counter.sq-compact .sq-foot{display:contents!important}
.salawat-counter.sq-compact .sq-note{grid-column:1;margin:14px 0 0!important;text-align:center;font-family:var(--am-font-serif)!important;font-style:italic;font-size:12.5px!important}
/* "Tap to count one" pill uses the Read book button colour in both modes. */
html:not([data-scheme="dark"]) .salawat-counter:not(.sq-compact) .sq-hint,html:not([data-scheme="dark"]) .salawat-counter.sq-compact .sq-hint,[data-scheme="dark"] .salawat-counter:not(.sq-compact) .sq-hint,[data-scheme="dark"] .salawat-counter.sq-compact .sq-hint{background:var(--am-accent)!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.32),0 10px 22px -12px rgba(0,0,0,.6)!important}
/* Tighter gap between "A collective gift" and the title. */
html:not([data-scheme="dark"]) .salawat-counter:not(.sq-compact) .sq-eyebrow,html:not([data-scheme="dark"]) .salawat-counter.sq-compact .sq-eyebrow,[data-scheme="dark"] .salawat-counter:not(.sq-compact) .sq-eyebrow,[data-scheme="dark"] .salawat-counter.sq-compact .sq-eyebrow{margin-bottom:3px!important;line-height:1.3!important}
/* Light mode: hero panel one shade deeper green. */
html:not([data-scheme="dark"]) .hero::before{background:radial-gradient(55% 75% at 82% 38%,rgba(30,94,81,.17),transparent 70%),linear-gradient(165deg,#D6E6DC 0%,#C6DBCE 100%)!important;border-color:rgba(30,94,81,.16)!important}
html:not([data-scheme="dark"]) .hero::after{opacity:.15}

/* Light mode: deeper mint shared by the hero, course tab, Salawat cards and latest book/magazine card. */
@media (min-width:861px){html:not([data-scheme="dark"]) .courses__tab.is-on{background:radial-gradient(70% 90% at 90% 20%,rgba(30,94,81,.15),transparent 70%),linear-gradient(165deg,#D6E6DC 0%,#C6DBCE 100%)!important;border-color:rgba(30,94,81,.3)!important}}
html:not([data-scheme="dark"]) .salawat-counter .sq-card{background:radial-gradient(55% 75% at 82% 20%,rgba(30,94,81,.17),transparent 70%),linear-gradient(165deg,#D6E6DC 0%,#C6DBCE 100%)!important;border-color:rgba(30,94,81,.16)!important}
html:not([data-scheme="dark"]) .salawat-counter .sq-card::before{opacity:.15!important}
html:not([data-scheme="dark"]) .mag-hero{background:radial-gradient(55% 75% at 82% 30%,rgba(30,94,81,.17),transparent 70%),linear-gradient(165deg,#D6E6DC 0%,#C6DBCE 100%)!important;border-color:rgba(30,94,81,.16)!important}
html:not([data-scheme="dark"]) .mag-hero::before{opacity:.15}

/* Light mode hero: green-tinted text tones tuned for the deeper mint panel. */
html:not([data-scheme="dark"]) .hero .hero__title{color:#0B2420!important}
html:not([data-scheme="dark"]) .hero .hero__title em{color:#17544A!important}
html:not([data-scheme="dark"]) .hero .hero__arabic{color:#17544A!important}
html:not([data-scheme="dark"]) .hero .chip{color:#17544A!important}
html:not([data-scheme="dark"]) .hero .hero__courses a{color:#0E2622!important}
html:not([data-scheme="dark"]) .hero .hero__courses a span{color:#3E6157!important}
html:not([data-scheme="dark"]) .hero .hero__text{color:#26423B!important}
html:not([data-scheme="dark"]) .hero .hero__note{color:#3E6157!important}
html:not([data-scheme="dark"]) .hero .hadith__eyebrow{color:#17544A!important}
html:not([data-scheme="dark"]) .hero .hadith__text{color:#0E2622!important}
html:not([data-scheme="dark"]) .hero .hadith__cite{color:#3E6157!important}

/* Light mode: same text tones as the hero on the other mint cards. */
@media (min-width:861px){
html:not([data-scheme="dark"]) .courses__tab.is-on .courses__tab-text b{color:#0B2420!important}
html:not([data-scheme="dark"]) .courses__tab.is-on .courses__tab-text span{color:#3E6157!important}
html:not([data-scheme="dark"]) .courses__tab.is-on .courses__tab-ar,html:not([data-scheme="dark"]) .courses__tab.is-on .courses__tab-icon{color:#17544A!important}
}
html:not([data-scheme="dark"]) .salawat-counter .sq-title,html:not([data-scheme="dark"]) .salawat-counter .sq-total,html:not([data-scheme="dark"]) .salawat-counter .sq-dhikr{color:#0B2420!important}
html:not([data-scheme="dark"]) .salawat-counter .sq-eyebrow,html:not([data-scheme="dark"]) .salawat-counter .sq-label,html:not([data-scheme="dark"]) .salawat-counter .sq-k,html:not([data-scheme="dark"]) .salawat-counter .sq-honorific,html:not([data-scheme="dark"]) .salawat-counter .sq-faraj{color:#17544A!important}
html:not([data-scheme="dark"]) .salawat-counter .sq-count{color:#0B2420!important}
html:not([data-scheme="dark"]) .salawat-counter .sq-goalrow,html:not([data-scheme="dark"]) .salawat-counter .sq-goalrow *,html:not([data-scheme="dark"]) .salawat-counter .sq-resetline,html:not([data-scheme="dark"]) .salawat-counter .sq-sync,html:not([data-scheme="dark"]) .salawat-counter .sq-note{color:#3E6157!important}
html:not([data-scheme="dark"]) .salawat-counter .sq-share{color:#17544A!important}
html:not([data-scheme="dark"]) .mag-hero .mag-hero__title{color:#0B2420!important}
html:not([data-scheme="dark"]) .mag-hero .mag-hero__pill{color:#17544A!important}
html:not([data-scheme="dark"]) .mag-hero .mag-hero__meta{color:#3E6157!important}
html:not([data-scheme="dark"]) .mag-hero .btn--ghost-light{color:#17544A!important}

/* Book / magazine shelves: white cards with a soft shadow (home, Books, Magazines). */
.shelf{background:#fff!important;border:1px solid rgba(14,38,34,.08)!important;box-shadow:0 26px 52px -34px rgba(9,31,26,.34),0 1px 2px rgba(9,31,26,.05)!important}
[data-scheme="dark"] .shelf{background:var(--am-surface)!important;border-color:rgba(255,255,255,.08)!important;box-shadow:0 30px 60px -30px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.04)!important}
/* Shelves: no shadow, thin border like the course tabs. */
.shelf{box-shadow:none!important;border:1px solid var(--am-line)!important}
[data-scheme="dark"] .shelf{box-shadow:none!important;border-color:var(--am-line)!important}
/* Magazines page: series tabs fill the width on phones. */
@media (max-width:640px){.mag-page__tabs{width:100%;display:flex}.mag-page__tabs .seg__btn{flex:1 1 0}}
/* Books / Magazines: on phones and tablets (1100px and under) the "Browse books/magazines" button moves to the bottom, above the footer, full width. */
.library-switch-foot{display:none}
@media (max-width:1100px){.library-switch--top{display:none!important}.library-switch-foot{display:block;margin-top:32px}.library-switch--bottom{display:flex;width:100%;justify-content:center}}
/* Salawat: the "saved" status dot was too pale to see in light mode. */
html:not([data-scheme="dark"]) .salawat-counter .sq-sync:not(.is-saving):not(.is-offline)::before{background:#2A7A68;opacity:.75}
/* ===== Salawat: "Your salawat this week" pill above the tap plate ===== */
.salawat-counter .sq-personal{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;padding:5px 5px 5px 16px!important;border-radius:999px!important}
.salawat-counter .sq-personal .sq-label{margin:0!important;font-size:13.5px!important;font-weight:500!important;line-height:1.3!important}
.salawat-counter .sq-personal .sq-count{margin:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:34px!important;height:34px!important;padding:0 10px!important;border-radius:999px!important;font-size:16px!important;font-weight:600!important;line-height:1!important;box-shadow:none!important}
html:not([data-scheme="dark"]) .salawat-counter .sq-personal{background:#fff!important;border:1px solid rgba(30,94,81,.3)!important;box-shadow:0 8px 18px -14px rgba(9,31,26,.4)!important}
html:not([data-scheme="dark"]) .salawat-counter .sq-personal .sq-label{color:#0B2420!important}
html:not([data-scheme="dark"]) .salawat-counter .sq-personal .sq-count{background:#1E5E51!important;color:#fff!important}
[data-scheme="dark"] .salawat-counter .sq-personal{background:rgba(255,255,255,.06)!important;border:1px solid rgba(159,211,184,.24)!important;box-shadow:none!important}
[data-scheme="dark"] .salawat-counter .sq-personal .sq-label{color:#E4F1EA!important}
[data-scheme="dark"] .salawat-counter .sq-personal .sq-count{background:#2A7A68!important;color:#fff!important}
/* Wide card: pill above the plate, Share below it. */
@media (min-width:700px){
.salawat-counter:not(.sq-compact) .sq-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-rows:auto 1fr auto auto!important;grid-template-areas:"head mine" "head plate" "community plate" "note share"!important}
.salawat-counter:not(.sq-compact) .sq-personal{grid-area:mine!important;justify-self:center!important;align-self:start!important;margin:0!important}
.salawat-counter:not(.sq-compact) .sq-share{grid-area:share!important;justify-self:center!important;align-self:start!important;margin:14px 0 0!important}
}
/* Stacked card: pill full width above the plate, no Share. */
@media (max-width:699px){
.salawat-counter:not(.sq-compact) .sq-card{grid-template-areas:"head" "community" "mine" "plate" "note"!important}
.salawat-counter:not(.sq-compact) .sq-personal{grid-area:mine!important;justify-self:stretch!important;margin:18px 0 0!important}
.salawat-counter:not(.sq-compact) .sq-share{display:none!important}
}
/* Sidebar widget: same as the stacked card. */
.salawat-counter.sq-compact .sq-card{grid-template-areas:"head" "community" "personal" "plate"!important}
.salawat-counter.sq-compact .sq-personal{grid-area:personal!important;justify-self:stretch!important;margin:18px 0 0!important}
.salawat-counter.sq-compact .sq-share{display:none!important}
/* Salawat: "your salawat" and Share side by side in one row above the tap plate. */
@media (min-width:700px){
.salawat-counter:not(.sq-compact) .sq-card{grid-template-rows:auto 1fr auto auto!important;grid-template-areas:"head mine" "head plate" "community plate" "note plate"!important}
.salawat-counter:not(.sq-compact) .sq-dhikr-btn{align-self:stretch!important}
.salawat-counter:not(.sq-compact) .sq-pills{grid-area:mine!important;justify-self:center!important;align-self:start!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:center!important;gap:10px!important;margin:0 0 18px!important}
.salawat-counter:not(.sq-compact) .sq-pills .sq-personal,.salawat-counter:not(.sq-compact) .sq-pills .sq-share{margin:0!important;justify-self:auto!important;align-self:auto!important}
.salawat-counter:not(.sq-compact) .sq-pills .sq-share{height:44px!important}
}
@media (max-width:699px){
.salawat-counter:not(.sq-compact) .sq-pills{grid-area:mine!important;display:flex!important;margin:18px 0 0!important}
.salawat-counter:not(.sq-compact) .sq-pills .sq-personal{flex:1 1 auto!important;margin:0!important}
}
/* Salawat pill row: a little tighter on small tablets so it stays within the plate width. */
@media (min-width:700px) and (max-width:969px){
.salawat-counter:not(.sq-compact) .sq-pills{gap:8px!important}
.salawat-counter:not(.sq-compact) .sq-pills .sq-share{padding:0 14px!important}
.salawat-counter:not(.sq-compact) .sq-pills .sq-personal{padding-left:13px!important;gap:9px!important}
.salawat-counter:not(.sq-compact) .sq-pills .sq-personal .sq-label{font-size:12.5px!important}
}
/* Salawat total and goal line in narrow columns: the number never breaks, the label wraps beside it, "saved" stays on the right. */
.salawat-counter .sq-total{flex:0 0 auto!important;white-space:nowrap!important}
.salawat-counter .sq-k{flex:0 1 auto!important;min-width:0!important}
.salawat-counter .sq-goalrow{flex-wrap:nowrap!important;align-items:flex-start!important}
.salawat-counter .sq-goal-group{flex:1 1 auto!important;min-width:0!important}
.salawat-counter .sq-goal-group>*{white-space:nowrap}
.salawat-counter .sq-sync{flex:0 0 auto!important}
@media (min-width:700px) and (max-width:819px){
.salawat-counter:not(.sq-compact) .sq-row{align-items:center!important}
.salawat-counter:not(.sq-compact) .sq-total{font-size:44px!important}
.salawat-counter:not(.sq-compact) .sq-k{font-size:13.5px!important;line-height:1.35!important}
}
@media (max-width:380px){
.salawat-counter .sq-row{align-items:center!important}
.salawat-counter .sq-k{line-height:1.35!important}
}
/* Hero on small phones: the 340px column minimum made the hero wider than the screen. Cap it at the available width. */
@media (max-width:1100px){.hero{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}}
@media (max-width:420px){.hero .chip--live{white-space:normal!important;max-width:100%;border-radius:16px!important;line-height:1.35!important;text-align:left}}
/* Narrow screens: Search and the light/dark toggle move from the header bar into the menu. */
.hdr__menu-tools{display:none}
@media (max-width:480px){
.hdr__tools [data-search-open],.hdr__tools [data-scheme-toggle]{display:none!important}
.hdr__menu-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid var(--am-line)}
.hdr__reading+.hdr__menu-tools{margin-top:2px}
.menu-tool{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 12px;border-radius:999px;border:1px solid var(--am-line);background:var(--am-surface);color:var(--am-ink);font:600 14px var(--am-font-body);cursor:pointer;transition:background-color .2s,border-color .2s}
.menu-tool:hover{border-color:var(--am-accent-text)}
.menu-tool svg{flex:0 0 auto}
html:not([data-scheme="dark"]) .menu-tool .only-dark{display:none}
[data-scheme="dark"] .menu-tool{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#EDEDED}
}
/* ===== Hero hadith card: "ink on paper" ===== */
.hero .hadith{transform:none!important;border-radius:24px!important;padding-left:clamp(30px,3.6vh,46px)!important}
.hero .hadith::before,.hero .hadith::after{display:none!important}
.hero .hadith__eyebrow{margin-bottom:4px!important}
.hero .hadith__text{font-style:normal!important;margin-bottom:16px!important}
.hero .hadith__text::before{content:"\201C";display:block;font:500 50px/1 Georgia,"Times New Roman",serif;height:22px;margin:6px 0 0;color:#1E5E51}
.hero .hadith__text mark{color:inherit;padding:0 2px;border-radius:2px;background:linear-gradient(transparent 56%,#CFE6D8 56%)}
.hero .hadith__cite{display:inline-flex!important;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font-size:12.5px!important;font-style:normal}
.hero .hadith__cite::before{content:"";width:14px;height:14px;flex:0 0 auto;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20V3H6.5A2.5 2.5 0 0 0 4 5.5z'/%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 0 6.5 22H20v-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20V3H6.5A2.5 2.5 0 0 0 4 5.5z'/%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 0 6.5 22H20v-5'/%3E%3C/svg%3E") center/contain no-repeat}
html:not([data-scheme="dark"]) .hero .hadith{background:linear-gradient(#1E5E51,#1E5E51) left 0 top 28px/3px calc(100% - 56px) no-repeat,#fff!important;border:1px solid rgba(30,94,81,.16)!important;box-shadow:0 26px 50px -34px rgba(9,31,26,.4),0 1px 2px rgba(9,31,26,.06)!important}
html:not([data-scheme="dark"]) .hero .hadith__cite{background:#EEF5F0;color:#26423B!important}
[data-scheme="dark"] .hero .hadith{background:linear-gradient(#9FD3B8,#9FD3B8) left 0 top 28px/3px calc(100% - 56px) no-repeat,linear-gradient(165deg,#17271F 0%,#0E1813 100%)!important;border:1px solid rgba(159,211,184,.18)!important;box-shadow:0 30px 60px -34px rgba(0,0,0,.85)!important;color:#E9F3EE}
[data-scheme="dark"] .hero .hadith__text{color:#EEF6F1!important}
[data-scheme="dark"] .hero .hadith__text::before{color:#9FD3B8}
[data-scheme="dark"] .hero .hadith__text mark{background:linear-gradient(transparent 56%,rgba(76,197,147,.3) 56%)}
[data-scheme="dark"] .hero .hadith__cite{background:rgba(255,255,255,.06);color:#CFE9DC!important}
@media (max-width:640px){.hero .hadith{padding-left:26px!important}.hero .hadith__text::before{font-size:46px;height:26px}}
/* Hero on desktop: two equal columns, with the text column never narrower than the two-line title. Closes the gap before the hadith card. */
@media (min-width:1101px){.hero{grid-template-columns:minmax(auto,1fr) minmax(0,1fr)!important}.hero__title{white-space:nowrap}.hero__side{padding-left:0!important}}
/* Course tabs on desktop: green border on hover. */
@media (min-width:861px) and (hover:hover){
html:not([data-scheme="dark"]) .courses__tab:hover{border-color:rgba(30,94,81,.55)!important}
[data-scheme="dark"] .courses__tab:hover{border-color:rgba(159,211,184,.45)!important}
}
/* Menu Search and Dark mode buttons: same mint tint as the header icon buttons. */
.hdr__menu .menu-tool{background:rgba(225,237,231,.75)!important;border-color:rgba(30,94,81,.14)!important;color:var(--am-accent-text)!important;transition:background-color .2s,border-color .2s}
.hdr__menu .menu-tool:hover{background:rgba(207,229,218,.95)!important;border-color:rgba(30,94,81,.28)!important}
[data-scheme="dark"] .hdr__menu .menu-tool{background:rgba(159,211,184,.12)!important;border-color:rgba(159,211,184,.2)!important;color:#CFE9DC!important}
[data-scheme="dark"] .hdr__menu .menu-tool:hover{background:rgba(159,211,184,.2)!important}
/* Desktop page links: mint pill buttons, grouped just before Register for Class. */
@media (min-width:1101px){
.hdr__nav{margin:0 -12px 0 auto!important;gap:8px!important}
.hdr__tools{margin-left:0!important}
.hdr__nav .navlink{height:44px;box-sizing:border-box;padding:0 16px!important;border-radius:999px!important;border:1px solid rgba(30,94,81,.14);background:rgba(225,237,231,.75)!important;color:var(--am-accent-text)!important;font-weight:500;transition:background-color .2s,border-color .2s,transform .2s}
.hdr__nav .navlink:hover{background:rgba(207,229,218,.95)!important;border-color:rgba(30,94,81,.28);transform:translateY(-1px)}
.hdr__nav .navlink.is-active{background:rgba(190,220,205,.95)!important;border-color:rgba(30,94,81,.42);color:#0B2420!important;font-weight:600}
.hdr__nav .navlink__icon{opacity:1}
[data-scheme="dark"] .hdr__nav .navlink{background:rgba(159,211,184,.12)!important;border-color:rgba(159,211,184,.2);color:#CFE9DC!important}
[data-scheme="dark"] .hdr__nav .navlink:hover{background:rgba(159,211,184,.2)!important}
[data-scheme="dark"] .hdr__nav .navlink.is-active{background:rgba(159,211,184,.26)!important;border-color:rgba(159,211,184,.4);color:#fff!important}
}
@media (min-width:1101px) and (max-width:1199px){.hdr__nav{gap:6px!important}.hdr__nav .navlink{padding:0 13px!important}}
/* Register for Class: icon before the label (header and phone menu). */
.hdr__register,.hdr__menu-register{align-items:center;justify-content:center;gap:8px}
.hdr__register svg,.hdr__menu-register svg{flex:0 0 auto}
/* Phone menu: social icons row under Register for Class. */
.hdr__menu-social{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:12px 4px 2px;border-top:1px solid var(--am-line)}
.hdr__menu-social-label{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--am-ink-2)}
.hdr__menu-social-icons{display:flex;gap:8px}
.menu-social{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;background:rgba(225,237,231,.75);border:1px solid rgba(30,94,81,.14);color:var(--am-accent-text);transition:background-color .2s,border-color .2s,transform .2s}
.menu-social:hover{background:rgba(207,229,218,.95);border-color:rgba(30,94,81,.28);transform:translateY(-1px)}
[data-scheme="dark"] .menu-social{background:rgba(159,211,184,.12);border-color:rgba(159,211,184,.2);color:#CFE9DC}
[data-scheme="dark"] .menu-social:hover{background:rgba(159,211,184,.2)}
/* Header logo: bigger on wide screens (the img has an inline 40px height). */
@media (min-width:1200px){.hdr .logo img{height:52px!important;width:auto}}
/* ===== Article list rows: topic above the title, Quick read badge, featured first article, green hover ===== */
.post-row__topic{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:12.5px;font-weight:600;color:var(--am-accent-text);line-height:1.3}
.post-row__badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:600;background:rgba(30,94,81,.1);color:#17544A;border:1px solid rgba(30,94,81,.18)}
.post-row__quick{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;background:#FAEEDA;color:#7A5A12}
.post-row__quick svg{flex:0 0 auto}
[data-scheme="dark"] .post-row__badge{background:rgba(159,211,184,.12);border-color:rgba(159,211,184,.24);color:#CFE9DC}
[data-scheme="dark"] .post-row__quick{background:rgba(239,159,39,.16);color:#F2D59B}
html:not([data-scheme="dark"]) .post-list .post-row:hover{border-color:rgba(30,94,81,.42)!important}
[data-scheme="dark"] .post-list .post-row:hover{border-color:rgba(159,211,184,.36)!important}
.post-list .post-row--featured{grid-template-columns:72px minmax(0,1fr) 44px;padding:24px 22px;margin-bottom:12px;align-items:start}
.post-list .post-row--featured::before,.post-list .post-row--featured+.post-row::before{display:none}
.post-row--featured .post-row__mark{width:72px;height:72px;border-radius:20px}
.post-row--featured .post-row__mark .post-row__emblem{width:38px;height:38px}
.post-row--featured .post-row__title{font-size:24px;line-height:1.2}
.post-row--featured .post-row__excerpt{-webkit-line-clamp:3}
.post-row--featured .post-row__go{align-self:center}
html:not([data-scheme="dark"]) .post-list .post-row--featured{background:#fff;border-color:rgba(30,94,81,.16)!important;box-shadow:0 18px 40px -30px rgba(9,31,26,.35)}
[data-scheme="dark"] .post-list .post-row--featured{background:linear-gradient(165deg,#17271F 0%,#0E1813 100%);border-color:rgba(159,211,184,.18)!important}
@media (max-width:640px){
.post-list .post-row--featured{grid-template-columns:52px minmax(0,1fr);padding:18px 16px}
.post-row--featured .post-row__mark{width:52px;height:52px;border-radius:16px}
.post-row--featured .post-row__mark .post-row__emblem{width:28px;height:28px}
.post-row--featured .post-row__title{font-size:20px}
}
/* The Quick read badge is redundant on the Quick reads page itself. */
body.category-quick-reads .post-row__quick{display:none}
/* Salawat plate on the wide card: larger Arabic that scales with the card (22px to 38px), each line kept on one line. */
@media (min-width:700px){.salawat-counter:not(.sq-compact) .sq-dhikr{font-size:clamp(22px,3.3cqi,38px)!important;line-height:1.6!important;white-space:nowrap}}
/* ===== Salawat plate: footer bar "Tap to count one" and a rising +1 ===== */
.salawat-counter:not(.sq-compact) .sq-dhikr-btn.sq-dhikr-btn,.salawat-counter.sq-compact .sq-dhikr-btn.sq-dhikr-btn{position:relative;overflow:hidden;padding-bottom:calc(var(--sq-bar,46px) + 20px)!important}
.salawat-counter .sq-dhikr-btn .sq-hint{position:absolute!important;left:0;right:0;bottom:0;margin:0!important;height:var(--sq-bar,46px);display:flex!important;align-items:center;justify-content:center;padding:0 16px!important;border-radius:0!important;box-shadow:none!important;transform:none!important;background:#1E5E51!important;color:#fff!important;font:600 14.5px/1 var(--am-font-head,Poppins),sans-serif!important;letter-spacing:.01em;transition:background-color .2s}
.salawat-counter .sq-dhikr-btn:hover .sq-hint{background:#17544A!important}
.salawat-counter .sq-dhikr-btn.sq-tapped .sq-hint{background:#2A7A68!important;transition:none}
[data-scheme="dark"] .salawat-counter .sq-dhikr-btn .sq-hint{background:#1E5E51!important}
[data-scheme="dark"] .salawat-counter .sq-dhikr-btn:hover .sq-hint{background:#2F8670!important}
[data-scheme="dark"] .salawat-counter .sq-dhikr-btn.sq-tapped .sq-hint{background:#36957D!important}
.salawat-counter.sq-compact .sq-dhikr-btn,.salawat-counter .sq-dhikr-btn{--sq-bar:46px}
@media (max-width:699px){.salawat-counter .sq-dhikr-btn{--sq-bar:44px}}
.sq-plus{position:absolute;left:50%;bottom:calc(var(--sq-bar,46px) + 6px);z-index:2;pointer-events:none;font:700 20px/1 var(--am-font-head,Poppins),sans-serif;color:#1E5E51;opacity:0;transform:translate(-50%,8px);animation:sq-rise .9s ease-out forwards}
[data-scheme="dark"] .sq-plus{color:#9FD3B8}
@keyframes sq-rise{0%{opacity:0;transform:translate(-50%,8px)}18%{opacity:1}100%{opacity:0;transform:translate(-50%,-42px)}}
@media (prefers-reduced-motion:reduce){.sq-plus{display:none}}
/* Salawat tap bar: beat the older pill rules so light and dark match (same text size, no inset outline or border). */
html body .salawat-counter .sq-dhikr-btn.sq-dhikr-btn .sq-hint.sq-hint{box-shadow:none!important;border:0!important;outline:0!important;font-size:14.5px!important;font-weight:600!important;line-height:1!important;color:#fff!important;letter-spacing:.01em!important}
html:not([data-scheme="dark"]) body .salawat-counter .sq-dhikr-btn.sq-dhikr-btn .sq-hint.sq-hint{background:#1E5E51!important}
html:not([data-scheme="dark"]) body .salawat-counter .sq-dhikr-btn.sq-dhikr-btn:hover .sq-hint.sq-hint{background:#17544A!important}
html:not([data-scheme="dark"]) body .salawat-counter .sq-dhikr-btn.sq-dhikr-btn.sq-tapped .sq-hint.sq-hint{background:#2A7A68!important}
[data-scheme="dark"] body .salawat-counter .sq-dhikr-btn.sq-dhikr-btn .sq-hint.sq-hint{background:#1E5E51!important}
[data-scheme="dark"] body .salawat-counter .sq-dhikr-btn.sq-dhikr-btn.sq-tapped .sq-hint.sq-hint{background:#2A7A68!important}
[data-scheme="dark"] body .salawat-counter .sq-dhikr-btn.sq-dhikr-btn:hover .sq-hint.sq-hint{background:#2F8670!important}
[data-scheme="dark"] body .salawat-counter .sq-dhikr-btn.sq-dhikr-btn.sq-tapped .sq-hint.sq-hint{background:#36957D!important}
@media (max-width:699px){html body .salawat-counter .sq-dhikr-btn.sq-dhikr-btn .sq-hint.sq-hint{font-size:14px!important}}
/* Salawat: hide the plugin's own olive "+1" (the theme's green +1 above the tap bar replaces it). */
.salawat-counter .sq-float{display:none!important}
/* "Your salawat this week" pill: the count never wraps; the label wraps instead when space is tight. */
html body .salawat-counter .sq-personal .sq-count{flex:0 0 auto!important;white-space:nowrap!important;width:auto!important;min-width:34px!important}
html body .salawat-counter .sq-personal .sq-label{flex:1 1 auto!important;min-width:0!important;white-space:normal!important;text-wrap:balance;line-height:1.25!important}
html body .salawat-counter .sq-personal{min-width:0!important;max-width:100%!important;box-sizing:border-box}
/* Salawat note in the stacked card and sidebar: centred under the plate, one line when it fits, balanced lines when it wraps. */
@media (max-width:699px){html body .salawat-counter:not(.sq-compact) .sq-note{justify-self:center!important;width:100%!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important;text-align:center!important;text-wrap:balance!important}}
html body .salawat-counter.sq-compact .sq-note{grid-column:1/-1!important;justify-self:center!important;width:100%!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important;text-align:center!important;text-wrap:balance!important}
/* Register form: the submit button fits narrow screens (shrinks with its card, text wraps if needed). */
.reg-sec--submit,.reg-sec--submit nf-field,.reg-sec--submit .nf-field-container,.reg-sec--submit .nf-field,.reg-sec--submit .field-wrap,.reg-sec--submit .nf-field-element{min-width:0!important;max-width:100%!important}
.reg-sec--submit input[type="submit"],.reg-sec--submit input[type="button"]{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
@media (max-width:420px){.reg-sec--submit input[type="submit"],.reg-sec--submit input[type="button"]{white-space:normal!important;height:auto!important;min-height:52px;line-height:1.25!important;padding:12px 44px 12px 20px!important;font-size:15px!important}}
@media (max-width:360px){.reg-sec .g-recaptcha{transform:scale(.8)!important;transform-origin:left top!important}.reg-sec .recaptcha-wrap .nf-field-element{height:64px!important;overflow:visible}}
/* Previous / Next article cards: the 260px minimum column is capped at the available width, so the cards shrink and wrap on narrow phones instead of overflowing. */
.prevnext{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))!important}
.prevnext__item{min-width:0!important;max-width:100%;box-sizing:border-box}
.prevnext__item *{min-width:0;overflow-wrap:break-word}
/* Article end actions (Save for later, Share): wrap onto two rows when space runs out. */
.read__end-actions{flex-wrap:wrap!important}
@media (max-width:480px){.read__end-actions .btn{flex:1 1 auto;justify-content:center}}
/* Article end on phones: the closing Arabic line and the Save / Share buttons are centred. */
@media (max-width:640px){.read__end{align-items:center!important;text-align:center}.read__end .read__hamd{text-align:center;align-self:center}.read__end-actions{justify-content:center;width:100%}}
/* Book and magazine covers: softer shadows (shelves, home library and the latest book/magazine card). */
.shelf .book__cover,.book__cover{box-shadow:inset 4px 0 8px -6px rgba(0,0,0,.18),0 8px 16px -12px rgba(0,0,0,.28)!important}
.book:hover .book__cover{box-shadow:inset 4px 0 8px -6px rgba(0,0,0,.18),0 12px 22px -14px rgba(0,0,0,.32)!important}
#library .shelf__grid>.book:first-child .book__cover{box-shadow:0 0 0 3px var(--am-surface),0 0 0 5px var(--am-accent-text),0 8px 16px -12px rgba(9,31,26,.28)!important}
#library .shelf__grid>.book:first-child .book__cover::after{box-shadow:0 2px 6px -4px rgba(0,0,0,.2)!important}
html:not([data-scheme="dark"]) .mag-hero__cover,html:not([data-scheme="dark"]) a.mag-hero__cover._3d-flip-book{box-shadow:inset 4px 0 8px -6px rgba(0,0,0,.16),0 12px 24px -18px rgba(9,31,26,.3)!important}
[data-scheme="dark"] .mag-hero__cover,[data-scheme="dark"] a.mag-hero__cover._3d-flip-book{box-shadow:inset 4px 0 8px -6px rgba(0,0,0,.2),0 14px 28px -18px rgba(0,0,0,.45)!important}
/* Instagram flyer: no photo zoom on hover (Smash Balloon's scale), just the theme's lift and green ring. */
.ig-flyer #sb_instagram .sbi_photo_wrap:hover .sbi_photo,.ig-flyer #sb_instagram .sbi_photo,.ig-flyer #sb_instagram .sbi_photo img{transform:none!important;scale:1!important}
.art-ig .ig-flyer:hover,.art-ig .ig-flyer:focus-within{transform:translateY(-2px)!important;box-shadow:0 18px 36px -26px rgba(9,31,26,.38)!important}
@media (prefers-reduced-motion:reduce){.art-ig .ig-flyer:hover,.art-ig .ig-flyer:focus-within{transform:none!important}}
/* Header logo on phones and tablets: larger, stepped to fit what else is in the bar. */
@media (max-width:1100px){.hdr .hdr__bar .logo img{height:48px!important;width:auto!important}}
@media (max-width:640px){.hdr .hdr__bar .logo img{height:46px!important}}
@media (max-width:480px){.hdr .hdr__bar .logo img{height:48px!important}}
@media (max-width:360px){.hdr .hdr__bar .logo img{height:44px!important}}
/* Drawer on very narrow phones: smaller logo, and the Search / Dark mode labels stay on one line. */
.hdr__menu .menu-tool{white-space:nowrap}
.hdr__menu-head{gap:12px}
@media (max-width:360px){.hdr__menu-head .hdr__menu-logo img{height:34px!important}.hdr__menu .menu-tool{font-size:13px;gap:6px;padding:0 8px}}
/* Menu "Follow us": the label never breaks mid-word (the icons wrap below it if space runs out). */
.hdr__menu-social{flex-wrap:wrap;row-gap:10px}
.hdr__menu-social-label{white-space:nowrap;flex:0 0 auto}
/* Phone/tablet menu: drops down from the header when it opens (card unfolds from the top, items fade in). */
@media (max-width:1100px){
.hdr .hdr__menu:not([hidden]){transform-origin:top center;animation:am-menu-drop .34s cubic-bezier(.22,.8,.24,1) both}
.hdr .hdr__menu:not([hidden])>*{animation:am-menu-item .3s ease both}
.hdr .hdr__menu:not([hidden])>*:nth-child(2){animation-delay:.05s}
.hdr .hdr__menu:not([hidden])>*:nth-child(3){animation-delay:.1s}
.hdr .hdr__menu:not([hidden])>*:nth-child(4){animation-delay:.15s}
}
@keyframes am-menu-drop{from{opacity:0;transform:translateY(-12px) scaleY(.94);clip-path:inset(0 0 100% 0 round 20px)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 20px)}}
@keyframes am-menu-item{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* Tablets and phones (1100px and under): no Register for Class button in the header bar, it's in the menu. */
@media (max-width:1100px){.hdr .hdr__tools .hdr__register{display:none!important}}
/* Phone/tablet menu card: solid background, no see-through glass or blur (header bar unchanged). */
html:not([data-scheme="dark"]) .hdr .hdr__menu{background:#FFFFFF!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-color:rgba(14,38,34,.1)!important}
[data-scheme="dark"] .hdr .hdr__menu{background:#1A1F1D!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-color:rgba(255,255,255,.1)!important}
/* Header bar turns solid too while the phone/tablet menu is open (matches the solid menu card). */
html:not([data-scheme="dark"]):has(#mobile-menu:not([hidden])) .hdr .hdr__bar{background:#FFFFFF!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-color:rgba(14,38,34,.1)!important}
[data-scheme="dark"]:has(#mobile-menu:not([hidden])) .hdr .hdr__bar{background:#1A1F1D!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-color:rgba(255,255,255,.1)!important}
/* Phone/tablet menu card: darker, deeper shadow when open (no page tint). */
html:not([data-scheme="dark"]) .hdr .hdr__menu{box-shadow:0 34px 70px -18px rgba(9,31,26,.55),0 12px 26px -10px rgba(9,31,26,.32),0 0 0 1px rgba(14,38,34,.06)!important}
[data-scheme="dark"] .hdr .hdr__menu{box-shadow:0 34px 70px -18px rgba(0,0,0,.95),0 12px 26px -10px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06)!important}
/* Phone/tablet menu card floats over the page (absolute under the header bar) so opening or closing it doesn't push the page down. */
@media (max-width:1100px){
.hdr .hdr__menu{position:absolute!important;top:100%;left:24px;right:24px;z-index:2;margin:8px auto 0!important}
}
@media (max-width:640px){
.hdr .hdr__menu{left:12px;right:12px}
}

/* Header tools: search sits last on desktop (above 1100px), before the toggle on tablet/phone */
@media (min-width:1101px){
	.hdr .hdr__tools [data-search-open].iconbtn{order:3 !important}
	.hdr .hdr__tools .hdr__burger{order:4 !important}
}

/* Phone menu tools: Search stretches, light/dark becomes a round icon-only button (label kept for screen readers) */
@media (max-width:480px){
	.hdr .hdr__menu .hdr__menu-tools{grid-template-columns:1fr 44px !important}
	.hdr .hdr__menu .menu-tool[data-scheme-toggle]{width:44px !important;height:44px !important;padding:0 !important;gap:0 !important;border-radius:50% !important}
	.hdr .hdr__menu .menu-tool[data-scheme-toggle] svg{width:19px;height:19px}
	.hdr .hdr__menu .menu-tool[data-scheme-toggle] span{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;white-space:nowrap !important;border:0 !important}
}

/* Header logo: phones use the same 48px as tablet (overrides the older 46/44/34/30px phone steps) */
@media (max-width:1100px){
	html body .hdr .hdr__bar .logo img{height:48px !important;width:auto !important;max-width:none !important}
}

/* Phone menu card: sits 2px lower than tablet (10px gap under the header bar instead of 8px) */
@media (max-width:480px){
	html body .hdr .hdr__menu{margin-top:10px !important}
}

/* Header logo on phones: 4px smaller than tablet */
@media (max-width:640px){
	html body .hdr .hdr__bar .logo img{height:44px !important}
}

/* Phone menu: light/dark shown as a sliding switch. Sun on the left, moon on the right, knob slides to the active mode. */
@media (max-width:480px){
	html body .hdr .hdr__menu .hdr__menu-tools{grid-template-columns:1fr 76px !important;align-items:center !important}
	html body .hdr .hdr__menu .menu-tool[data-scheme-toggle]{position:relative !important;isolation:isolate;display:block !important;width:76px !important;height:44px !important;padding:0 !important;gap:0 !important;border-radius:999px !important;justify-self:end;overflow:hidden}
	html body .hdr .hdr__menu .menu-tool[data-scheme-toggle]::before{content:"";position:absolute;top:3px;left:3px;width:36px;height:36px;border-radius:50%;z-index:0;transition:left .25s ease,background-color .25s ease}
	html body .hdr .hdr__menu .menu-tool[data-scheme-toggle] svg.icon{display:block !important;position:absolute !important;top:50% !important;width:18px !important;height:18px !important;margin-top:-9px;z-index:1;transition:color .25s ease,opacity .25s ease}
	html body .hdr .hdr__menu .menu-tool[data-scheme-toggle] svg.icon-sun{left:12px !important}
	html body .hdr .hdr__menu .menu-tool[data-scheme-toggle] svg.icon-moon{right:12px !important}
	/* Light: knob on the sun */
	html:not([data-scheme="dark"]) body .hdr .hdr__menu .menu-tool[data-scheme-toggle]{background:rgba(225,237,231,.75) !important;border-color:rgba(30,94,81,.16) !important}
	html:not([data-scheme="dark"]) body .hdr .hdr__menu .menu-tool[data-scheme-toggle]::before{left:3px;background:#FFFFFF;box-shadow:0 1px 3px rgba(16,40,34,.22)}
	html:not([data-scheme="dark"]) body .hdr .hdr__menu .menu-tool[data-scheme-toggle] svg.icon-sun{color:var(--am-accent-text) !important;opacity:1}
	html:not([data-scheme="dark"]) body .hdr .hdr__menu .menu-tool[data-scheme-toggle] svg.icon-moon{color:var(--am-accent-text) !important;opacity:.45}
	/* Dark: knob on the moon */
	html[data-scheme="dark"] body .hdr .hdr__menu .menu-tool[data-scheme-toggle]{background:rgba(159,211,184,.16) !important;border-color:rgba(159,211,184,.24) !important}
	html[data-scheme="dark"] body .hdr .hdr__menu .menu-tool[data-scheme-toggle]::before{left:35px;background:#CFE9DC;box-shadow:0 1px 3px rgba(0,0,0,.4)}
	html[data-scheme="dark"] body .hdr .hdr__menu .menu-tool[data-scheme-toggle] svg.icon-moon{color:#1A1F1D !important;opacity:1}
	html[data-scheme="dark"] body .hdr .hdr__menu .menu-tool[data-scheme-toggle] svg.icon-sun{color:#CFE9DC !important;opacity:.5}
}
@media (max-width:480px) and (prefers-reduced-motion:reduce){
	html body .hdr .hdr__menu .menu-tool[data-scheme-toggle]::before,html body .hdr .hdr__menu .menu-tool[data-scheme-toggle] svg.icon{transition:none !important}
}

/* Header bar (tablet + desktop): light/dark shown as the same sliding switch as the phone menu. Height matches the icon buttons (44px, 40px at 640px and under). */
html body .hdr .hdr__bar .iconbtn[data-scheme-toggle]{--tg-h:44px;--tg-w:76px;--tg-ic:18px;position:relative !important;isolation:isolate;display:block !important;width:var(--tg-w) !important;height:var(--tg-h) !important;padding:0 !important;border-radius:999px !important;overflow:hidden;flex:none}
@media (max-width:640px){
	html body .hdr .hdr__bar .iconbtn[data-scheme-toggle]{--tg-h:40px;--tg-w:70px;--tg-ic:17px}
}
html body .hdr .hdr__bar .iconbtn[data-scheme-toggle]::before{content:"";position:absolute;top:3px;left:3px;width:calc(var(--tg-h) - 8px);height:calc(var(--tg-h) - 8px);border-radius:50%;z-index:0;transition:left .25s ease,background-color .25s ease}
html body .hdr .hdr__bar .iconbtn[data-scheme-toggle] svg.icon{display:block !important;position:absolute !important;top:50% !important;width:var(--tg-ic) !important;height:var(--tg-ic) !important;margin-top:calc(var(--tg-ic) / -2);z-index:1;transition:color .25s ease,opacity .25s ease}
html body .hdr .hdr__bar .iconbtn[data-scheme-toggle] svg.icon-sun{left:calc(var(--tg-h) / 2 - 1px - var(--tg-ic) / 2) !important}
html body .hdr .hdr__bar .iconbtn[data-scheme-toggle] svg.icon-moon{right:calc(var(--tg-h) / 2 - 1px - var(--tg-ic) / 2) !important}
/* Light: knob on the sun */
html:not([data-scheme="dark"]) body .hdr .hdr__bar .iconbtn[data-scheme-toggle]{background:rgba(225,237,231,.75) !important;border-color:rgba(30,94,81,.16) !important}
html:not([data-scheme="dark"]) body .hdr .hdr__bar .iconbtn[data-scheme-toggle]::before{left:3px;background:#FFFFFF;box-shadow:0 1px 3px rgba(16,40,34,.22)}
html:not([data-scheme="dark"]) body .hdr .hdr__bar .iconbtn[data-scheme-toggle] svg.icon-sun{color:var(--am-accent-text) !important;opacity:1}
html:not([data-scheme="dark"]) body .hdr .hdr__bar .iconbtn[data-scheme-toggle] svg.icon-moon{color:var(--am-accent-text) !important;opacity:.45}
html:not([data-scheme="dark"]) body .hdr .hdr__bar .iconbtn[data-scheme-toggle]:hover{border-color:rgba(30,94,81,.3) !important}
/* Dark: knob on the moon */
html[data-scheme="dark"] body .hdr .hdr__bar .iconbtn[data-scheme-toggle]{background:rgba(159,211,184,.16) !important;border-color:rgba(159,211,184,.24) !important}
html[data-scheme="dark"] body .hdr .hdr__bar .iconbtn[data-scheme-toggle]::before{left:calc(100% - var(--tg-h) + 5px);background:#CFE9DC;box-shadow:0 1px 3px rgba(0,0,0,.4)}
html[data-scheme="dark"] body .hdr .hdr__bar .iconbtn[data-scheme-toggle] svg.icon-moon{color:#1A1F1D !important;opacity:1}
html[data-scheme="dark"] body .hdr .hdr__bar .iconbtn[data-scheme-toggle] svg.icon-sun{color:#CFE9DC !important;opacity:.5}
html[data-scheme="dark"] body .hdr .hdr__bar .iconbtn[data-scheme-toggle]:hover{border-color:rgba(159,211,184,.4) !important}
@media (prefers-reduced-motion:reduce){
	html body .hdr .hdr__bar .iconbtn[data-scheme-toggle]::before,html body .hdr .hdr__bar .iconbtn[data-scheme-toggle] svg.icon{transition:none !important}
}

/* Phones (480px and under): no light/dark switch in the header bar, it lives in the burger menu */
@media (max-width:480px){
	html body .hdr .hdr__bar .hdr__tools .iconbtn[data-scheme-toggle]{display:none !important}
}

/* Desktop header: "Library" dropdown grouping Books and Magazines (the burger menu still lists them separately) */
html body .hdr .hdr__nav .navdrop{position:relative;display:flex}
html body .hdr .hdr__nav .navdrop__btn{font:inherit;font-weight:500;line-height:normal;cursor:pointer;-webkit-appearance:none;appearance:none;margin:0}
html body .hdr .hdr__nav .navdrop__chev{flex:none;margin-left:-2px;opacity:.75;transition:transform .2s ease}
html body .hdr .hdr__nav .navdrop.is-open .navdrop__chev{transform:rotate(180deg)}
html body .hdr .hdr__nav .navdrop__panel{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:6px;min-width:200px;padding:8px;border-radius:22px;background:#FFFFFF;border:1px solid rgba(30,94,81,.10);box-shadow:0 18px 40px rgba(10,30,25,.20),0 2px 6px rgba(10,30,25,.08);animation:am-navdrop-in .18s ease}
html body .hdr .hdr__nav .navdrop__panel[hidden]{display:none !important}
html body .hdr .hdr__nav .navdrop__panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
html body .hdr .hdr__nav .navdrop__panel .navlink{width:100%;justify-content:flex-start}
html[data-scheme="dark"] body .hdr .hdr__nav .navdrop__panel{background:#1A1F1D;border-color:rgba(159,211,184,.16);box-shadow:0 18px 40px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.3)}
@keyframes am-navdrop-in{from{opacity:0;transform:translateX(-50%) translateY(-6px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@media (prefers-reduced-motion:reduce){
	html body .hdr .hdr__nav .navdrop__panel{animation:none}
	html body .hdr .hdr__nav .navdrop__chev{transition:none}
}

/* Desktop (1101px+): with Books and Magazines under Library there is room, so the logo stays full size (52px) and the nav pills keep their normal padding at every desktop width */
@media (min-width:1101px){
	html body .hdr .hdr__bar .logo img{height:52px !important;width:auto !important}
	html body .hdr .hdr__bar .hdr__nav{gap:8px !important}
	html body .hdr .hdr__bar .hdr__nav .navlink{padding:0 16px !important}
}

/* Tablet + phone: feature cards dock over the bottom of the hero, like desktop (40px overlap on tablet, 32px on phones) */
@media (max-width:1100px){
	html body .hero{--hero-dock:40px;padding-bottom:calc(32px + var(--hero-dock)) !important}
	html body section.container:has(>.features){position:relative;z-index:2;margin-top:-40px !important}
	html body section.container:has(>.features) > .features{margin-left:12px;margin-right:12px;box-shadow:0 22px 44px -26px rgba(9,31,26,.42)}
	html[data-scheme="dark"] html body section.container:has(>.features) > .features{box-shadow:0 26px 50px -24px rgba(0,0,0,.9)}
}
@media (max-width:640px){
	html body .hero{--hero-dock:32px;padding-bottom:calc(28px + var(--hero-dock)) !important}
	html body section.container:has(>.features){margin-top:-32px !important}
	html body section.container:has(>.features) > .features{margin-left:10px;margin-right:10px}
}

/* Footer: tighter gap between the copyright line and Privacy Policy */
html body .ftr .ftr__bottom > span{line-height:1.35 !important}
html body .ftr .ftr__bottom .ftr__privacy{margin-top:2px !important}

/* Homepage Books / Magazines cards: even padding top and bottom, and every title reserves two lines so the page counts line up across both cards */
html body .library-row .shelf .shelf__title{line-height:1.15 !important}
@media (min-width:901px){
	html body .library-row .shelf{padding:24px !important}
}
html body .library-row .shelf .book__title{line-height:1.3 !important;min-height:2.6em}

/* Books / Magazines pages: titles reserve two lines so page counts line up, and the bottom padding is trimmed 3px to offset the page-count text's own spacing so top and bottom look even */
html body .shelf--page .book__title{line-height:1.3 !important;min-height:2.6em}
html body .shelf--page{padding-bottom:33px !important}
@media (max-width:640px){
	html body .shelf--page{padding-bottom:17px !important}
}

/* Homepage Books / Magazines card titles: same size as the "Discover more articles" heading (22px, 20px on phones) */
html body .library-row .shelf .shelf__title{font-size:22px !important;letter-spacing:-.01em !important}
@media (max-width:640px){
	html body .library-row .shelf .shelf__title{font-size:20px !important}
}

/* Privacy Policy: title and text use the full container width. */
html body.privacy-policy .crumbs--page>ol,
html body.privacy-policy .page-single .page-head--narrow,
html body.privacy-policy .page-single .prose--page{max-width:none}

/* Privacy Policy layout: index + numbered section cards --------------------- */
html body.privacy-policy .page-head--pp{padding-bottom:36px}
html:has(body.privacy-policy){scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html:has(body.privacy-policy){scroll-behavior:auto}}
.pp{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;align-items:start;padding-bottom:72px}
.pp-side{position:sticky;top:112px}
.pp-toc{padding:20px 14px 14px;border:1px solid var(--am-line);border-radius:22px;background:var(--am-surface)}
.pp-toc__label{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:0 10px;color:var(--am-ink-3);font:700 12px var(--am-font-body);letter-spacing:.12em;text-transform:uppercase}
html body .pp-toc ol,html body .pp-toc-m ol{margin:0;padding:0;list-style:none}
html body .pp-toc li,html body .pp-toc-m li{margin:0;padding:0}
html body .pp-toc li::before,html body .pp-toc-m li::before{content:none}
.pp-toc a,.pp-toc-m a{display:flex;gap:10px;align-items:baseline;padding:8px 10px;border-radius:12px;color:var(--am-ink-2);font:500 14px/1.35 var(--am-font-body);text-decoration:none;transition:background .15s,color .15s}
.pp-toc a:hover,.pp-toc-m a:hover{background:var(--am-surface-2);color:var(--am-ink)}
.pp-toc a.is-current{background:var(--am-accent-soft);color:var(--am-accent-text);font-weight:600}
.pp-toc__num{flex:none;min-width:20px;color:var(--am-ink-3);font:600 12px var(--am-font-head);font-variant-numeric:tabular-nums}
.pp-toc a.is-current .pp-toc__num{color:inherit}
.pp-toc-m{display:none}
.pp-main{display:grid;gap:20px;min-width:0}
.pp-lead{display:flex;gap:20px;align-items:flex-start;padding:28px 32px;border-radius:24px;background:var(--am-accent-soft)}
.pp-lead__icon,.pp-end__icon{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--am-accent);color:var(--am-accent-ink)}
html body .pp-lead .prose p{margin:0;color:var(--am-ink);font-size:1.06em}
.pp-secs{display:grid;gap:20px}
.pp-sec{padding:30px 32px;border:1px solid var(--am-line);border-radius:24px;background:var(--am-surface);scroll-margin-top:110px}
.pp-sec__head{display:flex;align-items:center;gap:14px;margin:0 0 16px}
.pp-sec__num{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--am-accent-soft);color:var(--am-accent-text);font:700 14px var(--am-font-head);font-variant-numeric:tabular-nums}
html body .pp-sec h2{margin:0;font-size:24px;line-height:1.25}
html body .pp-sec__body>:last-child,html body .pp-item>:last-child,html body .pp-end__text>:last-child{margin-bottom:0}
.pp-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:4px 0 1.15em}
.pp-item{padding:18px 20px;border:1px solid var(--am-line);border-radius:18px;background:var(--am-bg);font-size:.93em}
html body .pp-item p{margin:0 0 .5em}
html body .pp-item strong:first-child{color:var(--am-accent-text)}
html body .pp-main .prose ul{margin:-.3em 0 1.15em!important;padding-left:0;list-style:none}
html body .pp-main .prose .pp-item ul{margin:.55em 0 0!important}
html body .pp-main .prose ul li{position:relative;margin:0 0 .4em;padding-left:28px}
html body .pp-main .prose ul li::before{content:"";position:absolute;left:0;top:.32em;width:18px;height:18px;border-radius:50%;background:var(--am-accent-soft)}
html body .pp-main .prose ul li::after{content:"";position:absolute;left:4px;top:calc(.32em + 4px);width:10px;height:10px;background:var(--am-accent-text);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.pp-item ul li::before{background:var(--am-surface)!important}
.pp-end{display:flex;gap:20px;align-items:center;padding:28px 32px;border-radius:24px;background:var(--am-band);color:#fff}
.pp-end__icon{background:rgba(255,255,255,.14);color:#fff}
html body .pp-end p{margin:0;color:#fff}
html body .pp-end p:first-child{font:600 20px/1.35 var(--am-font-head)}
html body .pp-end a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.55);text-underline-offset:4px}
html body .pp-end a:hover{text-decoration-color:#fff}
html body .pp-end .has-small-font-size{margin-top:6px;color:rgba(255,255,255,.75);font:400 13.5px var(--am-font-body)}
html body .pp-end em{font-style:normal}
@media (max-width:1100px){
	.pp{grid-template-columns:minmax(0,1fr);gap:0}
	.pp-side{display:none}
	.pp-toc-m{display:block;border:1px solid var(--am-line);border-radius:18px;background:var(--am-surface)}
	.pp-toc-m summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;color:var(--am-ink);font:600 15px var(--am-font-head);list-style:none;cursor:pointer}
	.pp-toc-m summary>span{display:flex;align-items:center;gap:10px}
	.pp-toc-m summary::-webkit-details-marker{display:none}
	.pp-toc-m summary .icon-chevron{transition:transform .2s}
	.pp-toc-m[open] summary .icon-chevron{transform:rotate(180deg)}
	html body .pp-toc-m ol{padding:0 8px 10px}
}
@media (max-width:640px){
	html body.privacy-policy .page-head--pp{padding-bottom:24px}
	.pp-main,.pp-secs{gap:14px}
	.pp-items{grid-template-columns:minmax(0,1fr);gap:10px}
	.pp-lead,.pp-sec,.pp-end{padding:22px 20px;border-radius:20px}
	.pp-lead,.pp-end{flex-direction:column;align-items:flex-start;gap:14px}
	.pp-lead__icon,.pp-end__icon{width:42px;height:42px;border-radius:12px}
	.pp-sec__head{gap:12px;margin-bottom:12px}
	.pp-sec__num{width:34px;height:34px;border-radius:10px;font-size:13px}
	html body .pp-sec h2{font-size:20px}
	html body .pp-end p:first-child{font-size:18px}
}

/* Privacy Policy closing band: same look as the home hero in light and dark. */
html body .pp .pp-end{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(55% 75% at 82% 38%,rgba(30,94,81,.17),rgba(0,0,0,0) 70%),linear-gradient(165deg,#D6E6DC 0%,#C6DBCE 100%);color:#0B2420;box-shadow:0 34px 70px -48px rgba(9,31,26,.5),inset 0 1px 0 rgba(255,255,255,.8)}
html body .pp .pp-end::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%231E5E51'%3E%3Cpath d='M36 2 70 36 36 70 2 36Z'/%3E%3Cpath d='M36 16 56 36 36 56 16 36Z'/%3E%3C/g%3E%3C/svg%3E") 0 0/46px 46px;opacity:.15;-webkit-mask:linear-gradient(100deg,rgba(0,0,0,0) 28%,#000 78%);mask:linear-gradient(100deg,rgba(0,0,0,0) 28%,#000 78%)}
html body .pp .pp-end__icon{border:1px solid rgba(30,94,81,.16);background:rgba(255,255,255,.78);color:#17544A}
html body .pp .pp-end p{color:#0B2420}
html body .pp .pp-end .has-small-font-size{color:#17544A}
html body .pp .pp-end a{color:#0B2420;text-decoration-color:rgba(30,94,81,.45)}
html body .pp .pp-end a:hover{color:#17544A;text-decoration-color:currentColor}
html[data-scheme="dark"] body .pp .pp-end{background:radial-gradient(55% 75% at 82% 38%,rgba(76,197,147,.13),rgba(0,0,0,0) 70%),linear-gradient(165deg,#17271F 0%,#0E1813 100%);color:#fff;box-shadow:0 40px 80px -46px rgba(0,0,0,.95),inset 0 1px 0 rgba(159,211,184,.08)}
html[data-scheme="dark"] body .pp .pp-end::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23c7ffe2'%3E%3Cpath d='M36 2 70 36 36 70 2 36Z'/%3E%3Cpath d='M36 16 56 36 36 56 16 36Z'/%3E%3C/g%3E%3C/svg%3E");opacity:.08}
html[data-scheme="dark"] body .pp .pp-end__icon{border-color:rgba(159,211,184,.26);background:rgba(159,211,184,.1);color:#CFE9DC}
html[data-scheme="dark"] body .pp .pp-end p{color:#fff}
html[data-scheme="dark"] body .pp .pp-end .has-small-font-size{color:#9FD3B8}
html[data-scheme="dark"] body .pp .pp-end a{color:#fff;text-decoration-color:rgba(189,235,210,.5)}
html[data-scheme="dark"] body .pp .pp-end a:hover{color:#BDEBD2;text-decoration-color:currentColor}

/* Privacy Policy closing line: "For any inquiries," and "please contact us." on separate lines on phones. */
@media (max-width:640px){
	html body .pp .pp-end{flex-direction:row;align-items:center;gap:14px}
	html body .pp .pp-end__lead{display:block}
	html body .pp .pp-end__rest{white-space:nowrap}
}

/* Highlighted note paragraph (class pp-note), e.g. the courses note on the Privacy Policy. */
html body .prose p.pp-note{position:relative;margin:0 0 1.15em;padding:16px 20px 16px 52px;border:1px solid #EBCB7C;border-radius:16px;background:#FFF6DF;color:#4E3B0C;font-size:.95em}
html body .prose p.pp-note::before{content:"";position:absolute;left:18px;top:18px;width:20px;height:20px;background:#B7811A;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.6h.01'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.6h.01'/%3E%3C/svg%3E") center/contain no-repeat}
html body .prose p.pp-note strong{color:#7A5208}
html body .prose p.pp-note:last-child{margin-bottom:0}
html[data-scheme="dark"] body .prose p.pp-note{border-color:rgba(235,203,124,.35);background:rgba(235,203,124,.1);color:#F1DDAA}
html[data-scheme="dark"] body .prose p.pp-note::before{background:#EBCB7C}
html[data-scheme="dark"] body .prose p.pp-note strong{color:#F6D98C}
@media (max-width:640px){html body .prose p.pp-note{padding:14px 16px 14px 46px}html body .prose p.pp-note::before{left:15px;top:16px;width:18px;height:18px}}

/* Homepage Books / Magazines cards: even, roomier padding (clears the "Latest" ring). */
html body main .library-row .shelf{padding:32px !important}
html body main .library-row .shelf .shelf__head{margin-bottom:20px !important}
@media (max-width:1100px){html body main .library-row .shelf{padding:28px !important}}
@media (max-width:640px){html body main .library-row .shelf{padding:20px !important}html body main .library-row .shelf .shelf__head{margin-bottom:16px !important}}

/* Books / Magazines pages: shelf cards get the same even padding as the homepage cards. */
html body main .shelf.shelf--page{padding:32px !important}
@media (max-width:1100px){html body main .shelf.shelf--page{padding:28px !important}}
@media (max-width:640px){html body main .shelf.shelf--page{padding:20px !important}}

/* Salawat card (home, two columns): gap between "Your salawats" pill and the tap plate; even card padding. */
@media (min-width:700px){
	html body .salawat-counter:not(.sq-compact) .sq-card{padding:36px !important}
	html body .salawat-counter:not(.sq-compact) .sq-card>.sq-personal{margin-bottom:16px !important}
}

/* Salawat card, widest layout: breathing room between the columns; the privacy note wraps evenly. */
@media (min-width:1100px){
	html body .salawat-counter:not(.sq-compact) .sq-card{column-gap:56px !important}
	html body .salawat-counter:not(.sq-compact) .sq-card .sq-note{margin-top:26px !important;max-width:46ch !important;text-wrap:balance}
}

/* Forest dim dark mode: hand-coloured dark spots moved onto the green-tinted palette. */
html[data-scheme="dark"] body .hdr .hdr__bar{background:linear-gradient(180deg,rgba(14,21,19,.9) 0%,rgba(14,21,19,.8) 100%)!important;border-color:rgba(220,240,230,.12)!important}
html[data-scheme="dark"]:has(#mobile-menu:not([hidden])) body .hdr .hdr__bar,html[data-scheme="dark"] body .hdr .hdr__menu{background:#0E1513!important;border-color:rgba(220,240,230,.12)!important}
html[data-scheme="dark"] body .hdr .hdr__nav .navdrop__panel{background:#0E1513!important;border-color:rgba(166,219,192,.18)!important}
html[data-scheme="dark"] body .recaptcha-container .g-recaptcha{background:transparent}

/* Register form, dark mode: Gender / Language switches match the magazine tabs (green selected pill). */
html[data-scheme="dark"] body .form-card--register [data-reg="gender"] .nf-field-element ul,html[data-scheme="dark"] body .form-card--register [data-reg="language"] .nf-field-element ul{background:var(--am-field) !important;box-shadow:none}
html[data-scheme="dark"] body .form-card--register [data-reg="gender"] li label,html[data-scheme="dark"] body .form-card--register [data-reg="language"] li label{color:var(--am-ink-2) !important;font-weight:600 !important}
html[data-scheme="dark"] body .form-card--register [data-reg="gender"] li label:hover,html[data-scheme="dark"] body .form-card--register [data-reg="language"] li label:hover{color:var(--am-ink) !important}
html[data-scheme="dark"] body .form-card--register [data-reg="gender"] li input:checked + label,html[data-scheme="dark"] body .form-card--register [data-reg="language"] li input:checked + label{background:#1E5E51 !important;color:#fff !important;box-shadow:none !important}

/* Register form, dark mode: Age group and Preferred days chips, clear selected vs not. */
html[data-scheme="dark"] body .form-card--register [data-reg="days"] li label,html[data-scheme="dark"] body .form-card--register [data-reg="age"] li label{background:transparent !important;border-color:var(--am-line-2) !important;color:var(--am-ink-3) !important;font-weight:500 !important}
html[data-scheme="dark"] body .form-card--register [data-reg="days"] li label:hover,html[data-scheme="dark"] body .form-card--register [data-reg="age"] li label:hover{border-color:rgba(166,219,192,.45) !important;color:var(--am-ink) !important}
html[data-scheme="dark"] body .form-card--register [data-reg="days"] li input:checked + label,html[data-scheme="dark"] body .form-card--register [data-reg="age"] li input:checked + label{background:#1E5E51 !important;border-color:#3F9C84 !important;color:#fff !important;font-weight:600 !important;box-shadow:0 6px 14px -8px rgba(0,0,0,.7) !important}

/* Dark mode: article search bar and plain segmented switches (Latest / Most read) easier to see. */
html[data-scheme="dark"] body .search__input::placeholder{color:var(--am-ink-3);opacity:1}
html[data-scheme="dark"] body .search__box{border-color:rgba(220,240,230,.24) !important}
html[data-scheme="dark"] body .search__box:focus-within{border-color:rgba(166,219,192,.6) !important;box-shadow:0 0 0 3px rgba(166,219,192,.14) !important}
html[data-scheme="dark"] body .search__form svg{color:var(--am-ink-2)}
html[data-scheme="dark"] body .archive__count{color:var(--am-ink-2)}
html[data-scheme="dark"] body .seg:not(.seg--surface){background:var(--am-field) !important;box-shadow:none !important}
html[data-scheme="dark"] body .seg:not(.seg--surface) .seg__btn:not(.seg__btn--accent){color:var(--am-ink-2) !important;font-weight:600 !important}
html[data-scheme="dark"] body .seg:not(.seg--surface) .seg__btn:not(.seg__btn--accent):hover{color:var(--am-ink) !important}
html[data-scheme="dark"] body .seg:not(.seg--surface) .seg__btn.is-on:not(.seg__btn--accent){background:#1E5E51 !important;color:#fff !important;box-shadow:none !important}

/* Dark mode audit fixes (Nov 2026). */
/* 1. Book reader: the FlipBook iframe is a light document; matching its scheme stops the browser painting a white backdrop behind it. */
html[data-scheme="dark"] body ._3d-flip-book iframe,html[data-scheme="dark"] body [class*="fb3d"] iframe{color-scheme:light}
/* 2. Every search and form hint uses the theme grey, not the browser default. */
html[data-scheme="dark"] body input::placeholder,html[data-scheme="dark"] body textarea::placeholder{color:var(--am-ink-3);opacity:1}
/* 3. Reading tools: the open tool is clearly marked; text size buttons stand out from the panel. */
html[data-scheme="dark"] body .tool.is-on{background:rgba(166,219,192,.16) !important;color:var(--am-accent-text) !important;box-shadow:inset 0 0 0 1px rgba(166,219,192,.35) !important}
html[data-scheme="dark"] body .sheet__size a,html[data-scheme="dark"] body .sheet__size button{background:var(--am-field) !important;border-color:var(--am-line-2) !important;color:var(--am-ink) !important}
html[data-scheme="dark"] body .sheet__size a:hover,html[data-scheme="dark"] body .sheet__size button:hover{border-color:rgba(166,219,192,.55) !important}
/* 4. Quick reads chip border visible. */
html[data-scheme="dark"] body .chip--quick{border-color:rgba(166,219,192,.45) !important}
/* 5. Footer: the link for the current page stands out. */
html[data-scheme="dark"] body .ftr__col a[aria-current="page"],html[data-scheme="dark"] body .ftr__col a.is-active,html[data-scheme="dark"] body .ftr__col .current-menu-item>a{color:#fff !important;font-weight:600}

/* Dark mode: everything that is a white card in light mode uses the card colour (ink green #0E1513). */
html[data-scheme="dark"] body .btn--ghost:not(:hover){background:#0E1513 !important}
html[data-scheme="dark"] body .hero .hadith{background:linear-gradient(#A6DBC0,#A6DBC0) left 0 top 28px/3px calc(100% - 56px) no-repeat,#0E1513 !important}
html[data-scheme="dark"] body .post-row--featured{background:#0E1513 !important}
html[data-scheme="dark"] body .salawat-counter .sq-personal{background:#0E1513 !important}

/* Homepage hero, dark mode: Lifted. (Light mode uses the original pale sage.) */
html[data-scheme="dark"] body .hero::before{background:radial-gradient(55% 75% at 82% 38%,rgba(76,197,147,.2),transparent 70%),linear-gradient(165deg,#24392F 0%,#1A2B24 100%) !important;border-color:rgba(166,219,192,.16) !important}
html[data-scheme="dark"] body .hero::after{opacity:.12 !important}
html[data-scheme="dark"] body .hero .hero__text{color:#C2D0C9 !important}
html[data-scheme="dark"] body .hero .hero__note{color:#A9C9BB !important}
html[data-scheme="dark"] body .hero .chip{background:rgba(159,211,184,.12) !important;color:#CFE9DC !important;border-color:rgba(159,211,184,.28) !important}

/* Dark mode: hero-style panels share the hero's "Lifted" look (a step lighter than the page, soft green glow, soft outline). */
html[data-scheme="dark"] body .salawat-counter .sq-card{background:radial-gradient(55% 75% at 82% 38%,rgba(76,197,147,.2),transparent 70%),linear-gradient(165deg,#24392F 0%,#1A2B24 100%) !important;border-color:rgba(166,219,192,.16) !important}
html[data-scheme="dark"] body .mag-hero{background:radial-gradient(55% 75% at 82% 38%,rgba(76,197,147,.2),transparent 70%),linear-gradient(165deg,#24392F 0%,#1A2B24 100%) !important;border-color:rgba(166,219,192,.16) !important}
html[data-scheme="dark"] body .courses__tab.is-on{background:radial-gradient(55% 75% at 82% 38%,rgba(76,197,147,.2),transparent 70%),linear-gradient(165deg,#24392F 0%,#1A2B24 100%) !important;border-color:rgba(166,219,192,.16) !important}
html[data-scheme="dark"] body .pp .pp-end{background:radial-gradient(55% 75% at 82% 38%,rgba(76,197,147,.2),transparent 70%),linear-gradient(165deg,#24392F 0%,#1A2B24 100%) !important;box-shadow:inset 0 0 0 1px rgba(166,219,192,.16),0 40px 80px -46px rgba(0,0,0,.95) !important}
html[data-scheme="dark"] body .hadith{--hd-1:#24392F;--hd-2:#1A2B24;--hd-glow:rgba(76,197,147,.2);--hd-border:rgba(166,219,192,.16)}
html[data-scheme="dark"] body .salawat-counter.salawat-counter:not(.salawat-theme-light){--sq-caption:#BCD7CB}
html[data-scheme="dark"] body .mag-hero .mag-hero__meta{color:#BCD3C9 !important}

/* Register form, dark mode: the submit panel (reCAPTCHA + button) is a card like the other sections. */
html[data-scheme="dark"] body .reg-sec--submit{background:var(--am-surface) !important;border-color:var(--am-line) !important}

/* Articles search bar, dark mode: reads as a raised field, clear focus ring, grouped toggle. */
html[data-scheme="dark"] body .archive__bar{border-color:rgba(220,240,230,.2) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 18px 36px -24px rgba(0,0,0,.8) !important}
html[data-scheme="dark"] body .archive__bar:focus-within{border-color:rgba(166,219,192,.55) !important;box-shadow:0 0 0 3px rgba(166,219,192,.14),inset 0 1px 0 rgba(255,255,255,.04) !important}
html[data-scheme="dark"] body .archive__search svg{color:var(--am-ink-2) !important}
html[data-scheme="dark"] body .archive__bar .seg:not(.seg--surface){box-shadow:inset 0 0 0 1px rgba(220,240,230,.08) !important}

/* Header bar, light mode: frosted white glass. */
html:not([data-scheme="dark"]) body .hdr .hdr__bar{background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.84) 100%) !important;-webkit-backdrop-filter:blur(24px) saturate(160%) !important;backdrop-filter:blur(24px) saturate(160%) !important;border-color:rgba(255,255,255,.9) !important;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(14,38,34,.05),0 10px 28px -18px rgba(9,31,26,.35) !important}
/* Dark/light switch, dark mode: the active knob is ink green (header colour) with a mint moon. */
html[data-scheme="dark"] body .hdr .hdr__bar .iconbtn[data-scheme-toggle]::before,html[data-scheme="dark"] body .hdr .hdr__menu .menu-tool[data-scheme-toggle]::before{background:#0E1513 !important;box-shadow:0 1px 3px rgba(0,0,0,.4) !important}
html[data-scheme="dark"] body .hdr .hdr__bar .iconbtn[data-scheme-toggle] svg.icon-moon,html[data-scheme="dark"] body .hdr .hdr__menu .menu-tool[data-scheme-toggle] svg.icon-moon{color:#A6DBC0 !important;opacity:1}

/* Dark mode: an open header button (menu) turns the same solid green as in light mode. */
html[data-scheme="dark"] body .hdr .hdr__bar .iconbtn[aria-expanded="true"]{background:#1E5E51 !important;border-color:#1E5E51 !important;color:#fff !important}

/* Course tabs on phones (860px and under), dark mode: same look as the other dark toggles. */
@media (max-width:860px){
	html[data-scheme="dark"] body .courses__tabs{background:var(--am-surface) !important;border-color:transparent !important;box-shadow:none !important}
	html[data-scheme="dark"] body .courses__tabs .courses__tab{color:var(--am-ink-2) !important}
	html[data-scheme="dark"] body .courses__tabs .courses__tab .courses__tab-icon{color:var(--am-ink-2) !important}
	html[data-scheme="dark"] body .courses__tabs .courses__tab:not(.is-on):hover,html[data-scheme="dark"] body .courses__tabs .courses__tab:not(.is-on):hover .courses__tab-icon{color:var(--am-ink) !important}
	html[data-scheme="dark"] body .courses__tabs .courses__tab.is-on{background:#1E5E51 !important;border-color:transparent !important;box-shadow:none !important;color:#fff !important}
	html[data-scheme="dark"] body .courses__tabs .courses__tab.is-on .courses__tab-icon{color:#fff !important}
}