:root {
    --forest: #176b45;
    --deep: #0d4d32;
    --deepest: #073522;
    --fresh: #45a66f;
    --mint: #eaf6ef;
    --cream: #fbf8f0;
    --gold: #d7a83d;
    --charcoal: #1d2923;
    --slate: #66736c;
    --border: #dde8e1;
    --white: #fff;
    --rose: #f7e8e2;
    --container: 1240px;
    --serif: "Lora", Georgia, serif;
    --sans: "DM Sans", Arial, sans-serif;
    --shadow: 0 20px 55px rgba(13, 77, 50, .1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--charcoal); background: var(--white); font-family: var(--sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
body.menu-open, body.search-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
p, h1, h2, h3, h4, blockquote { margin-top: 0; }
h1, h2, h3 { line-height: 1.12; }
::selection { color: #fff; background: var(--forest); }
.container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }
.narrow { width: min(calc(100% - 48px), 850px); }
.section { padding: 112px 0; }
.sr-only { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }
.skip-link { position: fixed; z-index: 9999; top: 8px; left: 8px; padding: 10px 14px; color: #fff; background: var(--deep); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: .12s; }
.section-kicker { display: inline-block; margin-bottom: 20px; color: var(--forest); font-size: .73rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.section-kicker.light, .eyebrow.light { color: #b9dfc9; }
.eyebrow { color: var(--forest); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 14px; padding: 0 22px; border: 1px solid transparent; border-radius: 11px; font-size: .88rem; font-weight: 700; transition: .25s ease; }
.button svg { width: 17px; }
.button-primary { color: #fff; background: var(--deep); box-shadow: 0 12px 25px rgba(13, 77, 50, .14); }
.button-primary:hover { background: var(--forest); transform: translateY(-2px); }
.button-light { color: var(--deep); background: #fff; }
.button-light:hover { color: #fff; background: var(--gold); }
.button-outline { border-color: #bccdc3; background: transparent; }
.button-outline:hover { color: #fff; border-color: var(--deep); background: var(--deep); }
.button-large { min-height: 56px; padding-inline: 28px; }
.text-link { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; }
.text-link > span { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--border); border-radius: 50%; transition: .25s ease; }
.text-link svg { width: 17px; }
.text-link:hover > span { color: #fff; border-color: var(--deep); background: var(--deep); transform: translateX(3px); }
.circle-link { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; border: 1px solid var(--border); border-radius: 50%; transition: .25s ease; }
.circle-link svg { width: 18px; }
.circle-link:hover { color: #fff; border-color: var(--forest); background: var(--forest); transform: rotate(8deg); }
.tag { display: inline-flex; padding: 6px 11px; color: var(--deep); background: var(--mint); border-radius: 100px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.answered { display: inline-flex; align-items: center; gap: 7px; color: var(--forest); font-size: .74rem; font-weight: 700; }
.answered > span { width: 7px; height: 7px; border-radius: 50%; background: var(--fresh); box-shadow: 0 0 0 4px rgba(69,166,111,.13); }

/* Header */
.topbar { color: rgba(255,255,255,.78); background: var(--deepest); font-size: .72rem; }
.topbar-inner { display: flex; min-height: 35px; align-items: center; justify-content: space-between; }
.topbar p { display: flex; align-items: center; margin: 0; }
.topbar-dot { width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; background: var(--gold); }
.topbar-date { gap: 12px; }
.topbar-divider { width: 1px; height: 13px; background: rgba(255,255,255,.25); }
.site-header { position: sticky; z-index: 100; top: 0; background: rgba(255,255,255,.93); border-bottom: 1px solid rgba(221,232,225,.7); backdrop-filter: blur(16px); transition: box-shadow .25s; }
.site-header.is-scrolled { box-shadow: 0 8px 30px rgba(18,50,34,.07); }
.header-inner { display: flex; min-height: 82px; align-items: center; gap: 28px; }
.brand { display: inline-flex; flex-shrink: 0; align-items: center; gap: 11px; }
.brand-mark { position: relative; display: block; width: 35px; height: 30px; }
.brand-mark > span { position: absolute; bottom: 2px; width: 17px; height: 23px; border: 3px solid var(--forest); }
.brand-mark > span:first-child { left: 1px; border-right-width: 1.5px; border-radius: 13px 2px 7px 13px; transform: rotate(-8deg); }
.brand-mark > span:nth-child(2) { right: 1px; border-left-width: 1.5px; border-radius: 2px 13px 13px 7px; transform: rotate(8deg); }
.brand-mark b { position: absolute; top: 0; right: 2px; width: 8px; height: 8px; border: 2px solid var(--gold); border-radius: 50%; }
.brand-name { font-size: 1.08rem; font-weight: 700; letter-spacing: -.04em; }
.brand-name span { color: var(--forest); }
.desktop-nav { display: flex; align-items: stretch; justify-content: center; align-self: stretch; gap: 26px; margin-left: auto; }
.desktop-nav a { position: relative; display: flex; align-items: center; color: #47534d; font-size: .79rem; font-weight: 600; }
.desktop-nav a::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--forest); content: ""; transform: scaleX(0); transition: transform .25s; }
.desktop-nav a:hover, .desktop-nav a.is-active { color: var(--deep); }
.desktop-nav a.is-active::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-button { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: transparent; }
.icon-button:hover { background: var(--mint); }
.icon-button svg { width: 20px; }
.menu-toggle { display: none; }
.header-cta { min-height: 46px; padding-inline: 18px; font-size: .76rem; }
.mobile-drawer { position: fixed; z-index: 310; top: 0; bottom: 0; left: 0; width: min(410px, 90vw); padding: 24px 30px 36px; color: #fff; background: var(--deepest); transform: translateX(-105%); transition: transform .35s ease; }
.menu-open .mobile-drawer { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 35px; border-bottom: 1px solid rgba(255,255,255,.12); }
.drawer-head .brand-mark > span { border-color: #fff; }.drawer-head .brand-name span { color: #9ed5b6; }.drawer-head .icon-button { color: #fff; }
.mobile-drawer nav { display: flex; flex-direction: column; padding: 20px 0; }
.mobile-drawer nav a { display: flex; align-items: center; gap: 18px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-family: var(--serif); font-size: 1.3rem; }
.mobile-drawer nav a span { color: #8dbba0; font: 600 .65rem var(--sans); }
.drawer-note { margin-top: 18px; padding: 20px; background: rgba(255,255,255,.07); border-radius: 14px; }
.drawer-note p { margin-bottom: 8px; color: rgba(255,255,255,.65); font-size: .78rem; }
.drawer-note a { display: flex; align-items: center; justify-content: space-between; font-weight: 700; }
.drawer-note svg { width: 17px; }
.drawer-backdrop { position: fixed; z-index: 300; inset: 0; visibility: hidden; background: rgba(5,30,18,.55); opacity: 0; transition: .3s; }
.menu-open .drawer-backdrop { visibility: visible; opacity: 1; }
.search-overlay { position: fixed; z-index: 400; inset: 0; display: grid; visibility: hidden; place-items: center; color: #fff; background: rgba(7,53,34,.97); opacity: 0; transition: .3s; }
.search-open .search-overlay { visibility: visible; opacity: 1; }
.search-close { position: absolute; top: 34px; right: 40px; color: #fff; border: 1px solid rgba(255,255,255,.2); }
.search-panel { width: min(900px, calc(100% - 48px)); }
.big-search label { display: block; margin-bottom: 30px; font: 500 clamp(2rem,4vw,4.4rem)/1.1 var(--serif); }
.big-search div { display: flex; border-bottom: 1px solid rgba(255,255,255,.4); }
.big-search input { width: 100%; padding: 18px 0; color: #fff; border: 0; outline: 0; background: transparent; font-size: 1.2rem; }
.big-search input::placeholder { color: rgba(255,255,255,.45); }
.big-search button { width: 60px; color: #fff; border: 0; background: transparent; }
.popular-searches { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 25px; color: rgba(255,255,255,.65); font-size: .8rem; }
.popular-searches a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.35); }

/* Home hero */
.hero { position: relative; overflow: hidden; }
.home-hero { min-height: 760px; background: linear-gradient(120deg, #f7fbf8 0%, var(--cream) 62%, #f5eddb 100%); }
.hero-grid-lines { position: absolute; inset: 0; background-image: linear-gradient(90deg, transparent calc(25% - 1px), rgba(13,77,50,.07) 25%, transparent calc(25% + 1px), transparent calc(50% - 1px), rgba(13,77,50,.07) 50%, transparent calc(50% + 1px), transparent calc(75% - 1px), rgba(13,77,50,.07) 75%, transparent calc(75% + 1px)); }
.hero-layout { position: relative; display: grid; min-height: 670px; grid-template-columns: .96fr 1.04fr; align-items: center; gap: 70px; padding-top: 30px; padding-bottom: 100px; }
.hero-copy { position: relative; z-index: 2; padding-left: 50px; }
.hero-copy h1 { max-width: 640px; margin-bottom: 26px; font: 600 clamp(3.3rem,3vw,5.6rem)/.98 var(--serif); letter-spacing: -.06em; }
.hero-copy h1 em, .inner-hero h1 em { color: var(--forest); font-weight: 500; }
.hero-copy > p { max-width: 550px; margin-bottom: 32px; color: var(--slate); font-size: 1.03rem; }
.hero-actions { display: flex; align-items: center; gap: 28px; }
.trust-line { display: flex; align-items: center; gap: 14px; margin-top: 42px; }
.trust-line p { margin: 0; color: var(--slate); font-size: .7rem; line-height: 1.4; }.trust-line strong { color: var(--charcoal); }
.avatar-stack { display: flex; }
.avatar-stack span { display: grid; width: 34px; height: 34px; margin-left: -7px; place-items: center; color: #fff; border: 2px solid #fff; border-radius: 50%; background: var(--deep); font-size: .55rem; font-weight: 700; }.avatar-stack span:first-child { margin-left: 0; background: var(--gold); }.avatar-stack span:last-child { background: var(--fresh); }
.hero-art { position: relative; height: 555px; border-radius: 220px 220px 24px 24px; background: linear-gradient(155deg,#cbe8d7 0%,#8abda1 45%,#4d8c6a 100%); box-shadow: var(--shadow); }
.hero-art::before { position: absolute; inset: 20px; border: 1px solid rgba(255,255,255,.42); border-radius: inherit; content: ""; }
.hero-art-number { position: absolute; top: 32px; left: 44px; color: rgba(13,77,50,.45); font-size: .7rem; font-weight: 700; }
.art-orbit { position: absolute; border: 1px solid rgba(255,255,255,.38); border-radius: 50%; }.orbit-one { width: 290px; height: 290px; top: 80px; left: 125px; }.orbit-two { width: 390px; height: 390px; top: 30px; left: 75px; }
.art-chat { position: absolute; z-index: 4; display: flex; align-items: center; gap: 9px; padding: 11px 15px; border-radius: 12px; background: rgba(255,255,255,.92); box-shadow: 0 10px 30px rgba(13,77,50,.14); font-size: .68rem; font-weight: 700; }.art-chat svg { width: 16px; }.chat-one { top: 105px; right: -18px; }.chat-two { bottom: 102px; left: -28px; }.chat-two svg { color: var(--gold); }
.book-scene { position: absolute; z-index: 2; right: 54px; bottom: 70px; left: 54px; height: 165px; perspective: 500px; }
.book-page { position: absolute; bottom: 0; width: 50%; height: 145px; padding: 43px 40px; background: #fffcf4; box-shadow: 0 22px 30px rgba(3,43,25,.24); }.book-page span { display: block; height: 2px; margin-bottom: 12px; background: #c9dacd; }.page-left { left: 0; border-radius: 8px 2px 14px 22px; transform: rotateY(8deg) rotateZ(5deg); transform-origin: right bottom; }.page-right { right: 0; border-radius: 2px 8px 22px 14px; transform: rotateY(-8deg) rotateZ(-5deg); transform-origin: left bottom; }.book-spine { position: absolute; z-index: 2; bottom: 0; left: 50%; width: 3px; height: 140px; background: #bdcfc1; transform: translateX(-50%); }.bookmark { position: absolute; z-index: 3; bottom: -16px; left: 55%; width: 15px; height: 70px; background: var(--gold); transform: rotate(-3deg); }
.lamp { position: absolute; z-index: 3; top: 125px; left: 50%; width: 130px; height: 230px; transform: translateX(-50%); }.lamp-shade { position: absolute; z-index: 2; top: 0; left: 20px; width: 90px; height: 65px; border-radius: 60px 60px 10px 10px; background: var(--deep); }.lamp-shade::after { position: absolute; right: 8px; bottom: -13px; left: 8px; height: 17px; border-radius: 50%; background: #ffe89a; content: ""; box-shadow: 0 15px 50px 15px rgba(255,229,143,.55); }.lamp-neck { position: absolute; top: 55px; left: 62px; width: 6px; height: 145px; background: var(--deepest); }.lamp-base { position: absolute; bottom: 15px; left: 32px; width: 70px; height: 15px; border-radius: 50%; background: var(--deepest); }
.art-caption { position: absolute; right: 35px; bottom: 25px; color: rgba(255,255,255,.7); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.hero-side-label { position: absolute; top: 0; bottom: 0; left: 0; display: flex; width: 42px; align-items: center; justify-content: space-around; border-right: 1px solid rgba(13,77,50,.09); writing-mode: vertical-rl; font-size: .62rem; font-weight: 700; letter-spacing: .08em; }.hero-side-label i { width: 1px; height: 55px; background: var(--forest); }

/* Prayer strip */
.prayer-strip-section { position: relative; z-index: 5; margin-top: -92px; }
.prayer-card { overflow: hidden; color: #fff; border-radius: 20px; background: var(--deep); box-shadow: 0 28px 70px rgba(13,77,50,.22); }
.prayer-card-head { display: flex; min-height: 105px; align-items: center; justify-content: space-between; padding: 20px 32px; border-bottom: 1px solid rgba(255,255,255,.12); }
.prayer-card-head .section-kicker { margin-bottom: 4px; }.prayer-card-head h2 { margin: 0; font-family: var(--serif); font-size: 1.28rem; }.prayer-date { display: flex; flex-direction: column; text-align: right; }.prayer-date strong { font-size: .78rem; }.prayer-date span { color: rgba(255,255,255,.58); font-size: .66rem; }
.prayer-times { display: grid; grid-template-columns: repeat(6,1fr) 1.15fr; }
.prayer-time, .prayer-more { position: relative; display: flex; min-height: 128px; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid rgba(255,255,255,.11); }
.prayer-time svg { width: 20px; margin-bottom: 9px; color: #acd7bf; }.prayer-time span { color: rgba(255,255,255,.65); font-size: .68rem; }.prayer-time strong { font: 500 1.55rem var(--serif); }.prayer-time.is-next { color: var(--deep); background: var(--gold); }.prayer-time.is-next svg,.prayer-time.is-next span { color: var(--deep); }.next-label { position: absolute; top: 8px; left: 50%; padding: 2px 8px; border-radius: 30px; background: rgba(255,255,255,.8); font-size: .55rem!important; font-weight: 700; text-transform: uppercase; transform: translateX(-50%); }
.prayer-more { flex-direction: row; gap: 16px; padding: 15px; border-right: 0; font-size: .76rem; font-weight: 700; line-height: 1.35; }.prayer-more svg { width: 18px; }.prayer-more:hover { background: rgba(255,255,255,.07); }

/* Shared sections */
.section-heading { margin-bottom: 48px; }.section-heading h2 { margin: 0; font: 600 clamp(2.2rem,3.8vw,4rem)/1.02 var(--serif); letter-spacing: -.05em; }.split-heading { display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 70px; }.split-heading > p { max-width: 500px; margin: 0 0 4px; color: var(--slate); }.inline-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.quick-access-section { padding-top: 150px; }.quick-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.quick-card { position: relative; display: flex; min-height: 315px; flex-direction: column; justify-content: space-between; padding: 30px; overflow: hidden; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transition: .35s ease; }.quick-card::after { position: absolute; right: -70px; bottom: -70px; width: 160px; height: 160px; border: 1px solid currentColor; border-radius: 50%; content: ""; opacity: .13; }.quick-card:hover { z-index: 2; color: #fff; background: var(--deep); transform: translateY(-8px); box-shadow: var(--shadow); }.quick-number { align-self: flex-end; color: var(--slate); font-size: .62rem; }.quick-icon { display: grid; width: 65px; height: 65px; place-items: center; border: 1px solid currentColor; border-radius: 50%; }.quick-icon svg { width: 26px; }.quick-card strong, .quick-card small { display: block; }.quick-card strong { margin-bottom: 10px; font: 600 1.42rem var(--serif); }.quick-card small { max-width: 205px; color: var(--slate); font-size: .76rem; line-height: 1.5; }.quick-card:hover small,.quick-card:hover .quick-number { color: rgba(255,255,255,.7); }.quick-arrow { position: absolute; right: 25px; bottom: 28px; width: 19px; }
.quick-cream { background: var(--cream); }.quick-mint { background: var(--mint); }.quick-gold { background: #fcf6e7; }

.questions-section { background: #f8faf8; }.questions-list { border-top: 1px solid #cedbd3; }
.question-row { display: grid; grid-template-columns: 45px 95px 1fr 140px 46px; align-items: center; gap: 22px; padding: 28px 8px; border-bottom: 1px solid #cedbd3; }.question-index { color: #91a098; font-size: .65rem; }.question-row h3 { margin-bottom: 6px; font: 600 1.18rem var(--serif); }.question-row h3 a:hover { color: var(--forest); }.question-row p { max-width: 700px; margin: 0; color: var(--slate); font-size: .76rem; }.row-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }.row-meta small { color: #8a9890; font-size: .65rem; }

.featured-articles { display: grid; grid-template-columns: 1.12fr .88fr; gap: 26px; }.article-side-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }.article-card { min-width: 0; border: 1px solid var(--border); border-radius: 17px; overflow: hidden; background: #fff; transition: transform .3s, box-shadow .3s; }.article-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }.article-visual { position: relative; display: grid; height: 180px; overflow: hidden; place-items: center; color: var(--deep); }.article-visual::before { position: absolute; inset: 0; background-image: linear-gradient(90deg,transparent 49.7%,rgba(13,77,50,.1) 50%,transparent 50.3%),linear-gradient(0deg,transparent 49.7%,rgba(13,77,50,.1) 50%,transparent 50.3%); content: ""; }.tone-sage { background: #bddac8; }.tone-cream { background: #f3ead7; }.tone-gold { background: #ead29a; }.tone-forest { color: #fff!important; background: #28724f; }.tone-mint { background: #dff2e7; }.tone-rose { background: var(--rose); }.visual-ring { position: absolute; width: 130px; height: 130px; border: 1px solid currentColor; border-radius: 50%; opacity: .3; }.article-visual-icon { position: relative; z-index: 2; width: 52px; stroke-width: 1.3; }.visual-label { position: absolute; right: 15px; bottom: 10px; font-size: .48rem; letter-spacing: .1em; text-transform: uppercase; writing-mode: vertical-rl; }.article-card-body { padding: 20px; }.meta-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; color: #8a968f; font-size: .65rem; }.article-card h3 { margin-bottom: 10px; font: 600 1.07rem/1.3 var(--serif); }.article-card h3 a:hover { color: var(--forest); }.article-card-body > p { display: -webkit-box; margin-bottom: 20px; overflow: hidden; color: var(--slate); font-size: .72rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.card-footer { display: flex; align-items: center; justify-content: space-between; color: #8a968f; font-size: .62rem; }.card-footer .circle-link { width: 36px; height: 36px; flex-basis: 36px; }.article-card-featured { display: grid; grid-template-rows: 1.12fr .88fr; }.article-card-featured .article-visual { height: auto; min-height: 320px; }.article-card-featured .article-visual-icon { width: 82px; }.article-card-featured .visual-ring { width: 230px; height: 230px; }.article-card-featured .article-card-body { padding: 30px; }.article-card-featured h3 { font-size: 1.75rem; }

.daily-prayer-section { background: var(--cream); }.daily-prayer { position: relative; display: grid; min-height: 545px; grid-template-columns: .32fr .68fr; overflow: hidden; color: #fff; border-radius: 22px; background: var(--deep); }.daily-prayer::after { position: absolute; right: -130px; bottom: -180px; width: 500px; height: 500px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; content: ""; }.daily-prayer-aside { position: relative; display: flex; z-index: 1; flex-direction: column; justify-content: space-between; padding: 45px; border-right: 1px solid rgba(255,255,255,.12); }.prayer-ornament { display: grid; width: 115px; height: 115px; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; }.prayer-ornament svg { width: 46px; stroke-width: 1.2; }.daily-prayer-aside > div { display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.6); font-size: .65rem; }.daily-prayer-aside a { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; }.daily-prayer-aside svg { width: 15px; }.daily-prayer-content { position: relative; z-index: 2; padding: 55px 70px; }.daily-prayer-content h2 { margin: 8px 0 28px; font: 500 1.5rem var(--serif); }.arabic-text { margin: 0; font-family: "Noto Naskh Arabic", serif; line-height: 1.9; }.daily-prayer-content .arabic-text { margin-bottom: 17px; color: #fff; font-size: clamp(2.25rem,2.5vw,3.7rem); text-align: right; }.latin-text { color: #b9d7c6; font-style: italic; }.translation { color: var(--slate); }.daily-prayer-content .translation { max-width: 720px; margin: 25px 0 10px; color: rgba(255,255,255,.85); font: italic 500 1.25rem/1.6 var(--serif); }.source-label { display: inline-flex; margin-top: 8px; color: #85928b; font-size: .67rem; }.daily-prayer-content .source-label { color: #a8c6b5; }.content-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }.content-actions button,.content-actions a { display: inline-flex; min-height: 42px; align-items: center; gap: 8px; padding: 0 14px; color: inherit; border: 1px solid currentColor; border-radius: 9px; background: transparent; font-size: .7rem; font-weight: 700; opacity: .78; }.content-actions svg { width: 15px; }.content-actions button:hover,.content-actions a:hover { opacity: 1; }

.hadith-preview-grid { display: grid; grid-template-columns: .42fr .58fr; align-items: center; gap: 90px; }.hadith-heading h2 { margin-bottom: 25px; font: 600 clamp(2.4rem,4vw,4rem)/1.05 var(--serif); }.hadith-heading p { max-width: 410px; margin-bottom: 30px; color: var(--slate); }.hadith-quote { position: relative; margin: 0; padding: 65px; border: 1px solid var(--border); border-radius: 180px 20px 20px 20px; background: var(--mint); }.quote-mark { display: block; color: var(--gold); font: 500 5rem/.5 var(--serif); }.hadith-quote > p { margin: 35px 0 50px; font: italic 500 clamp(1.8rem,1vw,1rem)/1.35 var(--serif); }.hadith-quote footer { display: flex; align-items: end; justify-content: space-between; gap: 20px; }.hadith-quote footer span:first-child { display: flex; flex-direction: column; }.hadith-quote footer strong { font-size: .78rem; }.hadith-quote footer small { color: var(--slate); font-size: .65rem; }.verified-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--forest); font-size: .65rem; font-weight: 700; }.verified-badge svg { width: 15px; }

/* Footer */
.prefooter-cta { position: relative; overflow: hidden; color: #fff; background: var(--forest); }.prefooter-grid { position: relative; display: grid; min-height: 340px; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; }.prefooter-grid h2 { max-width: 600px; margin: 0; font: 500 clamp(2.3rem,2.5vw,4.2rem)/1.08 var(--serif); }.prefooter-grid > div:nth-child(2) { position: relative; z-index: 2; }.prefooter-grid p { max-width: 520px; color: rgba(255,255,255,.7); }.cta-orbit { position: absolute; right: -80px; width: 330px; height: 330px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; }.cta-orbit::after { position: absolute; inset: 60px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; content: ""; }
.site-footer { padding-top: 75px; color: #fff; background: var(--deepest); }.footer-grid { display: grid; grid-template-columns: 1.5fr .7fr .7fr 1fr; gap: 65px; padding-bottom: 65px; }.brand-light .brand-name span { color: #9bd4b4; }.brand-light .brand-mark span { border-color: #fff; }.footer-brand > p { max-width: 330px; margin: 22px 0; color: rgba(255,255,255,.58); font-size: .78rem; }.socials { display: flex; gap: 8px; }.socials a { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; }.socials svg { width: 16px; }.footer-grid > div:not(:first-child) { display: flex; flex-direction: column; align-items: flex-start; }.footer-grid h3 { margin-bottom: 20px; font-size: .78rem; }.footer-grid > div > a { margin-bottom: 9px; color: rgba(255,255,255,.58); font-size: .72rem; }.footer-grid > div > a:hover { color: #fff; }.footer-newsletter p { color: rgba(255,255,255,.55); font-size: .7rem; }.newsletter-form { display: flex; width: 100%; border-bottom: 1px solid rgba(255,255,255,.25); }.newsletter-form input { width: 100%; padding: 10px 0; color: #fff; border: 0; outline: none; background: transparent; font-size: .75rem; }.newsletter-form button { color: #fff; border: 0; background: transparent; }.newsletter-form svg { width: 17px; }.footer-bottom { display: flex; min-height: 75px; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.4); font-size: .63rem; }.footer-bottom p { margin: 0; }.mobile-bottom-nav { display: none; }
.toast { position: fixed; z-index: 500; right: 25px; bottom: 25px; display: flex; visibility: hidden; min-width: 330px; align-items: center; gap: 13px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 13px; background: #fff; box-shadow: var(--shadow); opacity: 0; transform: translateY(20px); transition: .3s; }.toast.is-visible { visibility: visible; opacity: 1; transform: none; }.toast-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; color: #fff; border-radius: 50%; background: var(--forest); }.toast-icon svg { width: 16px; }.toast p { display: flex; flex: 1; flex-direction: column; margin: 0; line-height: 1.35; }.toast strong { font-size: .75rem; }.toast small { color: var(--slate); font-size: .65rem; }.toast button { border: 0; background: transparent; }.toast button svg { width: 16px; }

/* Inner pages */
.inner-hero { position: relative; overflow: hidden; }.inner-hero-grid { display: grid; min-height: 490px; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 90px; }.inner-hero h1 { max-width: 790px; margin: 0; font: 600 clamp(3.2rem,3.5vw,6.2rem)/.98 var(--serif); letter-spacing: -.06em; }.inner-hero-grid > div:last-child > p { max-width: 500px; margin-bottom: 32px; color: var(--slate); }.page-number { position: absolute; right: 4%; bottom: 25px; color: rgba(13,77,50,.15); font-size: 5rem; font-weight: 700; line-height: 1; }.page-number.light { color: rgba(255,255,255,.13); }
.journal-hero { background: var(--cream); }.compact-search { display: flex; min-height: 52px; align-items: center; padding: 0 6px 0 16px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }.compact-search > svg { width: 18px; color: var(--slate); }.compact-search input { min-width: 0; flex: 1; padding: 0 12px; border: 0; outline: 0; background: transparent; font-size: .76rem; }.compact-search button { min-height: 38px; padding: 0 17px; color: #fff; border: 0; border-radius: 8px; background: var(--deep); font-size: .72rem; font-weight: 700; }
.listing-section { padding-top: 80px; }.filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 55px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }.filter-bar > span { color: var(--slate); font-size: .72rem; }.filter-bar > div { display: flex; flex-wrap: wrap; gap: 4px; }.filter-bar button { padding: 8px 13px; color: var(--slate); border: 0; border-radius: 20px; background: transparent; font-size: .7rem; font-weight: 700; }.filter-bar button.is-active,.filter-bar button:hover { color: #fff; background: var(--deep); }.filter-bar.compact { margin: 0; padding: 0; border: 0; }
.featured-story { display: grid; grid-template-columns: 1fr 1fr; gap: 65px; margin-bottom: 90px; padding: 22px; border: 1px solid var(--border); border-radius: 20px; }.featured-story-visual { position: relative; display: grid; min-height: 430px; overflow: hidden; place-items: center; border-radius: 14px; }.featured-story-visual > svg { position: relative; z-index: 2; width: 85px; stroke-width: 1.2; }.featured-story-visual .visual-ring { width: 250px; height: 250px; }.featured-story-visual small { position: absolute; bottom: 20px; left: 20px; font-size: .55rem; font-weight: 700; letter-spacing: .1em; }.featured-story > div { align-self: center; padding-right: 40px; }.featured-story h2 { margin: 18px 0; font: 600 clamp(2rem,3.5vw,3.5rem)/1.12 var(--serif); }.featured-story p { margin-bottom: 28px; color: var(--slate); }.article-list-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 30px; }.article-list-heading h2 { margin: 0; font: 600 2rem var(--serif); }.article-list-heading span { color: var(--slate); font-size: .7rem; }.article-list-heading strong { color: var(--deep); }.article-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }.article-grid .article-visual { height: 240px; }.article-grid .article-card-body { padding: 24px; }.article-grid .article-card h3 { font-size: 1.25rem; }.empty-message { display: none; padding: 40px; color: var(--slate); border: 1px dashed var(--border); border-radius: 12px; text-align: center; }.empty-message.is-visible { display: block; }.pagination { display: flex; justify-content: center; gap: 7px; margin-top: 55px; }.pagination button { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: #fff; font-size: .72rem; }.pagination button.is-active,.pagination button:hover { color: #fff; border-color: var(--deep); background: var(--deep); }.pagination svg { width: 15px; }
.detail-header { padding: 85px 0 60px; text-align: center; background: var(--cream); }.breadcrumb { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 40px; color: var(--slate); font-size: .68rem; }.breadcrumb svg { width: 13px; }.breadcrumb a:hover { color: var(--forest); }.detail-header .tag { margin-bottom: 18px; }.detail-header h1 { margin-bottom: 24px; font: 600 clamp(2.8rem,5vw,5.4rem)/1.02 var(--serif); letter-spacing: -.05em; }.detail-lead { max-width: 730px; margin: 0 auto 30px; color: var(--slate); font-size: 1.05rem; }.detail-byline,.asked-by,.author-mini { display: flex; align-items: center; }.detail-byline { justify-content: center; gap: 12px; }.avatar { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; color: #fff; border-radius: 50%; background: var(--deep); font-size: .58rem; font-weight: 700; }.avatar-large { width: 46px; height: 46px; }.avatar-xl { width: 82px; height: 82px; font-size: 1rem; }.detail-byline > span:nth-child(2),.asked-by > span:nth-child(2),.author-mini > span:nth-child(2) { display: flex; flex-direction: column; text-align: left; }.detail-byline strong,.asked-by strong { font-size: .72rem; }.detail-byline small,.asked-by small,.author-mini small { color: var(--slate); font-size: .63rem; }.reading-time { display: flex!important; flex-direction: row!important; align-items: center; gap: 6px; margin-left: 15px; color: var(--slate); font-size: .68rem; }.reading-time svg { width: 15px; }
.detail-cover-wrap { padding-top: 35px; }.detail-cover { position: relative; display: grid; height: 520px; overflow: hidden; place-items: center; border-radius: 20px; }.cover-grid { position: absolute; inset: 0; background-image: linear-gradient(90deg,transparent 24.8%,rgba(255,255,255,.22) 25%,transparent 25.2%,transparent 49.8%,rgba(255,255,255,.22) 50%,transparent 50.2%,transparent 74.8%,rgba(255,255,255,.22) 75%,transparent 75.2%); }.detail-cover .visual-ring { width: 330px; height: 330px; }.detail-cover > svg { position: relative; z-index: 2; width: 120px; stroke-width: 1; }.detail-cover > p { position: absolute; bottom: 40px; left: 45px; margin: 0; font: 500 1.2rem var(--serif); }.article-layout { display: grid; grid-template-columns: 220px minmax(0,760px); justify-content: center; gap: 70px; padding-top: 90px; padding-bottom: 120px; }.article-toc { position: sticky; top: 115px; display: flex; height: fit-content; flex-direction: column; padding-left: 18px; border-left: 1px solid var(--border); }.article-toc > span { margin-bottom: 15px; color: var(--charcoal); font-size: .72rem; font-weight: 700; }.article-toc > a { padding: 7px 0; color: var(--slate); font-size: .68rem; }.article-toc > a.is-active { color: var(--forest); font-weight: 700; }.share-rail { display: flex; gap: 6px; margin-top: 25px; }.share-rail button { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: #fff; }.share-rail svg { width: 14px; }
.prose { color: #36443c; font-size: 1rem; }.prose > p { margin-bottom: 24px; }.prose h2 { margin: 62px 0 20px; color: var(--charcoal); font: 600 2.1rem/1.2 var(--serif); }.prose h3 { color: var(--charcoal); }.dropcap::first-letter { float: left; margin: .08em .13em 0 0; color: var(--forest); font: 600 4.8rem/.75 var(--serif); }.source-quote { position: relative; margin: 50px 0; padding: 38px 42px; border-left: 4px solid var(--gold); background: var(--cream); }.source-quote span { color: var(--forest); font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.source-quote p { margin: 12px 0; font: italic 500 1.35rem/1.55 var(--serif); }.source-quote cite { color: var(--slate); font-size: .68rem; font-style: normal; }.practice-list { padding: 0; list-style: none; counter-reset: practice; }.practice-list li { position: relative; display: flex; flex-direction: column; min-height: 78px; justify-content: center; padding: 15px 15px 15px 66px; border-bottom: 1px solid var(--border); counter-increment: practice; }.practice-list li::before { position: absolute; left: 7px; display: grid; width: 38px; height: 38px; place-items: center; color: var(--forest); border: 1px solid var(--border); border-radius: 50%; content: "0" counter(practice); font-size: .63rem; font-weight: 700; }.practice-list strong { margin-bottom: 3px; color: var(--charcoal); }.practice-list span { color: var(--slate); font-size: .85rem; }.practice-box,.opinion-note,.short-answer { display: flex; gap: 22px; margin: 45px 0; padding: 30px; border-radius: 16px; background: var(--mint); }.practice-box > span,.opinion-note > span,.short-answer > span { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; color: #fff; border-radius: 50%; background: var(--forest); }.practice-box svg,.opinion-note svg,.short-answer svg { width: 20px; }.practice-box h3,.opinion-note h3,.short-answer h2 { margin: 0 0 7px; font: 600 1.25rem var(--serif); }.practice-box p,.opinion-note p,.short-answer p { margin: 0; color: var(--slate); font-size: .85rem; }.editorial-note { margin-top: 55px; padding: 25px 28px; border: 1px solid var(--border); border-radius: 12px; }.editorial-note h3 { font-size: .9rem; }.editorial-note p { margin: 0; color: var(--slate); font-size: .78rem; }.related-section { background: #f8faf8; }

/* Ask */
.ask-hero { color: #fff; background: var(--deep); }.ask-hero-grid { display: grid; min-height: 580px; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 90px; }.ask-hero h1 { margin-bottom: 25px; font: 500 clamp(3.2rem,3vw,5.5rem)/1.02 var(--serif); letter-spacing: -.05em; }.ask-hero h1 em { color: #cce9d8; }.ask-hero p { max-width: 620px; color: rgba(255,255,255,.7); }.ask-hero-cards { position: relative; height: 400px; border: 1px solid rgba(255,255,255,.14); border-radius: 50% 50% 14px 14px; background: radial-gradient(circle at 50% 40%,rgba(69,166,111,.35),transparent 60%); }.floating-question { position: absolute; display: flex; max-width: 320px; align-items: center; gap: 14px; padding: 18px; color: var(--charcoal); border-radius: 14px; background: #fff; box-shadow: 0 20px 45px rgba(0,0,0,.18); }.floating-question p { margin: 0; color: var(--charcoal); font: 500 .9rem var(--serif); }.fq-one { top: 75px; left: -25px; }.fq-two { right: -15px; bottom: 65px; display: block; }.fq-two .answered { margin-bottom: 8px; }.privacy-chip { position: absolute; right: 50%; bottom: -18px; display: flex; align-items: center; gap: 8px; padding: 10px 15px; color: var(--deep); border-radius: 30px; background: var(--gold); font-size: .68rem; font-weight: 700; transform: translateX(50%); }.privacy-chip svg { width: 16px; }
.ask-form-section { background: var(--cream); }.ask-form-layout { display: grid; grid-template-columns: .78fr 1.22fr; align-items: start; gap: 90px; }.form-intro { position: sticky; top: 120px; }.form-intro h2 { font: 600 3.4rem var(--serif); }.form-intro > p { color: var(--slate); }.form-intro ul { padding: 20px 0 0; list-style: none; }.form-intro li { display: flex; gap: 15px; margin-bottom: 22px; }.form-intro li > svg { width: 23px; color: var(--forest); }.form-intro li span { display: flex; flex-direction: column; }.form-intro li strong { font-size: .78rem; }.form-intro li small { color: var(--slate); font-size: .7rem; }.question-form { padding: 40px; border: 1px solid var(--border); border-radius: 20px; background: #fff; box-shadow: 0 25px 65px rgba(13,77,50,.07); }.question-form > label,.form-row label { display: block; margin-bottom: 22px; }.question-form label > span,.form-row label > span { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: .72rem; font-weight: 700; }.question-form label > span small { color: #98a29c; font-weight: 500; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.question-form input:not([type=checkbox]),.question-form select,.question-form textarea { width: 100%; padding: 14px 15px; border: 1px solid var(--border); border-radius: 9px; outline: none; background: #fcfdfc; font-size: .78rem; transition: .2s; }.question-form input:focus,.question-form select:focus,.question-form textarea:focus { border-color: var(--fresh); box-shadow: 0 0 0 3px rgba(69,166,111,.12); }.question-form textarea { resize: vertical; }.switch-row { display: flex!important; align-items: center; justify-content: space-between; padding: 16px; border-radius: 10px; background: var(--mint); }.switch-row > span { display: flex!important; flex-direction: column; margin: 0!important; }.switch-row input { position: absolute; opacity: 0; }.switch-row i { position: relative; width: 42px; height: 24px; border-radius: 20px; background: #aab8b0; transition: .2s; }.switch-row i::after { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; content: ""; transition: .2s; }.switch-row input:checked + i { background: var(--forest); }.switch-row input:checked + i::after { transform: translateX(18px); }.field-hint { color: var(--slate); font-size: .62rem; }.check-row { display: flex!important; align-items: flex-start; gap: 10px; }.check-row input { margin-top: 5px; accent-color: var(--forest); }.check-row span { display: block!important; margin: 0!important; color: var(--slate); font-weight: 500!important; }.question-form .button { width: 100%; }.form-disclaimer { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; color: var(--slate); font-size: .62rem; }.form-disclaimer svg { width: 14px; flex: 0 0 14px; }
.qna-library-section { background: #fff; }.library-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 35px; }.tab-switch { display: flex; padding: 4px; border-radius: 10px; background: var(--mint); }.tab-switch button { padding: 7px 11px; border: 0; border-radius: 7px; background: transparent; font-size: .65rem; }.tab-switch button.is-active { color: #fff; background: var(--deep); }.question-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }.question-card { padding: 28px; border: 1px solid var(--border); border-radius: 16px; }.question-card-top,.question-card-bottom { display: flex; align-items: center; justify-content: space-between; }.question-card h3 { margin: 25px 0 12px; font: 600 1.35rem/1.3 var(--serif); }.question-card > p { color: var(--slate); font-size: .78rem; }.question-card-bottom { margin-top: 25px; padding-top: 18px; border-top: 1px solid var(--border); }.author-mini { gap: 8px; }.author-mini .avatar { width: 33px; height: 33px; }.author-mini strong { font-size: .65rem; }.question-card-bottom > a { display: flex; align-items: center; gap: 7px; color: var(--forest); font-size: .67rem; font-weight: 700; }.question-card-bottom > a svg { width: 14px; }
.answer-header { padding: 80px 0 65px; background: var(--cream); }.answer-header .breadcrumb { justify-content: flex-start; }.answer-status { display: flex; gap: 12px; margin-bottom: 20px; }.answer-header h1 { margin-bottom: 30px; font: 600 clamp(2.6rem,4.5vw,4.6rem)/1.08 var(--serif); }.asked-by { gap: 10px; }.answer-layout { display: grid; grid-template-columns: 260px minmax(0,760px); justify-content: center; gap: 70px; padding-top: 80px; padding-bottom: 120px; }.answer-aside { position: sticky; top: 115px; height: fit-content; }.reviewer-card { display: flex; flex-direction: column; align-items: center; padding: 28px; border: 1px solid var(--border); border-radius: 16px; text-align: center; }.reviewer-card .avatar { margin-bottom: 15px; }.reviewer-card h3 { margin: 5px 0; font: 600 1.1rem var(--serif); }.reviewer-card p { color: var(--slate); font-size: .68rem; }.answer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }.answer-actions button { display: flex; min-height: 40px; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font-size: .63rem; }.answer-actions svg { width: 14px; }.short-answer { margin-top: 0; background: var(--deep); }.short-answer > span { color: var(--deep); background: var(--gold); }.short-answer h2,.short-answer p { color: #fff; }.short-answer p { color: rgba(255,255,255,.75); }.opinion-note { background: #fcf5df; }.opinion-note > span { color: var(--deep); background: var(--gold); }.check-list { padding: 0; list-style: none; }.check-list li { position: relative; margin-bottom: 12px; padding-left: 30px; }.check-list li::before { position: absolute; top: .45em; left: 2px; width: 14px; height: 14px; border: 4px solid var(--mint); border-radius: 50%; background: var(--forest); content: ""; }.answer-update { display: flex; gap: 12px; margin-top: 50px; padding-top: 20px; border-top: 1px solid var(--border); }.answer-update > svg { width: 18px; color: var(--forest); }.answer-update p { display: flex; flex-direction: column; margin: 0; }.answer-update strong { font-size: .72rem; }.answer-update small { color: var(--slate); font-size: .65rem; }

/* Prayer pages */
.prayer-hero { color: #fff; background: var(--deep); }.prayer-hero .inner-hero-grid > div:last-child > p { color: rgba(255,255,255,.68); }.prayer-hero h1 em { color: #cce8d8; }.light-search { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08); }.light-search input,.light-search button { color: #fff; }.light-search input::placeholder { color: rgba(255,255,255,.45); }.light-search > svg { color: #fff; }.light-search button { background: rgba(255,255,255,.12); }.prayer-hero-arabic { position: absolute; bottom: -40px; left: 7%; color: rgba(255,255,255,.045); font: 600 8rem "Noto Naskh Arabic"; white-space: nowrap; }.prayer-list { border-top: 1px solid var(--border); }.prayer-list-card { display: grid; grid-template-columns: 55px 70px 1fr 95px; gap: 28px; padding: 35px 10px; border-bottom: 1px solid var(--border); }.prayer-list-number { padding-top: 7px; color: #9ba69f; font-size: .65rem; }.prayer-list-icon { display: grid; width: 58px; height: 58px; place-items: center; color: var(--forest); border-radius: 50%; background: var(--mint); }.prayer-list-icon svg { width: 24px; }.prayer-card-copy h2 { margin: 6px 0 15px; font: 600 1.65rem var(--serif); }.prayer-card-copy .arabic-text { font-size: 1.75rem; text-align: left; }.arabic-text.small { font-size: 1.75rem; }.prayer-card-copy .translation { margin: 10px 0 0; font-size: .78rem; }.prayer-card-actions { display: flex; align-items: center; gap: 7px; }.prayer-card-actions button,.prayer-card-actions a { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: #fff; }.prayer-card-actions svg { width: 16px; }
.prayer-detail-header { padding: 55px 0 180px; color: #fff; background: var(--deep); }.prayer-detail-header .breadcrumb { justify-content: flex-start; color: rgba(255,255,255,.55); }.prayer-title-row { display: flex; align-items: center; justify-content: space-between; }.prayer-title-row h1 { margin: 0 0 15px; font: 500 clamp(3rem,5vw,5.2rem) var(--serif); }.prayer-title-row p { color: rgba(255,255,255,.65); }.big-prayer-icon { display: grid; width: 150px; height: 150px; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; }.big-prayer-icon svg { width: 55px; stroke-width: 1.2; }.prayer-reading-card { margin-top: -120px; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: var(--shadow); }.reading-toolbar { display: flex; min-height: 65px; align-items: center; justify-content: space-between; padding: 0 25px; border-bottom: 1px solid var(--border); color: var(--slate); font-size: .7rem; }.reading-toolbar > span,.reading-toolbar div,.reading-toolbar button { display: flex; align-items: center; gap: 8px; }.reading-toolbar svg { width: 15px; }.reading-toolbar button { padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; }.reading-toolbar button:hover { background: var(--mint); }.prayer-reading { max-width: 900px; margin: 0 auto; padding: 70px 40px; text-align: center; }.bismillah { display: block; margin-bottom: 25px; color: var(--gold); font-size: 2rem; }.arabic-text.large { font-size: clamp(2.5rem,5vw,4.4rem); line-height: 2; }.prayer-reading .latin-text { margin: 28px 0; color: var(--forest); font-size: 1rem; }.meaning-block { max-width: 720px; margin: 40px auto 30px; padding-top: 30px; border-top: 1px solid var(--border); }.meaning-block span { color: var(--slate); font-size: .65rem; font-weight: 700; text-transform: uppercase; }.meaning-block p { margin: 10px 0; font: italic 500 1.35rem/1.6 var(--serif); }.source-block { display: inline-flex; align-items: center; gap: 10px; padding: 10px 15px; border-radius: 8px; background: var(--mint); }.source-block > svg { width: 20px; color: var(--forest); }.source-block span { display: flex; flex-direction: column; text-align: left; }.source-block strong { font-size: .65rem; }.source-block small { color: var(--slate); font-size: .62rem; }.prayer-explanation { display: grid; grid-template-columns: 1fr 300px; gap: 80px; padding-top: 85px; padding-bottom: 120px; }.source-check { align-self: start; padding: 28px; border-radius: 16px; background: var(--cream); }.source-check > span { display: grid; width: 52px; height: 52px; place-items: center; color: #fff; border-radius: 50%; background: var(--forest); }.source-check span svg { width: 23px; }.source-check h3 { margin: 20px 0 8px; font: 600 1.1rem var(--serif); }.source-check p { margin: 0; color: var(--slate); font-size: .72rem; }.mini-prayer-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }.mini-prayer-grid a { position: relative; display: flex; min-height: 190px; flex-direction: column; justify-content: flex-end; padding: 25px; border: 1px solid var(--border); border-radius: 15px; background: #fff; }.mini-prayer-grid a > span { position: absolute; top: 22px; left: 22px; display: grid; width: 45px; height: 45px; place-items: center; color: var(--forest); border-radius: 50%; background: var(--mint); }.mini-prayer-grid a > span svg { width: 20px; }.mini-prayer-grid small { color: var(--forest); font-size: .62rem; text-transform: uppercase; }.mini-prayer-grid strong { font: 600 1.15rem var(--serif); }.mini-prayer-grid a > svg { position: absolute; top: 25px; right: 25px; width: 17px; }

/* Hadith */
.hadith-hero { background: #f6f2e8; }.hadith-hero-mark { position: absolute; right: 7%; bottom: -40px; color: rgba(215,168,61,.3); font: 500 16rem/.5 var(--serif); }.hadith-list { border-top: 1px solid var(--border); }.hadith-card { display: grid; grid-template-columns: 110px 1fr 310px; gap: 40px; padding: 48px 10px; border-bottom: 1px solid var(--border); }.hadith-card-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }.hadith-index { color: #9ca79f; font-size: .65rem; }.hadith-card-main .quote-mark { margin-bottom: 23px; }.hadith-card-main h2 { margin-bottom: 22px; font: 600 1.8rem var(--serif); }.hadith-card-main .arabic-text { margin-bottom: 10px; text-align: left; }.hadith-translation { font: italic 500 1rem/1.6 var(--serif); }.hadith-card-side { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding-left: 35px; border-left: 1px solid var(--border); }.hadith-card-side p { color: var(--slate); font-size: .78rem; }.hadith-card-side .circle-link { align-self: flex-end; }
.hadith-detail-header { padding: 75px 0 210px; text-align: center; background: #f6f2e8; }.hadith-detail-header h1 { margin: 18px 0; font: 600 clamp(3rem,5vw,5rem) var(--serif); }.hadith-detail-header p { max-width: 650px; margin-inline: auto; color: var(--slate); }.hadith-reading-card { position: relative; margin-top: -145px; padding: 70px 90px 40px; border-radius: 22px; background: var(--deep); color: #fff; text-align: center; box-shadow: var(--shadow); }.hadith-reading-card .quote-mark { color: var(--gold); font-size: 7rem; }.hadith-reading-card .arabic-text { margin: 25px 0; }.hadith-translation.large { max-width: 780px; margin: 25px auto; color: rgba(255,255,255,.9); font-size: 1.35rem; }.hadith-source-row { display: flex; align-items: center; justify-content: space-between; margin-top: 50px; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.15); text-align: left; }.hadith-source-row > span:first-child { display: flex; flex-direction: column; }.hadith-source-row small { color: rgba(255,255,255,.5); font-size: .62rem; }.hadith-source-row strong { font-size: .75rem; }.hadith-source-row .verified-badge { color: #b6dfc8; }.hadith-reading-card .content-actions { justify-content: center; }.hadith-explanation { display: grid; grid-template-columns: 220px minmax(0,760px); justify-content: center; gap: 80px; padding-top: 100px; padding-bottom: 120px; }.hadith-explanation > aside { position: sticky; top: 115px; display: flex; height: fit-content; flex-direction: column; padding-left: 20px; border-left: 1px solid var(--border); }.hadith-explanation aside span { margin-bottom: 12px; font-size: .7rem; font-weight: 700; }.hadith-explanation aside a { padding: 6px 0; color: var(--slate); font-size: .68rem; }.lesson-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 30px 0; }.lesson-grid > div { padding: 20px; border: 1px solid var(--border); border-radius: 12px; }.lesson-grid span { color: var(--forest); font-size: .62rem; font-weight: 700; }.lesson-grid h3 { margin: 14px 0 8px; font: 600 1rem var(--serif); }.lesson-grid p { margin: 0; color: var(--slate); font-size: .7rem; }.mini-hadith-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }.mini-hadith-grid a { position: relative; padding: 30px; border: 1px solid var(--border); border-radius: 16px; background: #fff; }.mini-hadith-grid h3 { margin: 20px 0 10px; font: 600 1.3rem var(--serif); }.mini-hadith-grid p { color: var(--slate); font: italic .9rem var(--serif); }.mini-hadith-grid small { font-size: .62rem; }.mini-hadith-grid a > svg { position: absolute; top: 28px; right: 28px; width: 18px; }

/* Schedule */
.schedule-hero { color: #fff; background: var(--deep); }.schedule-hero-inner { display: grid; min-height: 510px; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 90px; }.schedule-hero h1 { margin-bottom: 25px; font: 500 clamp(3.3rem,3.5vw,5.8rem)/.98 var(--serif); }.schedule-hero h1 em { color: #c8e7d5; }.schedule-hero p { max-width: 560px; color: rgba(255,255,255,.65); }.next-prayer-display { display: flex; flex-direction: column; align-items: center; padding: 42px; border: 1px solid rgba(255,255,255,.15); border-radius: 170px 170px 18px 18px; background: rgba(255,255,255,.04); }.next-prayer-display > span { color: #afd5bf; font-size: .65rem; text-transform: uppercase; }.next-prayer-display strong { margin: 8px 0 -5px; font: 500 1.6rem var(--serif); }.next-prayer-display time { color: var(--gold); font: 500 5.5rem var(--serif); line-height: 1.1; }.next-prayer-display small { color: rgba(255,255,255,.55); font-size: .65rem; }.schedule-main-section { padding: 0 0 80px; background: var(--cream); }.schedule-control-card { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr 100px; align-items: center; gap: 30px; margin-top: -42px; padding: 22px 25px; border: 1px solid var(--border); border-radius: 15px; background: #fff; box-shadow: var(--shadow); }.schedule-control-card label > span { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; color: var(--slate); font-size: .6rem; }.schedule-control-card label svg { width: 14px; }.schedule-control-card select { width: 100%; border: 0; outline: none; font-size: .76rem; font-weight: 700; }.schedule-date-nav { display: flex; align-items: center; justify-content: space-between; }.schedule-date-nav button,.month-selector button { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: #fff; }.schedule-date-nav svg,.month-selector svg { width: 15px; }.schedule-date-nav span { display: flex; flex-direction: column; text-align: center; }.schedule-date-nav strong { font-size: .72rem; }.schedule-date-nav small { color: var(--slate); font-size: .62rem; }.demo-badge { justify-self: end; padding: 6px 10px; color: #8c6715; border-radius: 30px; background: #f9edc9; font-size: .6rem; font-weight: 700; }.daily-schedule-grid { display: grid; grid-template-columns: repeat(6,1fr); margin-top: 38px; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: #fff; }.daily-schedule-item { position: relative; display: flex; min-height: 170px; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid var(--border); }.daily-schedule-item:last-child { border-right: 0; }.schedule-icon { display: grid; width: 42px; height: 42px; margin-bottom: 10px; place-items: center; color: var(--forest); border-radius: 50%; background: var(--mint); }.schedule-icon svg { width: 20px; }.daily-schedule-item > span:nth-last-of-type(1) { color: var(--slate); font-size: .7rem; }.daily-schedule-item strong { font: 500 1.8rem var(--serif); }.daily-schedule-item.is-next { color: #fff; background: var(--deep); }.daily-schedule-item.is-next .schedule-icon { color: var(--deep); background: var(--gold); }.daily-schedule-item.is-next > span:nth-last-of-type(1) { color: rgba(255,255,255,.65); }.schedule-note { display: flex; gap: 12px; margin-top: 18px; padding: 14px 18px; color: var(--slate); border: 1px dashed #c9d8cf; border-radius: 10px; font-size: .68rem; }.schedule-note > svg { width: 17px; color: var(--forest); }.schedule-note p { display: flex; flex-direction: column; margin: 0; }.schedule-note strong { color: var(--charcoal); }.monthly-section { padding-top: 90px; }.month-selector { display: flex; align-items: center; gap: 18px; }.month-selector strong { font: 600 1rem var(--serif); }.schedule-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 15px; }.schedule-table { width: 100%; border-collapse: collapse; white-space: nowrap; }.schedule-table th,.schedule-table td { padding: 18px 22px; border-bottom: 1px solid var(--border); text-align: center; font-size: .73rem; }.schedule-table thead { color: var(--slate); background: #f6f9f7; }.schedule-table thead th { font-size: .62rem; text-transform: uppercase; }.schedule-table tbody th { position: relative; text-align: left; }.schedule-table tbody tr:last-child th,.schedule-table tbody tr:last-child td { border-bottom: 0; }.schedule-table tr.is-today { color: var(--deep); background: var(--mint); }.schedule-table tbody th span { margin-left: 8px; padding: 3px 7px; color: #fff; border-radius: 20px; background: var(--forest); font-size: .5rem; }.schedule-method-section { padding-top: 30px; background: var(--cream); }.method-grid { display: grid; grid-template-columns: 100px 1fr 1fr; align-items: center; gap: 45px; padding: 55px; border-radius: 18px; background: #fff; }.method-icon { display: grid; width: 90px; height: 90px; place-items: center; color: var(--forest); border-radius: 50%; background: var(--mint); }.method-icon svg { width: 36px; }.method-grid h2 { margin: 0; font: 600 2rem var(--serif); }.method-grid > div:last-child p { color: var(--slate); font-size: .8rem; }

/* About */
.about-hero { color: #fff; background: var(--deep); }.about-hero-grid { display: grid; min-height: 520px; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 100px; }.about-hero h1 { margin: 0; font: 500 clamp(3.2rem,5vw,5.5rem)/1.03 var(--serif); }.about-hero h1 em { color: #c5e5d2; }.about-hero p { color: rgba(255,255,255,.67); }.story-grid { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 100px; }.story-mark { display: flex; min-height: 420px; flex-direction: column; align-items: center; justify-content: center; border-radius: 180px 180px 16px 16px; background: var(--mint); }.brand-mark.giant { width: 140px; height: 120px; }.brand-mark.giant > span { width: 67px; height: 90px; border-width: 8px; }.brand-mark.giant b { width: 28px; height: 28px; border-width: 5px; }.story-mark small { margin-top: 25px; color: var(--forest); font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; }.story-grid .prose h2 { margin-top: 0; font-size: 3.3rem; }.values-section { background: var(--cream); }.values-grid { display: grid; grid-template-columns: repeat(4,1fr); }.values-grid article { position: relative; min-height: 320px; padding: 30px; border: 1px solid var(--border); background: #fff; }.values-grid article > span { position: absolute; top: 20px; right: 20px; color: #9aa59e; font-size: .6rem; }.values-grid article > svg { width: 34px; margin: 65px 0 35px; color: var(--forest); stroke-width: 1.4; }.values-grid h3 { font: 600 1.25rem var(--serif); }.values-grid p { color: var(--slate); font-size: .75rem; }.guidelines-section { color: #fff; background: var(--deep); }.guideline-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; }.guideline-grid h2 { font: 500 clamp(2.5rem,4vw,4rem) var(--serif); }.guideline-grid > div:first-child > p { color: rgba(255,255,255,.6); }.accordion article { border-bottom: 1px solid rgba(255,255,255,.15); }.accordion button { display: grid; width: 100%; grid-template-columns: 40px 1fr 20px; align-items: center; gap: 15px; padding: 22px 0; color: #fff; border: 0; background: transparent; text-align: left; font: 500 1.12rem var(--serif); }.accordion button span { color: #a5cbb5; font: 700 .6rem var(--sans); }.accordion button svg { width: 17px; transition: transform .25s; }.accordion article.is-open button svg { transform: rotate(45deg); }.accordion article > div { max-height: 0; overflow: hidden; transition: max-height .3s; }.accordion article.is-open > div { max-height: 130px; }.accordion article p { padding: 0 55px 20px; color: rgba(255,255,255,.6); font-size: .76rem; }.contact-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 100px; }.contact-grid h2 { font: 600 3.2rem var(--serif); }.contact-grid > div:first-child p { color: var(--slate); }.contact-grid > div:first-child a { display: inline-flex; align-items: center; gap: 12px; color: var(--forest); font-weight: 700; }.contact-grid a svg { width: 18px; }.privacy-card { padding: 45px; border-radius: 20px; background: var(--mint); }.privacy-card > svg { width: 35px; color: var(--forest); }.privacy-card h3 { margin: 25px 0 10px; font: 600 1.5rem var(--serif); }.privacy-card p { margin: 0; color: var(--slate); }

/* Responsive */
@media (max-width: 1120px) {
    .desktop-nav { gap: 15px; }.desktop-nav a { font-size: .72rem; }.header-cta { display: none; }
    .hero-layout { gap: 35px; }.hero-copy { padding-left: 25px; }.hero-art { height: 500px; }
    .article-side-grid { grid-template-columns: 1fr; }.article-side-grid .article-card:nth-child(n+3) { display: none; }
    .quick-card { padding: 23px; }.question-row { grid-template-columns: 35px 90px 1fr 120px 46px; }
    .hadith-card { grid-template-columns: 85px 1fr 250px; }.footer-grid { gap: 35px; }
}

@media (max-width: 900px) {
    .container { width: min(calc(100% - 36px), var(--container)); }.section { padding: 85px 0; }.topbar-date { display: none; }
    .menu-toggle { display: grid; }.desktop-nav { display: none; }.header-inner { min-height: 70px; }.header-actions { margin-left: auto; }
    .hero-layout { min-height: auto; grid-template-columns: 1fr; padding: 80px 0 135px; }.hero-copy { padding-left: 0; }.hero-copy h1 { max-width: 730px; }.hero-art { width: min(620px,90%); height: 520px; margin: 20px auto 0; }.hero-side-label { display: none; }
    .prayer-times { grid-template-columns: repeat(3,1fr); }.prayer-time { border-bottom: 1px solid rgba(255,255,255,.1); }.prayer-more { min-height: 80px; grid-column: 1/-1; }
    .split-heading,.inner-hero-grid,.ask-form-layout,.hadith-preview-grid,.prefooter-grid,.story-grid,.guideline-grid,.contact-grid { grid-template-columns: 1fr; }.split-heading { gap: 25px; }.quick-grid { grid-template-columns: 1fr 1fr; }.question-row { grid-template-columns: 35px 85px 1fr 46px; }.row-meta { display: none; }
    .featured-articles { grid-template-columns: 1fr; }.article-side-grid { grid-template-columns: 1fr 1fr; }.article-side-grid .article-card:nth-child(n+3) { display: block; }
    .daily-prayer { grid-template-columns: 1fr; }.daily-prayer-aside { min-height: 160px; flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }.prayer-ornament { width: 75px; height: 75px; }.daily-prayer-aside > div { flex-direction: column; gap: 8px; }.hadith-preview-grid { gap: 50px; }.prefooter-grid { min-height: 450px; gap: 30px; padding: 70px 0; }.footer-grid { grid-template-columns: 1fr 1fr; }
    .inner-hero-grid { min-height: 560px; align-content: center; gap: 30px; }.inner-hero-grid > div:last-child > p { margin-bottom: 22px; }.featured-story { grid-template-columns: 1fr; }.featured-story > div { padding: 15px; }.article-grid { grid-template-columns: 1fr 1fr; }
    .article-layout,.answer-layout,.hadith-explanation { grid-template-columns: minmax(0,760px); }.article-toc,.answer-aside,.hadith-explanation > aside { position: static; }.article-toc,.hadith-explanation > aside { display: none; }
    .ask-hero-grid { grid-template-columns: 1fr; padding: 70px 0; }.ask-hero-cards { width: min(550px,100%); }.ask-form-layout { gap: 45px; }.form-intro { position: static; }.question-grid { grid-template-columns: 1fr; }
    .prayer-explanation { grid-template-columns: 1fr; }.source-check { max-width: 420px; }.hadith-card { grid-template-columns: 65px 1fr; }.hadith-card-side { grid-column: 2; padding: 25px 0 0; border-top: 1px solid var(--border); border-left: 0; }.schedule-hero-inner { grid-template-columns: 1fr 1fr; gap: 35px; }.schedule-control-card { grid-template-columns: 1fr 1fr; }.demo-badge { display: none; }.daily-schedule-grid { grid-template-columns: repeat(3,1fr); }.daily-schedule-item { border-bottom: 1px solid var(--border); }.method-grid { grid-template-columns: 80px 1fr; }.method-grid > div:last-child { grid-column: 2; }.values-grid { grid-template-columns: 1fr 1fr; }.story-grid,.guideline-grid,.contact-grid { gap: 55px; }
}

@media (max-width: 640px) {
    body { padding-bottom: 68px; font-size: 15px; }.container,.narrow { width: min(calc(100% - 28px), var(--container)); }.section { padding: 68px 0; }.topbar-inner { justify-content: center; }.topbar p { font-size: .62rem; }.site-header .header-inner { justify-content: space-between; }.header-actions .icon-button { display: none; }.brand-name { font-size: 1rem; }
    .home-hero { min-height: 0; }.hero-layout { padding: 60px 0 120px; }.hero-copy h1 { font-size: 3rem; }.hero-copy > p { font-size: .9rem; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }.hero-art { width: 100%; height: 410px; border-radius: 160px 160px 18px 18px; }.orbit-one { width: 210px; height: 210px; left: 70px; }.orbit-two { width: 290px; height: 290px; left: 30px; }.chat-one { right: 5px; }.chat-two { bottom: 80px; left: 5px; }.lamp { top: 90px; transform: translateX(-50%) scale(.78); }.book-scene { right: 24px; bottom: 52px; left: 24px; height: 125px; }.book-page { height: 110px; padding: 35px 22px; }.book-spine { height: 105px; }
    .prayer-strip-section { margin-top: -75px; }.prayer-card-head { display: block; padding: 22px; }.prayer-date { margin-top: 10px; text-align: left; }.prayer-times { grid-template-columns: repeat(3,1fr); }.prayer-time { min-height: 115px; }.prayer-time strong { font-size: 1.25rem; }
    .quick-access-section { padding-top: 95px; }.section-heading h2 { font-size: 2.45rem; }.inline-heading { align-items: flex-start; flex-direction: column; }.quick-card { min-height: 245px; padding: 20px; }.quick-icon { width: 50px; height: 50px; }.quick-icon svg { width: 21px; }.quick-card strong { font-size: 1.15rem; }.quick-card small { font-size: .66rem; }.quick-arrow { right: 17px; bottom: 19px; }
    .question-row { grid-template-columns: 30px 1fr 38px; gap: 12px; }.question-row .tag { display: none; }.question-row h3 { font-size: 1.03rem; }.question-row p { display: none; }.question-row .circle-link { width: 38px; height: 38px; flex-basis: 38px; }
    .article-side-grid,.article-grid { grid-template-columns: 1fr; }.article-card-featured .article-visual { min-height: 250px; }.article-card-featured h3 { font-size: 1.4rem; }.daily-prayer { border-radius: 14px; }.daily-prayer-aside { min-height: 120px; padding: 24px; }.daily-prayer-aside .prayer-ornament { display: none; }.daily-prayer-content { padding: 35px 24px; }.daily-prayer-content h2 { font-size: 2rem; }.daily-prayer-content .arabic-text { font-size: 2.2rem; }.daily-prayer-content .translation { font-size: 1rem; }.hadith-quote { padding: 50px 30px 35px; border-radius: 120px 16px 16px 16px; }.hadith-quote > p { font-size: 1.65rem; }.hadith-quote footer { align-items: flex-start; flex-direction: column; }
    .prefooter-grid { min-height: 0; padding: 60px 0; }.prefooter-grid h2 { font-size: 2.45rem; }.footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 25px; }.footer-brand,.footer-newsletter { grid-column: 1/-1; }.footer-bottom { align-items: flex-start; flex-direction: column; justify-content: center; gap: 6px; padding: 20px 0; }
    .mobile-bottom-nav { position: fixed; z-index: 200; right: 0; bottom: 0; left: 0; display: grid; height: 68px; grid-template-columns: repeat(5,1fr); border-top: 1px solid var(--border); background: rgba(255,255,255,.96); box-shadow: 0 -8px 25px rgba(13,77,50,.08); backdrop-filter: blur(12px); }.mobile-bottom-nav a,.mobile-bottom-nav button { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; color: var(--slate); border: 0; background: transparent; font-size: .58rem; }.mobile-bottom-nav svg { width: 19px; }.mobile-bottom-nav .is-active { color: var(--forest); font-weight: 700; }.mobile-bottom-nav .bottom-main { position: relative; color: var(--deep); }.bottom-main > span { position: absolute; top: -25px; display: grid; width: 52px; height: 52px; place-items: center; color: #fff; border: 5px solid #fff; border-radius: 50%; background: var(--forest); }.bottom-main small { margin-top: 28px; }.toast { right: 14px; bottom: 82px; left: 14px; min-width: 0; }
    .inner-hero-grid { min-height: 500px; }.inner-hero h1 { font-size: 3rem; }.page-number { font-size: 3rem; }.filter-bar { align-items: flex-start; flex-direction: column; }.filter-bar > div { gap: 2px; }.featured-story { gap: 20px; margin-bottom: 60px; padding: 12px; }.featured-story-visual { min-height: 300px; }.featured-story > div { padding: 12px 8px; }.featured-story h2 { font-size: 2rem; }.article-list-heading h2 { font-size: 1.7rem; }
    .detail-header { padding: 55px 0 40px; }.detail-header h1 { font-size: 2.7rem; }.detail-byline { flex-wrap: wrap; }.detail-cover { height: 330px; }.detail-cover .visual-ring { width: 210px; height: 210px; }.detail-cover > svg { width: 80px; }.article-layout,.answer-layout { padding: 65px 0 80px; }.prose h2 { margin-top: 48px; font-size: 1.7rem; }.source-quote { padding: 28px 25px; }.practice-box,.opinion-note,.short-answer { padding: 23px; }
    .ask-hero-grid { padding: 55px 0 80px; }.ask-hero h1 { font-size: 3rem; }.ask-hero-cards { height: 330px; }.floating-question { max-width: 270px; }.fq-one { left: 8px; }.fq-two { right: 8px; }.question-form { padding: 24px 18px; }.form-row { grid-template-columns: 1fr; gap: 0; }.library-toolbar { align-items: flex-start; flex-direction: column; gap: 18px; }.tab-switch { width: 100%; }.tab-switch button { flex: 1; }.question-card { padding: 22px; }.answer-header h1 { font-size: 2.5rem; }
    .prayer-hero-arabic { font-size: 4.5rem; }.prayer-list-card { grid-template-columns: 35px 1fr 45px; gap: 15px; }.prayer-list-icon { display: none; }.prayer-card-copy .arabic-text { font-size: 1.45rem; }.prayer-card-actions { flex-direction: column; }.prayer-title-row { align-items: flex-start; }.big-prayer-icon { width: 75px; height: 75px; }.big-prayer-icon svg { width: 30px; }.prayer-detail-header { padding-bottom: 145px; }.prayer-title-row h1 { font-size: 2.6rem; }.reading-toolbar > span { display: none; }.reading-toolbar { justify-content: center; }.prayer-reading { padding: 50px 20px; }.arabic-text.large { font-size: 2.3rem; }.meaning-block p { font-size: 1.1rem; }.mini-prayer-grid { grid-template-columns: 1fr; }
    .hadith-card { grid-template-columns: 35px 1fr; gap: 15px; padding: 35px 5px; }.hadith-card-meta .tag { display: none; }.hadith-card-main h2 { font-size: 1.45rem; }.hadith-card-side { grid-column: 2; }.hadith-detail-header h1 { font-size: 2.8rem; }.hadith-reading-card { padding: 50px 22px 30px; }.hadith-reading-card .arabic-text { font-size: 2rem; }.hadith-source-row { align-items: flex-start; flex-direction: column; gap: 15px; }.lesson-grid,.mini-hadith-grid { grid-template-columns: 1fr; }
    .schedule-hero-inner { grid-template-columns: 1fr; padding: 60px 0 100px; }.schedule-hero h1 { font-size: 3.3rem; }.next-prayer-display { max-width: 330px; margin: auto; }.next-prayer-display time { font-size: 4.5rem; }.schedule-control-card { grid-template-columns: 1fr; margin-top: -35px; }.schedule-date-nav { border-top: 1px solid var(--border); padding-top: 18px; }.daily-schedule-grid { grid-template-columns: repeat(2,1fr); }.daily-schedule-item { min-height: 145px; }.method-grid { grid-template-columns: 1fr; padding: 30px; }.method-grid > div:last-child { grid-column: auto; }.method-grid h2 { font-size: 1.7rem; }
    .about-hero-grid { min-height: 530px; grid-template-columns: 1fr; align-content: center; gap: 25px; }.about-hero h1 { font-size: 3rem; }.story-grid { gap: 55px; }.story-mark { min-height: 330px; }.story-grid .prose h2 { font-size: 2.35rem; }.values-grid { grid-template-columns: 1fr; }.values-grid article { min-height: 250px; }.values-grid article > svg { margin-top: 45px; }.guideline-grid { gap: 40px; }.accordion button { font-size: 1rem; }.contact-grid h2 { font-size: 2.5rem; }.privacy-card { padding: 30px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; } *,*::before,*::after { scroll-behavior: auto!important; transition-duration: .01ms!important; animation-duration: .01ms!important; animation-iteration-count: 1!important; }.reveal { opacity: 1; transform: none; }
}

/* Dynamic content, external thumbnails, and live prayer integration */
.article-thumbnail { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.article-visual.has-thumbnail::after,.detail-cover.has-thumbnail::after { position: absolute; z-index: 2; inset: 0; background: linear-gradient(180deg,transparent 42%,rgba(4,35,21,.62)); content: ""; }
.article-visual.has-thumbnail .visual-ring,.article-visual.has-thumbnail .article-visual-icon { opacity: 0; }
.article-visual.has-thumbnail .visual-label { z-index: 3; color: #fff; }
.detail-cover.has-thumbnail .cover-grid,.detail-cover.has-thumbnail .visual-ring,.detail-cover.has-thumbnail > svg { opacity: 0; }
.detail-cover.has-thumbnail > p { z-index: 3; color: #fff; }
.featured-story-visual.has-thumbnail { position: relative; overflow: hidden; }
.featured-story-visual.has-thumbnail::after { position: absolute; z-index: 2; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(4,35,21,.58)); content: ""; }
.featured-story-visual.has-thumbnail .visual-ring,.featured-story-visual.has-thumbnail > svg { opacity: 0; }
.featured-story-visual.has-thumbnail > small { position: relative; z-index: 3; color: #fff; }
.imported-content img { width: auto; max-width: 100%; height: auto; border-radius: 12px; }
.imported-content figure { max-width: 100%; margin: 32px 0; }
.imported-content table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; }
.imported-content th,.imported-content td { padding: 10px; border: 1px solid var(--border); }
.source-label[href]:hover { color: var(--forest); text-decoration: underline; text-underline-offset: 2px; }
.location-label { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; color: var(--slate); font-size: .6rem; }
.location-label svg { width: 14px; }
.schedule-control-card > div:first-child > strong { display: block; font-size: .78rem; }
.schedule-date-nav button:disabled { cursor: default; opacity: .4; }
.schedule-note a { color: var(--forest); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.prayer-date a { color: rgba(255,255,255,.7); }
.question-form button:disabled { cursor: wait; opacity: .65; }
.hadith-text-block { display: flow-root; }
.hadith-text-block > p { margin: 0 0 1.35em; }
.hadith-text-block > p:last-child { margin-bottom: 0; }
.hadith-reading-card .hadith-text-block + .hadith-text-block { margin-top: 42px; padding-top: 34px; border-top: 1px solid var(--border); }
.hadith-card-main .hadith-text-block { margin: 24px 0; }
.schedule-date-nav button:not(:disabled) { cursor: pointer; opacity: 1; }
.schedule-date-nav button:not(:disabled):hover { color: var(--forest); background: var(--mint); }

/* Dzikir pagi dan sore */
[hidden] { display: none !important; }

/* Global search */
.search-results-hero { background: var(--cream); }
.search-results-section { min-height: 52vh; }
.search-results-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 32px; }
.search-results-heading h2 { margin: 8px 0 0; font: 600 clamp(2rem,4vw,3.6rem)/1.1 var(--serif); }
.search-results-heading > strong { color: var(--forest); font-size: .75rem; }
.search-result-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.search-result-card { display: flex; min-height: 245px; flex-direction: column; align-items: flex-start; padding: 30px; border: 1px solid var(--border); border-radius: 17px; background: #fff; }
.search-result-card > div { display: flex; align-items: center; gap: 10px; }
.search-result-card small { color: var(--slate); font-size: .65rem; }
.search-result-card h3 { margin: 20px 0 10px; font: 600 1.4rem/1.3 var(--serif); }
.search-result-card p { margin: 0 0 24px; color: var(--slate); font-size: .76rem; }
.search-result-card .text-link { margin-top: auto; }
.search-empty-state { display: grid; max-width: 760px; min-height: 330px; margin: 0 auto; place-items: center; align-content: center; padding: 45px; border: 1px dashed var(--border); border-radius: 20px; text-align: center; }
.search-empty-state > svg { width: 42px; color: var(--forest); }
.search-empty-state h2 { margin: 20px 0 8px; font: 600 2rem var(--serif); }
.search-empty-state p { margin: 0; color: var(--slate); }
@media (max-width: 760px) {
    .search-results-heading { align-items: flex-start; flex-direction: column; }
    .search-result-list { grid-template-columns: 1fr; }
    .search-result-card { min-height: 220px; padding: 24px; }
    .search-empty-state { min-height: 280px; padding: 30px 20px; }
}
.dhikr-hero { color: #fff; background: radial-gradient(circle at 78% 25%,rgba(229,173,43,.2),transparent 28%),var(--deep); }
.dhikr-hero .inner-hero-grid > div:last-child > p { color: rgba(255,255,255,.7); }
.dhikr-time-note { display: block; margin-top: 14px; color: rgba(255,255,255,.62); font-size: .66rem; }
.dhikr-choice-section { background: var(--cream); }
.dhikr-period-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.dhikr-period-card { position: relative; min-height: 350px; overflow: hidden; padding: 42px; border: 1px solid var(--border); border-radius: 22px; background: #fff; }
.dhikr-period-card::after { position: absolute; right: -70px; bottom: -90px; width: 240px; height: 240px; border: 1px solid rgba(13,77,50,.12); border-radius: 50%; content: ""; }
.dhikr-period-sore { color: #fff; border-color: transparent; background: var(--deep); }
.dhikr-period-sore p { color: rgba(255,255,255,.67)!important; }
.dhikr-period-sore .eyebrow { color: #a9d9bc; }
.dhikr-period-icon { display: grid; width: 64px; height: 64px; margin-bottom: 50px; place-items: center; color: var(--forest); border-radius: 50%; background: var(--mint); }
.dhikr-period-sore .dhikr-period-icon { color: var(--deep); background: var(--gold); }
.dhikr-period-icon svg { width: 28px; }
.dhikr-period-card h2 { margin: 10px 0; font: 600 2.4rem var(--serif); }
.dhikr-period-card p { max-width: 410px; color: var(--slate); }
.dhikr-period-card > div { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.dhikr-period-sore .button-outline { color: #fff; border-color: rgba(255,255,255,.4); }
.dhikr-period-sore .circle-link { color: var(--deep); background: #fff; }
.dhikr-preview-section.is-sore { background: var(--cream); }
.dhikr-list { display: grid; gap: 18px; }
.dhikr-list-card { position: relative; display: grid; grid-template-columns: 55px minmax(0,1fr) 46px; gap: 26px; padding: 35px; border: 1px solid var(--border); border-radius: 17px; background: #fff; }
.dhikr-list-number { color: var(--forest); font: 600 1rem var(--serif); }
.dhikr-list-copy h3 { margin: 6px 0 24px; font: 600 1.55rem var(--serif); }
.dhikr-repeat-badge { display: inline-flex; align-items: center; gap: 7px; margin: -10px 0 22px; padding: 7px 11px; color: var(--forest); border-radius: 20px; background: var(--mint); font-size: .62rem; font-weight: 700; }
.dhikr-repeat-badge svg { width: 14px; }
.dhikr-repeat-badge.is-reader { margin: -25px 0 28px; color: var(--deepest); background: var(--gold); }
.dhikr-list-copy .arabic-text { margin: 0 0 20px; font-size: 2rem; }
.dhikr-arabic-blocks > p { margin: 0; }
.dhikr-arabic-blocks > p + p { margin-top: 38px; padding-top: 30px; border-top: 1px solid var(--border); }
.dhikr-list-copy .latin-text { color: var(--slate); font-style: italic; }
.dhikr-list-copy .translation { margin-bottom: 20px; }
.dhikr-list-copy details { margin: 25px 0; padding: 17px 0; border-block: 1px solid var(--border); }
.dhikr-list-copy summary { color: var(--forest); cursor: pointer; font-size: .73rem; font-weight: 700; }
.dhikr-list-copy details p { color: var(--slate); font-size: .72rem; }
.dhikr-list-card.is-compact .dhikr-list-copy .arabic-text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dhikr-copy { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: #fff; }
.dhikr-copy svg { width: 17px; }
.dhikr-disclaimer { padding-top: 0; }
.dhikr-source-links { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 16px; }
.dhikr-detail-hero { padding: 80px 0; color: #fff; text-align: center; background: var(--deep); }
.dhikr-detail-hero .breadcrumb { color: rgba(255,255,255,.62); }
.dhikr-detail-hero h1 { margin: 18px 0; font: 600 clamp(3rem,6vw,5.5rem)/1 var(--serif); }
.dhikr-detail-hero p { max-width: 630px; margin: 0 auto 30px; color: rgba(255,255,255,.68); }
.dhikr-detail-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 35px; color: var(--slate); font-size: .72rem; }
.dhikr-detail-toolbar > div { display: flex; gap: 6px; }
.dhikr-detail-toolbar a { padding: 9px 15px; border-radius: 30px; }
.dhikr-detail-toolbar a.is-active { color: #fff; background: var(--deep); }

body.is-dhikr-reader { padding: 0; background: var(--deepest); }
.is-dhikr-reader > .topbar,.is-dhikr-reader > .site-header,.is-dhikr-reader > .mobile-drawer,.is-dhikr-reader > .drawer-backdrop,.is-dhikr-reader > .search-overlay,.is-dhikr-reader > .prefooter-cta,.is-dhikr-reader > .site-footer,.is-dhikr-reader > .mobile-bottom-nav,.is-dhikr-reader > .toast { display: none!important; }
.is-dhikr-reader main { min-height: 100vh; }
.dhikr-reader-page { min-height: 100vh; color: #fff; background: radial-gradient(circle at 15% 15%,rgba(229,173,43,.13),transparent 25%),radial-gradient(circle at 85% 75%,rgba(155,212,180,.1),transparent 30%),var(--deepest); }
.dhikr-reader-header { display: grid; min-height: 88px; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 4vw; border-bottom: 1px solid rgba(255,255,255,.1); }
.dhikr-reader-header > div { display: flex; flex-direction: column; align-items: center; font-size: .62rem; }
.dhikr-reader-header > div span { color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .12em; }
.dhikr-reader-header > a:last-child { justify-self: end; }
.dhikr-reader-header > a:last-child svg { width: 22px; }
.dhikr-reader-progress { height: 4px; background: rgba(255,255,255,.1); }
.dhikr-reader-progress span { display: block; width: 0; height: 100%; background: var(--gold); transition: width .3s ease; }
.dhikr-reader-status { display: flex; max-width: 900px; align-items: center; justify-content: space-between; margin: 0 auto; padding: 25px 24px; color: rgba(255,255,255,.62); font-size: .68rem; }
.dhikr-reader-status > div { display: flex; gap: 6px; }
.dhikr-reader-status a { display: flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.15); border-radius: 20px; }
.dhikr-reader-status a.is-active { color: var(--deepest); background: var(--gold); }
.dhikr-reader-status svg { width: 14px; }
.dhikr-slides { width: min(calc(100% - 40px),900px); min-height: calc(100vh - 255px); margin: auto; }
.dhikr-slide { padding: 45px 60px 130px; text-align: center; animation: dhikr-slide-in .35s ease both; }
.dhikr-slide h1 { margin: 15px 0 45px; font: 600 clamp(2rem,4vw,3.5rem)/1.08 var(--serif); }
.dhikr-slide-reading { padding: 45px; color: var(--charcoal); border-radius: 22px; background: #fff; }
.dhikr-slide-reading .arabic-text { margin: 0 0 35px; font-size: clamp(2.2rem,2.5vw,4rem); line-height: 1.9; }
.dhikr-slide-reading .dhikr-arabic-blocks > p + p { margin-top: 46px; padding-top: 38px; }
.dhikr-slide-reading .latin-text { color: var(--slate); font-style: italic; line-height: 1.8; }
.dhikr-slide-reading .translation { margin: 28px auto 0; font: 500 1.2rem/1.75 var(--serif); }
.dhikr-slide details { margin: 25px 0 18px; padding: 18px 22px; color: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; text-align: left; }
.dhikr-slide details summary { cursor: pointer; color: #fff; font-size: .72rem; font-weight: 700; }
.dhikr-slide details p { font-size: 1rem; line-height: 1.75; }
.dhikr-slide .source-label { color: rgba(255,255,255,.64); }
.dhikr-reader-controls { position: fixed; z-index: 5; right: 0; bottom: 0; left: 0; display: flex; min-height: 82px; align-items: center; justify-content: space-between; padding: 0 4vw; border-top: 1px solid rgba(255,255,255,.1); background: rgba(4,35,21,.94); backdrop-filter: blur(12px); }
.dhikr-reader-controls button { display: flex; align-items: center; gap: 10px; padding: 13px 18px; color: #fff; border: 0; border-radius: 30px; background: transparent; font-weight: 700; }
.dhikr-reader-controls button:last-child { color: var(--deepest); background: var(--gold); }
.dhikr-reader-controls button:disabled { opacity: .35; }
.dhikr-reader-controls svg { width: 17px; }
.dhikr-complete { padding: 90px 30px; text-align: center; }
.dhikr-complete > svg { width: 75px; height: 75px; margin-bottom: 25px; color: var(--gold); }
.dhikr-complete h1 { margin: 15px 0; font: 600 clamp(2.8rem,6vw,5rem)/1 var(--serif); }
.dhikr-complete p { color: rgba(255,255,255,.65); }
.dhikr-complete > div { display: flex; justify-content: center; gap: 12px; margin-top: 35px; }
@keyframes dhikr-slide-in { from { opacity: 0; transform: translateX(25px); } to { opacity: 1; transform: none; } }

@media (max-width: 700px) {
    .dhikr-period-grid { grid-template-columns: 1fr; }
    .dhikr-period-card { min-height: 310px; padding: 30px; }
    .dhikr-list-card { grid-template-columns: 32px minmax(0,1fr); gap: 14px; padding: 25px 18px; }
    .dhikr-copy { grid-column: 2; }
    .dhikr-list-copy .arabic-text { font-size: 1.65rem; }
    .dhikr-detail-toolbar { align-items: flex-start; flex-direction: column; gap: 18px; }
    .dhikr-reader-header { min-height: 72px; grid-template-columns: 1fr auto; padding: 0 18px; }
    .dhikr-reader-header > div { display: none; }
    .dhikr-reader-status { padding: 18px; }
    .dhikr-slides { width: min(calc(100% - 24px),900px); }
    .dhikr-slide { padding: 25px 0 115px; }
    .dhikr-slide h1 { margin-bottom: 28px; }
    .dhikr-slide-reading { padding: 30px 18px; border-radius: 15px; }
    .dhikr-slide-reading .arabic-text { font-size: 2.15rem; }
    .dhikr-reader-controls { min-height: 72px; padding: 0 12px; }
    .dhikr-reader-controls button { padding: 11px 13px; font-size: .7rem; }
    .dhikr-complete > div { align-items: stretch; flex-direction: column; }
}

.question-email-link { display: inline-flex; align-items: center; gap: 12px; margin: 10px 0 22px; padding: 12px 15px; color: var(--forest); border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.question-email-link > svg { width: 20px; }
.question-email-link span,.question-email-link small,.question-email-link strong { display: block; }
.question-email-link small { color: var(--slate); font-size: .62rem; font-weight: 500; }
.question-email-link strong { font-size: .78rem; }