/* Website palette comes from Jumu’ah's light theme. Screenshots are unchanged. */
:root{--paper:#f6f1e7;--paper-deep:#eee6d6;--panel:#fffaf1;--ink:#1b1a17;--muted:#666154;--line:#d9cfbb;--gold:#c9a84c;--gold-text:#7d6220;--serif:ui-serif,'New York',Georgia,'Times New Roman',serif;--sans:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:32px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body.dialog-open{overflow:hidden}
button,a,summary{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-underline-offset:5px}
button{font:inherit}
button,a,summary{touch-action:manipulation}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--gold-text);outline-offset:5px}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:400}
h1,h2{text-wrap:balance}
em{color:var(--gold-text);font-weight:400}
[hidden]{display:none!important}
.wrap{width:min(1280px,100%);padding-inline:48px;margin-inline:auto}
.section-space{padding-block:104px}
.skip{position:fixed;top:-100px;left:16px;padding:14px 20px;z-index:30;background:var(--ink);color:var(--paper);border-radius:4px}
.skip:focus{top:16px}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:104px;border-bottom:1px solid var(--line)}
.wordmark{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font:31px/1 var(--serif);letter-spacing:-.8px;flex-shrink:0}
.wordmark small{display:block;font:8px/1.5 var(--sans);letter-spacing:1.7px;color:var(--muted);margin-top:7px}
.brand-mark{position:relative;display:block;overflow:hidden;width:44px;height:48px;flex:0 0 44px}
.brand-mark img{position:absolute;width:100px;max-width:none;left:-28px;top:-4px}
.site-header nav{display:flex;align-items:center;gap:28px;font-size:13px}
.site-header nav a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.site-header nav a:not(.nav-download):hover{text-decoration:underline}
.nav-download{border:1px solid #b8a77d;border-radius:100px;padding:12px 19px;gap:18px;background:#f9f5ec}
.nav-download:hover{background:var(--paper-deep)}
.eyebrow{font-size:10px;line-height:1.6;font-weight:600;letter-spacing:1.9px;display:flex;align-items:center;gap:12px;margin-bottom:23px;color:var(--gold-text)}
.short-rule{width:27px;height:1px;background:var(--gold-text)}
.hero{display:grid;grid-template-columns:1.06fr 1fr;gap:25px;align-items:center;padding-block:70px 65px}
.hero h1{font-size:clamp(46px,4.7vw,64px);line-height:1.09;letter-spacing:-2.7px;margin-bottom:28px}
.hero-description{font-size:18px;line-height:1.7;max-width:435px}
.hero-context{font-size:16px;line-height:1.75;color:var(--muted);max-width:410px;margin-top:14px}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:25px;margin-top:31px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:54px;padding:17px 23px;border:1px solid #b49a51;border-radius:100px;background:linear-gradient(115deg,#e8d896,#c9a84c);color:var(--ink);font-size:14px;font-weight:600;line-height:1.4;text-decoration:none;transition:background .2s,box-shadow .2s}
.button:hover{background:#e8d896;box-shadow:0 3px 12px #65521a1a}
.button>span:last-child{margin-left:4px}
.text-link{display:inline-flex;align-items:center;gap:15px;min-height:44px;font-size:14px;line-height:1.5;text-decoration:underline;text-decoration-thickness:1px}
.text-link:hover{color:var(--gold-text)}
.download-note{font-size:12px;line-height:1.7;color:var(--muted);margin-top:16px}
.download-note>span{padding-inline:7px}
.hero-visual{min-width:0}
.screen-composition{height:590px;position:relative;isolation:isolate}
.screen-composition:before{content:'';position:absolute;z-index:-1;inset:30px -4px 20px 13px;background:#ede4d1;border-radius:250px 250px 30px 30px;border:1px solid #e1d4b9}
.phone{display:block;background:#0a0b14;border:5px solid #292a2e;border-radius:34px;overflow:hidden;box-shadow:0 18px 36px #4a3c202b;text-decoration:none}
.phone img{width:100%;border-radius:28px}
.phone:hover{box-shadow:0 18px 38px #4a3c2040}
.phone-home{width:235px;position:absolute;top:44px;left:4px;transform:rotate(-5deg)}
.phone-prayer{width:251px;position:absolute;top:1px;right:5px;transform:rotate(4deg)}
.hero-visual figcaption{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;color:var(--muted);line-height:1.6;margin-top:5px}
.caption-line{width:22px;height:1px;background:#b69e61}
.facts-band{background:var(--paper-deep);border-block:1px solid var(--line)}
.quick-facts{display:flex;justify-content:space-between;gap:24px;list-style:none;margin-block:0;padding-block:25px}
.quick-facts li{font-size:13px;line-height:1.5;display:flex;align-items:center;gap:14px}
.fact-mark{font:italic 17px var(--serif);color:var(--gold-text)}
h2{font-size:46px;line-height:1.15;letter-spacing:-1.7px}
.split-heading{display:grid;grid-template-columns:1.3fr 1fr;gap:80px;align-items:end}
.section-intro{font-size:16px;line-height:1.85;color:var(--muted);max-width:460px}
.split-heading>.section-intro{padding-bottom:4px}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin:52px 0 0;padding:0}
.steps li{border-top:1px solid var(--line);padding-top:25px}
.step-number{display:block;font:italic 28px var(--serif);color:var(--gold-text);margin-bottom:29px}
.steps h3{font-size:25px;line-height:1.25;letter-spacing:-.5px;margin-bottom:14px}
.steps p,.listening-modes p{font-size:14px;line-height:1.85;color:var(--muted)}
.listening-modes{display:grid;grid-template-columns:1fr 1fr;gap:36px;background:#eee7d9;border:1px solid #e3d8c2;border-radius:8px;padding:27px 30px;margin-top:42px}
.listening-modes article+article{border-left:1px solid #d6c9ad;padding-left:36px}
.mode-label{display:block;font-size:10px;font-weight:650;letter-spacing:1.5px;color:var(--gold-text);margin-bottom:9px}
.inside-section{background:var(--paper-deep);border-block:1px solid var(--line)}
.inside-layout{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center;padding-block:80px 45px}
.inside-copy{grid-column:2;grid-row:1}
.inside-copy h2{margin-bottom:24px}
.explore-tabs{margin-top:35px;border-top:1px solid #d4c7ad}
.explore-tab{width:100%;border:0;border-bottom:1px solid #d4c7ad;background:transparent;color:var(--muted);cursor:pointer;text-align:left;display:flex;align-items:center;justify-content:space-between;padding:20px 0;gap:14px;font:23px/1.3 var(--serif)}
.explore-tab small{font:11px var(--sans);color:var(--gold-text);margin-right:17px;vertical-align:middle}
.explore-tab>span:last-child{font:20px var(--sans);transition:transform .15s}
.explore-tab[aria-selected=true]{color:var(--ink)}
.explore-tab[aria-selected=true]>span:last-child{color:var(--gold-text);transform:rotate(45deg)}
.explore-tab[aria-selected=true]>span:first-child{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:7px;text-decoration-thickness:1px}
.explore-tab:hover{color:var(--ink)}
.explore-panels{grid-column:1;grid-row:1;min-width:0}
.study-phone{width:260px;margin-inline:auto}
.explore-panel figcaption{max-width:350px;min-height:125px;margin:28px auto 0;text-align:center}
.explore-panel figcaption strong{font-size:14px;font-weight:600;line-height:1.6;display:block}
.explore-panel figcaption p{font-size:13px;line-height:1.8;color:var(--muted);margin-top:8px}
.screen-source{text-align:center;font-size:10px;line-height:1.7;color:var(--muted);margin-top:2px}
.screen-source span{padding-inline:5px}
.extra-features{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding-block:30px 47px;border-top:1px solid #d4c7ad}
.extra-features article{display:flex;gap:21px;align-items:flex-start}
.feature-symbol{font:31px var(--serif);color:var(--gold-text);line-height:1}
.extra-features h3{font-size:23px;line-height:1.3;margin-bottom:10px}
.extra-features p{font-size:14px;line-height:1.8;color:var(--muted);max-width:410px}
.privacy-section{display:grid;grid-template-columns:1.2fr 1fr;gap:100px;align-items:center;border-bottom:1px solid var(--line)}
.privacy-section .eyebrow{font-size:9px}
.privacy-copy p{font-size:15px;line-height:1.85;color:var(--muted);margin-bottom:16px}
.privacy-copy p:first-child{color:var(--ink)}
.faq-section{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;padding-block:90px 105px}
.faq-contact{font-size:14px;line-height:2;color:var(--muted);margin-top:28px}
.faq-contact a{color:var(--ink)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list details:first-child{border-top:1px solid var(--line)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:18px;font-size:15px;line-height:1.6;cursor:pointer;list-style:none;padding-block:23px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary span{font-size:23px;color:var(--gold-text);font-weight:300;flex-shrink:0;transition:transform .15s}
.faq-list details[open] summary span{transform:rotate(45deg)}
.faq-list details p{font-size:14px;line-height:1.85;color:var(--muted);padding:0 28px 23px 0}
.closing-section{background:var(--paper-deep);border-top:1px solid var(--line)}
.closing-inner{text-align:center;padding-block:63px 70px}
.closing-icon{width:68px;height:68px;margin:0 auto 23px;border-radius:17px;box-shadow:0 6px 18px #4a3c2020}
.closing-inner .eyebrow{justify-content:center;margin-bottom:20px}
.closing-inner h2{font-size:57px;line-height:1.08}
.closing-inner>p:not(.eyebrow):not(.download-note){font-size:16px;line-height:1.7;color:var(--muted);margin-block:20px 27px}
.site-footer{display:flex;align-items:center;gap:28px;padding-block:33px}
.site-footer .wordmark{font-size:26px}
.site-footer p{font-size:11px;color:var(--muted)}
.site-footer nav{display:flex;gap:24px;align-items:center;margin-left:auto}
.site-footer nav a{display:flex;align-items:center;min-height:44px;font-size:12px;text-decoration:none}
.site-footer nav a:hover{text-decoration:underline}
.screen-dialog{width:min(440px,calc(100% - 28px));max-height:94dvh;padding:0;border:1px solid #d4c7ad;border-radius:16px;background:var(--paper);color:var(--ink);overscroll-behavior:contain}
.screen-dialog::backdrop{background:#1b1a17ba;backdrop-filter:blur(4px)}
.dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 16px;position:sticky;top:0;background:var(--paper);border-bottom:1px solid var(--line)}
.dialog-bar p{font-size:13px;font-weight:600}
.dialog-close{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px;border:0;border-radius:4px;color:var(--ink);background:transparent;cursor:pointer;font-size:12px}
.dialog-close span{font-size:25px}
.dialog-close:hover{background:var(--paper-deep)}
.dialog-image{width:100%;height:auto}
@media(min-width:1350px){.hero h1{font-size:65px}.hero{gap:45px}.phone-home{left:13px}.phone-prayer{right:12px}}
@media(max-width:1100px){.wrap{padding-inline:32px}.site-header nav{gap:21px}.hero{gap:12px}.hero h1{font-size:54px}.hero-description{font-size:17px}.screen-composition{height:535px}.phone-home{width:211px;left:5px;top:44px}.phone-prayer{width:225px;right:5px;top:3px}.hero-visual figcaption{font-size:10px}.split-heading{gap:45px}.inside-layout{gap:55px}.privacy-section{gap:55px}.faq-section{gap:55px}h2{font-size:41px}.quick-facts li{font-size:12px;gap:10px}}
@media(max-width:900px) and (min-width:761px){.site-header nav a:not(.nav-download){display:none}.hero h1{font-size:46px}.hero-description{font-size:16px}.hero-context{font-size:14px}.hero-actions{gap:12px}.hero .button{font-size:12px;padding-inline:17px}.screen-composition{height:480px}.phone-home{width:180px;left:0}.phone-prayer{width:196px;right:0}.hero-visual figcaption{font-size:9px;gap:5px}.caption-line{display:none}.quick-facts{gap:16px}.quick-facts li{font-size:11px}.split-heading{gap:30px}.steps{gap:25px}.steps h3{font-size:23px}.inside-layout{gap:35px}.privacy-section{gap:35px}h2{font-size:38px}.site-footer{gap:18px}.site-footer nav{gap:16px}}
@media(max-width:760px){
.wrap{padding-inline:24px}.section-space{padding-block:64px}.site-header{min-height:88px;gap:14px}.site-header .wordmark{font-size:28px}.wordmark small{font-size:7px;letter-spacing:1.5px}.brand-mark{width:34px;flex-basis:34px;height:40px}.brand-mark img{width:80px;left:-23px;top:-2px}.site-header nav>a:not(.nav-download){display:none}.nav-download{font-size:12px;padding:11px 15px;gap:12px}.hero{grid-template-columns:1fr;padding-block:43px 39px;gap:34px}.hero-copy{max-width:550px}.eyebrow{font-size:9px;letter-spacing:1.5px;margin-bottom:20px}.hero h1{font-size:clamp(40px,8.1vw,59px);letter-spacing:-1.9px;line-height:1.1;margin-bottom:24px}.hero-description{font-size:17px;line-height:1.7;max-width:480px}.hero-context{font-size:15px;max-width:460px;margin-top:12px}.hero-actions{gap:20px;margin-top:26px}.button{font-size:13px;padding:16px 20px;gap:12px}.text-link{font-size:13px}.download-note{font-size:11px}.hero-visual{width:100%;max-width:460px;margin-inline:auto}.screen-composition{height:540px}.phone-home{width:220px;left:5px;top:44px}.phone-prayer{width:236px;right:5px;top:0}.screen-composition:before{inset:25px 0 17px}.hero-visual figcaption{font-size:10px;gap:7px;margin-top:10px}.quick-facts{display:grid;grid-template-columns:1fr;padding-block:22px;gap:13px}.quick-facts li{font-size:13px;gap:14px}.fact-mark{font-size:15px}h2{font-size:37px;letter-spacing:-1.3px}.split-heading{grid-template-columns:1fr;gap:22px}.section-intro{font-size:15px;max-width:520px}.steps{grid-template-columns:1fr;gap:27px;margin-top:35px}.steps li{display:grid;grid-template-columns:35px 1fr;gap:0 15px;padding-top:25px}.step-number{grid-column:1;grid-row:1/3;font-size:25px;margin:0}.steps h3{font-size:24px;margin-bottom:10px}.steps p{grid-column:2;font-size:14px}.listening-modes{grid-template-columns:1fr;gap:22px;padding:23px;margin-top:31px}.listening-modes article+article{border-left:0;border-top:1px solid #d6c9ad;padding-left:0;padding-top:22px}.listening-modes p{font-size:13px}.inside-layout{grid-template-columns:1fr;gap:36px;padding-block:60px 35px}.inside-copy{grid-column:1;grid-row:1}.inside-copy h2{margin-bottom:20px}.explore-panels{grid-column:1;grid-row:2}.explore-tabs{margin-top:25px}.explore-tab{font-size:22px;padding-block:18px}.study-phone{width:min(260px,85%)}.explore-panel figcaption{min-height:0;margin-top:23px;max-width:340px}.screen-source{margin-top:14px}.extra-features{grid-template-columns:1fr;gap:25px;padding-block:30px 40px}.extra-features article{gap:18px}.extra-features h3{font-size:23px}.extra-features p{font-size:13px;max-width:500px}.privacy-section{grid-template-columns:1fr;gap:25px}.privacy-section .eyebrow{font-size:8px}.privacy-copy p{font-size:14px}.faq-section{grid-template-columns:1fr;gap:30px;padding-block:60px 65px}.faq-contact{font-size:13px;margin-top:19px}.faq-list summary{font-size:14px;padding-block:21px}.faq-list details p{font-size:14px}.closing-inner{padding-block:51px 56px}.closing-inner h2{font-size:45px}.closing-inner>p:not(.eyebrow):not(.download-note){font-size:14px}.closing-icon{width:62px;height:62px;border-radius:15px}.site-footer{flex-wrap:wrap;gap:17px;padding-block:25px}.site-footer p{margin-left:auto}.site-footer nav{width:100%;margin-left:0;justify-content:space-between;gap:16px}.site-footer .wordmark{font-size:25px}
}
@media(max-width:420px){.wrap{padding-inline:20px}.hero h1{font-size:40px;letter-spacing:-1.7px}.hero-description{font-size:16px}.hero-actions{gap:16px}.hero .button{font-size:12px;padding-inline:17px}.hero .text-link{font-size:12px}.screen-composition{height:454px}.phone{border-width:4px;border-radius:28px}.phone img{border-radius:23px}.phone-home{width:180px;left:2px}.phone-prayer{width:195px;right:2px}.hero-visual figcaption{font-size:9px}.caption-line{width:15px}.site-header .wordmark{font-size:25px}.site-header .brand-mark{width:30px;flex-basis:30px}.site-header .brand-mark img{width:73px;left:-21px;top:0}h2{font-size:34px}.privacy-section .eyebrow{letter-spacing:1.1px}.nav-download{gap:9px;padding-inline:12px}}
@media(max-width:350px){.wrap{padding-inline:16px}.wordmark small{font-size:6px}.hero h1{font-size:35px}.hero-actions{gap:10px}.hero .button{padding-inline:13px}.hero .text-link{font-size:11px}.screen-composition{height:405px}.phone-home{width:158px}.phone-prayer{width:174px}.hero-visual figcaption{font-size:8px}.site-footer nav{gap:12px}.site-footer nav a{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}