/* Mustaqeem website: one stylesheet for every page. Self-hosted fonts (SIL Open Font License, see /fonts/*-OFL.txt).
   Amiri Arabic is subset to the letters the site uses (unicode-range lists them); add any new ones to the subset. */
@font-face{font-family:"Fraunces";src:url("/fonts/fraunces-opsz-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";src:url("/fonts/fraunces-opsz-italic-latin.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";src:url("/fonts/dm-sans-latin.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Amiri";src:url("/fonts/amiri-400-arabic.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0621,U+0627,U+0628,U+062A,U+062C,U+062F,U+0631,U+0633,U+0634,U+0635,U+0637,U+0638,U+0639,U+063A,U+0641,U+0642,U+0644,U+0645,U+0646,U+0647,U+064A,U+064E,U+064F,U+0650,U+0651,U+0652,U+0670,U+0671,U+FDFA,U+200C-200F}
@font-face{font-family:"Amiri";src:url("/fonts/amiri-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Layout: one long day. Cream morning hero, green "straight path" band, a sticky sky that moves
   Fajr → Isha while the phone beside it changes screen, then companion, details, essentials, FAQ,
   and a night sky that turns to dawn at the very end. */
:root{
  --ground:#F6F1E8; --ground-2:#EFE8DB; --card:#FFFDF8; --ink:#17150F; --muted:#5B5548; --line:#E6DDCD;
  --green:#1F5E4B; --deep:#174A3B; --deep-2:#123E31; --gold:#C9A24B; --gold-soft:#E2BE6A; --gold-text:#8A6D26;
  --night:#0D1622; --cream:#F6F1E8;
  --display:"Fraunces", Georgia, "Times New Roman", serif;
  --body:"DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --arabic:"Amiri", "Geeza Pro", "Noto Naskh Arabic", "Times New Roman", serif;
  --ease:cubic-bezier(.2,.7,.2,1); --ease-in:cubic-bezier(.5,0,.75,0); --spring:cubic-bezier(.34,1.56,.64,1);
  --t1:160ms; --t2:420ms; --t3:720ms;
  --gutter:clamp(16px,4.5vw,56px); --maxw:1180px; --header-h:64px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--header-h) + 72px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.04;letter-spacing:-.015em;margin:0;text-wrap:balance}
p{margin:0}
.eyebrow{font:600 12.5px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--cream);padding:10px 14px;border-radius:10px;z-index:100}
.skip:focus{left:12px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* reveal: only when JS runs; content is visible without JS */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity 900ms var(--ease),transform 900ms var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
.js [data-reveal="2"]{transition-delay:90ms}.js [data-reveal="3"]{transition-delay:180ms}.js [data-reveal="4"]{transition-delay:270ms}

/* ---------- App Store badge: Apple's official artwork, unmodified, with clear space of a quarter of its height ---------- */
.store{display:inline-flex;align-items:center;line-height:0;padding:12px;margin:-12px;border-radius:20px;text-decoration:none;transition:transform var(--t1) var(--ease)}
.store img{display:block;height:48px;width:auto}
.store:hover{transform:translateY(-1px)}
.store:active{transform:scale(.97)}
.store.sm{padding:10px;margin:-10px;border-radius:16px}
.store.sm img{height:40px}
.store .b-white{display:none}
.site-header[data-dark] .store .b-black{display:none}
.site-header[data-dark] .store .b-white{display:block}
.android{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--muted)}
.android .pip{width:8px;height:8px;border-radius:50%;background:var(--gold)}

/* ---------- header ---------- */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;transition:background var(--t2) var(--ease),color var(--t2) var(--ease),border-color var(--t2) var(--ease);background:rgba(246,241,232,.88);backdrop-filter:saturate(1.4) blur(18px);-webkit-backdrop-filter:saturate(1.4) blur(18px);border-bottom:1px solid rgba(23,21,15,.06);color:var(--ink)}
.site-header[data-dark]{background:rgba(13,22,34,.78);color:var(--cream);border-color:rgba(255,255,255,.08)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--header-h)}
.wordmark{font:600 23px/1 var(--display);letter-spacing:-.01em;text-decoration:none;display:flex;align-items:center;gap:10px}
.wordmark img{width:28px;height:28px;flex:none;border-radius:8px}
.nav{display:flex;gap:26px;font-size:15px;font-weight:500}
.nav a{text-decoration:none;opacity:.72;transition:opacity var(--t1) var(--ease)}
.nav a:hover{opacity:1}
@media (max-width:860px){.nav{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:auto 0 0 0;height:60%;background:radial-gradient(70% 90% at 70% 100%,rgba(201,162,75,.16),transparent 70%);z-index:-1}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,5vw,72px);align-items:center;padding-block:clamp(36px,6vw,88px) clamp(56px,7vw,110px)}
.hero h1{font-size:clamp(48px,7.6vw,104px);font-weight:600;letter-spacing:-.035em;line-height:.95}
.hero h1 em{font-style:italic;font-weight:500;color:var(--green)}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .w>span{display:inline-block}
.hero .lede{margin-top:26px;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--muted);max-width:32em}
.hero .eyebrow{color:var(--green);margin-bottom:22px;display:flex;align-items:center;gap:10px}
.hero .eyebrow::before{content:"";width:22px;height:1.5px;background:currentColor}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:34px}
.textlink{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;color:var(--deep);min-height:44px}
.textlink svg{width:16px;height:16px;transition:transform var(--t2) var(--ease)}
.textlink:hover svg{transform:translateY(3px)}
.hero .android{margin-top:18px}
.hero-art{position:relative;display:grid;place-items:center;perspective:1400px}
.sunpath{position:absolute;left:50%;bottom:4%;width:170%;transform:translateX(-50%);height:auto;overflow:visible;pointer-events:none;z-index:-1}
.sunpath path{fill:none;stroke:var(--gold);stroke-opacity:.5;stroke-width:1.4;stroke-dasharray:2 9}
.sunpath .sun{fill:#E9BE55;filter:drop-shadow(0 0 14px rgba(233,190,85,.7))}
.sunpath .moon{fill:#C9C2B0}
.phone{position:relative;width:100%;aspect-ratio:1179/2556;border-radius:15% / 7%;background:linear-gradient(145deg,#2a2a2a,#0d0d0d 40%,#1c1c1c);padding:3.4%;box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 1px 0 rgba(255,255,255,.12) inset,0 40px 80px -30px rgba(23,21,15,.55),0 18px 30px -18px rgba(23,21,15,.4)}
.phone .scr{position:relative;width:100%;height:100%;border-radius:12.4% / 5.7%;overflow:hidden;background:#000;transform:translateZ(0)}
.phone .scr img{width:100%;height:100%;object-fit:cover}
.phone .glare{position:absolute;inset:3.4%;border-radius:12.4% / 5.7%;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 32%);opacity:.0;transition:opacity var(--t2)}
.hero .tilt{width:min(360px,100%);transform-style:preserve-3d;will-change:transform}
.hero .tilt .phone{transform:translateZ(0)}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .hero .tilt{width:min(310px,74vw)}
}
.gift-card .eyebrow{color:#D4B062}
#qibla-demo .qd{margin-top:14px}
/* load choreography */
@media (prefers-reduced-motion:no-preference){
  .js .hero h1 .w>span{transform:translateY(105%);animation:wordup 900ms var(--ease) forwards}
  .js .hero h1 .w>span.d1{animation-delay:70ms}.js .hero h1 .w>span.d2{animation-delay:140ms}.js .hero h1 .w>span.d3{animation-delay:210ms}
  .js .hero .eyebrow,.js .hero .lede,.js .hero .cta,.js .hero .android{opacity:0;transform:translateY(14px);animation:fadeup 800ms var(--ease) forwards}
  .js .hero .eyebrow{animation-delay:40ms}.js .hero .lede{animation-delay:420ms}.js .hero .cta{animation-delay:540ms}.js .hero .android{animation-delay:640ms}
  .js .hero .tilt{animation:phonein 1300ms var(--ease) 120ms both}
  @keyframes wordup{to{transform:none}}
  @keyframes fadeup{to{opacity:1;transform:none}}
  @keyframes phonein{from{opacity:0;transform:translateY(60px) rotateX(18deg) scale(.94)}to{opacity:1;transform:none}}
  @keyframes pop{from{opacity:0;transform:scale(.6) translateY(8px);transform-origin:0 100%}to{opacity:1;transform:none}}
}

/* ---------- straight path ---------- */
.path{background:var(--deep);color:var(--cream);position:relative;overflow:hidden;isolation:isolate}
.path::before{content:"";position:absolute;inset:-20% -10% auto auto;width:60%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(212,176,98,.14),transparent);z-index:-1}
.path .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:center;padding-block:clamp(72px,10vw,140px)}
.ayah{margin:0}
.ayah .ar{font-family:var(--arabic);font-size:clamp(40px,5.4vw,70px);line-height:1.95;direction:rtl;text-align:right;color:#FBF7EE;margin:0}
.ayah figcaption{margin-top:8px;display:grid;gap:4px;text-align:right}
.ayah .en{font:500 clamp(19px,1.8vw,23px)/1.4 var(--display);font-style:italic}
.ayah cite{font-style:normal;font-size:14px;color:rgba(246,241,232,.7)}
.path h2{font-size:clamp(36px,4.6vw,60px);letter-spacing:-.025em}
.path p.body{margin-top:20px;font-size:18px;line-height:1.65;color:rgba(246,241,232,.84);max-width:30em}
.path .eyebrow{color:#D4B062;margin-bottom:18px}
.path .rule{position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(212,176,98,.7),transparent);transform-origin:50% 50%;transform:scaleX(.2);opacity:.5;transition:transform 1600ms var(--ease),opacity 1600ms var(--ease)}
.path.in .rule{transform:none;opacity:1}
@media (max-width:860px){.path .wrap{grid-template-columns:1fr}}

/* ---------- the day ---------- */
/* the chapters' text sits on the sticky sky; the same gradient under the section makes that the measured background */
.day{position:relative;overflow:clip;--sky-a:#232A4C;--sky-b:#C98F8B;--stars:.6;--glow:0;background:linear-gradient(180deg,var(--sky-a),var(--sky-b))}
.sky{position:sticky;top:0;height:100vh;height:100lvh;margin-bottom:-100vh;margin-bottom:-100lvh;background:linear-gradient(180deg,var(--sky-a) 0%,var(--sky-b) 100%);z-index:0;overflow:hidden}
.no-js .sky{position:absolute;inset:0;height:auto;margin:0;background:linear-gradient(180deg,#232A4C 0%,#C98F8B 22%,#BFD6E2 30%,#F4EEE2 40%,#E7CF9F 50%,#F5E8D1 58%,#4A3158 66%,#E0875A 78%,#0B131E 84%,#1A2A3D 100%)}
.sky .stars,.sky .stars2{position:absolute;inset:0;opacity:var(--stars);background-repeat:repeat;background-size:420px 420px}
.sky .stars{background-image:radial-gradient(1.3px 1.3px at 30px 40px,#fff 50%,transparent 52%),radial-gradient(1px 1px at 120px 210px,#fff 50%,transparent 52%),radial-gradient(1.4px 1.4px at 260px 90px,#fff 50%,transparent 52%),radial-gradient(1px 1px at 340px 300px,#fff 50%,transparent 52%),radial-gradient(1.2px 1.2px at 200px 360px,#fff 50%,transparent 52%),radial-gradient(1px 1px at 390px 160px,#fff 50%,transparent 52%)}
.sky .stars2{background-size:560px 560px;background-image:radial-gradient(1.1px 1.1px at 80px 120px,#fff 50%,transparent 52%),radial-gradient(1.5px 1.5px at 300px 60px,#fff 50%,transparent 52%),radial-gradient(1px 1px at 460px 260px,#fff 50%,transparent 52%),radial-gradient(1.2px 1.2px at 180px 470px,#fff 50%,transparent 52%),radial-gradient(1px 1px at 520px 420px,#fff 50%,transparent 52%)}
.sky .glow{position:absolute;left:50%;bottom:-30%;width:140%;aspect-ratio:2/1;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,196,120,.55),transparent);opacity:var(--glow)}
@media (prefers-reduced-motion:no-preference){
  .day.live .sky .stars{animation:twinkle 5.5s ease-in-out infinite alternate}
  .day.live .sky .stars2{animation:twinkle 7.5s ease-in-out -2s infinite alternate}
  @keyframes twinkle{from{filter:brightness(.55)}to{filter:brightness(1.25)}}
}
.day-head{position:relative;z-index:1;padding-block:clamp(84px,10vw,136px) 8px;color:var(--cream)}
.day-head h2{font-size:clamp(44px,6.6vw,92px);letter-spacing:-.035em}
.day-head p{margin-top:16px;max-width:34em;font-size:18px;color:rgba(246,241,232,.84)}
.day-head .eyebrow{color:#E9C98A;margin-bottom:16px}

.strip{position:sticky;top:calc(var(--header-h) + env(safe-area-inset-top,0px));z-index:5;display:flex;justify-content:center;padding-block:14px;pointer-events:none}
.strip ol{pointer-events:auto;list-style:none;margin:0;padding:6px;display:flex;gap:2px;background:rgba(13,22,34,.62);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border:1px solid rgba(255,255,255,.14);border-radius:999px;box-shadow:0 10px 30px -14px rgba(0,0,0,.5)}
.strip a{position:relative;display:flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;text-decoration:none;color:rgba(255,255,255,.78);font-size:14px;font-weight:600;transition:color var(--t1) var(--ease)}
.strip a:hover{color:#fff}
.strip .dot{position:relative;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.55);display:grid;place-items:center;flex:none;transition:background var(--t2) var(--ease),border-color var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
.strip .dot svg,.strip .dot::after{grid-area:1/1}
.strip .dot svg{width:10px;height:10px}
.strip .dot path{stroke-dasharray:12;stroke-dashoffset:12;transition:stroke-dashoffset var(--t2) var(--ease) 80ms}
.strip [data-state="done"] .dot{background:var(--cream);border-color:var(--cream)}
.strip [data-state="done"] .dot path{stroke-dashoffset:0}
.strip [data-state="now"]{color:#fff}
.strip [data-state="now"] .dot{border-color:var(--gold-soft);box-shadow:0 0 0 4px rgba(226,190,106,.22)}
.strip [data-state="now"] .dot::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold-soft)}
.strip .pill{position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.12);z-index:-1;opacity:0;transition:opacity var(--t2)}
.strip [data-state="now"] .pill{opacity:1}
@media (max-width:620px){.strip a{padding:0 9px;font-size:12.5px;gap:6px}.strip ol{gap:0}}
@media (max-width:360px){.strip a{padding:0 6px;font-size:11.5px}.strip .dot{width:14px;height:14px}}

.day-body{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px)}
.chapter{min-height:96vh;display:flex;flex-direction:column;justify-content:center;padding-block:12vh;color:var(--tone);transition:opacity var(--t3) var(--ease)}
.chapter[data-tone="light"]{--tone:var(--cream);--tone-soft:rgba(246,241,232,.84);--chip:rgba(255,255,255,.13);--chip-line:rgba(255,255,255,.18)}
.chapter[data-tone="dark"]{--tone:var(--ink);--tone-soft:#3A362D;--chip:rgba(23,21,15,.06);--chip-line:rgba(23,21,15,.1)}
.chapter .when{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.chapter .when .ar{font-family:var(--arabic);font-size:32px;line-height:1}
.chapter .when .en{font:600 12.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;opacity:.86}
.chapter h3{font-size:clamp(36px,4.2vw,58px);letter-spacing:-.03em}
.chapter p.body{margin-top:18px;font-size:18px;line-height:1.65;color:var(--tone-soft);max-width:30em}
.chapter ul.chips{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.chapter ul.chips li{font-size:14.5px;font-weight:500;padding:8px 13px;border-radius:12px;background:var(--chip);border:1px solid var(--chip-line)}
.chapter .inline-phone{display:none}
.chapter figure.extra{margin:28px 0 0;max-width:420px}
.chapter figure.extra img{border-radius:20px;box-shadow:0 24px 44px -24px rgba(0,0,0,.55)}
.chapter figure.extra figcaption{margin-top:10px;font-size:13.5px;color:var(--tone-soft)}

.stage{position:sticky;top:0;height:100vh;height:100lvh;display:flex;align-items:center;justify-content:center;perspective:1600px}
.stage .arc{position:absolute;top:calc(var(--header-h) + 70px);left:50%;transform:translateX(-50%);width:min(560px,96%);height:auto;overflow:visible}
.stage .arc path{fill:none;stroke:rgba(255,255,255,.4);stroke-width:1.4;stroke-dasharray:2 8}
.stage .arc .sun{fill:#F3D27A;filter:drop-shadow(0 0 12px rgba(243,210,122,.9))}
.stage .arc .moon{fill:#F6F1E8;filter:drop-shadow(0 0 10px rgba(246,241,232,.6))}
.stage .watermark{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.stage .watermark span{grid-area:1/1;font-family:var(--arabic);font-size:min(30vw,340px);line-height:1;color:#fff;opacity:0;transform:translateY(20px) scale(.96);transition:opacity 900ms var(--ease),transform 900ms var(--ease)}
.stage .watermark span.on{opacity:.075;transform:none}
.screens{position:relative;width:min(340px,66%);margin-top:110px;transform-style:preserve-3d;transition:transform 900ms var(--ease)}
.screens .scr img{position:absolute;inset:0;clip-path:inset(100% 0 0 0);transition:clip-path 820ms cubic-bezier(.7,0,.2,1),filter 820ms var(--ease)}
.screens .scr img.shown{clip-path:inset(0 0 0 0)}
.screens .scr img.covered{filter:brightness(.6)}
.screens .scr img:first-child{clip-path:inset(0 0 0 0)}
.illus{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-size:12.5px;color:rgba(255,255,255,.72);white-space:nowrap;text-shadow:0 1px 8px rgba(0,0,0,.25)}
@media (max-width:959px){
  .day-body{grid-template-columns:1fr}
  .stage{display:none}
  .chapter{min-height:auto;padding-block:64px 28px}
  .chapter .inline-phone{display:block;margin:34px auto 8px;width:min(300px,78vw)}
}

/* interactive demos (mirror real app behaviour) */
.demo{margin-top:28px;border-radius:24px;padding:18px;max-width:420px;background:var(--deep);color:var(--cream);box-shadow:0 24px 50px -28px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.06)}
.demo .tag{display:flex;justify-content:space-between;align-items:center;font:600 11.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#D4B062}
.demo .tag .try{color:rgba(246,241,232,.74);letter-spacing:.08em}
/* prayed demo */
.pd-title{margin-top:12px;font:600 34px/1 var(--display);letter-spacing:-.02em;min-height:1em}
.pd-line{margin-top:6px;font-size:14px;color:rgba(246,241,232,.75);min-height:1.4em}
.pd-btn{margin-top:14px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:0;background:var(--cream);color:var(--deep);font-weight:600;font-size:15px;cursor:pointer;transition:transform var(--t1) var(--ease),opacity var(--t2)}
.pd-btn:active{transform:scale(.96)}
.pd-btn svg{width:14px;height:14px}
.pd-strip{margin-top:18px;padding-top:16px;border-top:1px solid rgba(246,241,232,.18);display:grid;grid-template-columns:repeat(5,1fr);text-align:center;gap:2px}
.pd-strip span{display:grid;justify-items:center;gap:6px;font-size:12px;font-weight:600}
.pd-dot{width:28px;height:28px;border-radius:50%;border:2px solid rgba(246,241,232,.45);display:grid;place-items:center;transition:background var(--t2) var(--ease),border-color var(--t2) var(--ease),transform var(--t2) var(--spring)}
.pd-dot svg{width:15px;height:15px}
.pd-dot path{stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset 380ms var(--ease) 120ms}
.pd-strip [data-s="done"] .pd-dot{background:var(--cream);border-color:var(--cream)}
.pd-strip [data-s="done"] .pd-dot path{stroke-dashoffset:0}
.pd-strip [data-s="now"] .pd-dot{border-color:var(--gold-soft)}
.pd-strip [data-s="now"] .pd-dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--gold-soft)}
.pd-strip [data-s="now"]{color:var(--gold-soft)}
.pd-strip [data-s="pop"] .pd-dot{transform:scale(1.18)}
.pd-bubble{display:inline-block;margin-top:12px;background:var(--cream);color:var(--ink);font-size:14px;font-weight:500;padding:7px 12px;border-radius:14px 14px 14px 5px;transform-origin:0 100%;transition:transform var(--t2) var(--spring),opacity var(--t1)}
.pd-bubble[hidden]{display:inline-block!important;opacity:0;transform:scale(.6)}
/* qibla demo */
.qd{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center}
.qd-dial{position:relative;width:150px;height:150px;flex:none;touch-action:none;cursor:grab;border-radius:50%}
.qd-dial:active{cursor:grabbing}
.qd-dial svg{width:100%;height:100%;overflow:visible}
.qd-rot{transform-origin:75px 75px;transition:transform 260ms var(--ease)}
.qd-dial.dragging .qd-rot{transition:none}
.qd-status{font:600 24px/1.15 var(--display);letter-spacing:-.01em;min-height:2.3em;display:flex;align-items:flex-start;gap:8px}
.qd-status svg{width:20px;height:20px;flex:none;margin-top:3px}
.qd-sub{margin-top:4px;font-size:13.5px;color:rgba(246,241,232,.72)}
.qd-btns{margin-top:12px;display:flex;gap:8px}
.qd-btns button{min-height:40px;min-width:44px;padding:0 12px;border-radius:999px;border:1px solid rgba(246,241,232,.3);background:transparent;color:var(--cream);font-size:13.5px;font-weight:600;cursor:pointer;transition:background var(--t1)}
.qd-btns button:hover{background:rgba(246,241,232,.1)}
.qd.aligned .qd-status{color:var(--gold-soft)}
.demo.light{background:var(--card);color:var(--ink);border-color:var(--line);box-shadow:0 24px 50px -30px rgba(23,21,15,.45)}
.demo.light .tag .try{color:var(--muted)}
.demo.light .tag{color:var(--gold-text)}
.demo.light .qd-sub{color:var(--muted)}
.demo.light .qd-btns button{border-color:var(--line);color:var(--ink)}
.demo.light .qd-btns button:hover{background:var(--ground)}
.demo.light .qd.aligned .qd-status{color:var(--green)}
@media (max-width:420px){.qd{grid-template-columns:1fr;justify-items:start}}

/* ---------- companion ---------- */
.day ~ section{position:relative;z-index:1}
.companion{padding-block:clamp(88px,11vw,150px)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,5vw,80px);align-items:end}
.sec-head h2{font-size:clamp(40px,5.2vw,72px);letter-spacing:-.035em}
.sec-head p{font-size:18px;color:var(--muted);max-width:30em}
.sec-head .eyebrow{color:var(--green);margin-bottom:16px}
@media (max-width:860px){.sec-head{grid-template-columns:1fr}}
.cmp{margin-top:clamp(36px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(20px,4vw,56px);align-items:center}
.cmp-stage{position:relative;border-radius:30px 30px 22px 22px;overflow:hidden;background:var(--deep);box-shadow:0 40px 80px -40px rgba(23,21,15,.65);aspect-ratio:1059/528}
.cmp-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity 600ms var(--ease),transform 900ms var(--ease)}
.cmp-stage img.on{opacity:1;transform:none}
.cmp-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16%;background:linear-gradient(transparent,var(--deep));pointer-events:none}
.cmp-tabs{display:grid;gap:10px}
.cmp-tab{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:center;text-align:left;padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:transparent;cursor:pointer;transition:background var(--t2) var(--ease),border-color var(--t2) var(--ease),transform var(--t1)}
.cmp-tab:hover{background:var(--card)}
.cmp-tab:active{transform:scale(.99)}
.cmp-tab[aria-selected="true"]{background:var(--card);border-color:#D8CCB6;box-shadow:0 12px 26px -20px rgba(23,21,15,.5)}
.cmp-tab .n{grid-row:span 2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--ground-2);color:var(--green);font:600 13px/1 var(--body)}
.cmp-tab[aria-selected="true"] .n{background:var(--deep);color:var(--cream)}
.cmp-tab .k{font:600 12px/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.cmp-tab .v{font:500 18px/1.3 var(--display);color:var(--ink)}
.choose{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px 32px;font-size:15.5px;color:var(--muted)}
.choose strong{color:var(--ink);font-weight:600}
@media (max-width:860px){.cmp{grid-template-columns:1fr}.cmp-tabs{grid-template-columns:1fr 1fr}.cmp-tab{grid-template-columns:1fr;padding:14px}.cmp-tab .n{display:none}.cmp-tab .v{font-size:15.5px}}

/* ---------- details ---------- */
.details{background:var(--ground-2);padding-block:clamp(88px,11vw,150px)}
.collage{margin-top:clamp(36px,5vw,64px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;align-items:stretch}
.tile{margin:0;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;transition:transform var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
.tile:hover{transform:translateY(-3px);box-shadow:0 24px 40px -30px rgba(23,21,15,.45)}
.tile h3{font-size:24px;letter-spacing:-.015em}
.tile figcaption p{margin-top:6px;font-size:15.5px;color:var(--muted)}
.tile .shot img{border-radius:16px;box-shadow:0 10px 22px -16px rgba(23,21,15,.45)}
.t-tiles{grid-column:span 7}
.t-tiles .shot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.t-day{grid-column:span 5;grid-row:span 2}
.t-tasbih{grid-column:span 4;background:var(--deep);border-color:var(--deep);color:var(--cream)}
.t-tasbih figcaption p{color:rgba(246,241,232,.75)}
.t-five{grid-column:span 3}
.t-widgets{grid-column:span 7;background:#262A30;border-color:#262A30;color:var(--cream)}
.t-widgets figcaption p{color:rgba(246,241,232,.72)}
.t-widgets .shot{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:12px;align-items:start}
.t-widgets .shot .col{display:grid;gap:12px}
.t-lock{grid-column:span 5;background:var(--ground)}
.t-day .shot img,.t-lock .shot img{border-radius:18px}
.t-five .shot img{max-width:180px}
@media (max-width:980px){.t-tiles,.t-day,.t-widgets,.t-lock{grid-column:1 / -1;grid-row:auto}.t-tasbih{grid-column:span 7}.t-five{grid-column:span 5}}
@media (max-width:620px){.t-tasbih,.t-five{grid-column:1 / -1}}
/* tasbih counter */
.tb{display:flex;align-items:center;gap:18px}
.tb-btn{position:relative;width:132px;height:132px;flex:none;border-radius:50%;border:0;background:rgba(246,241,232,.06);cursor:pointer;display:grid;place-items:center;transition:transform 120ms var(--ease);-webkit-tap-highlight-color:transparent}
.tb-btn:active{transform:scale(.95)}
.tb-btn svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.tb-btn .track{fill:none;stroke:rgba(246,241,232,.16);stroke-width:7}
.tb-btn .prog{fill:none;stroke:var(--gold-soft);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset 260ms var(--ease)}
.tb-num{font:600 40px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--cream)}
.tb-num.bump{animation:bump 260ms var(--ease)}
@keyframes bump{0%{transform:translateY(6px);opacity:.4}100%{transform:none;opacity:1}}
.tb-btn.full{animation:ring 700ms var(--ease)}
@keyframes ring{40%{box-shadow:0 0 0 14px rgba(226,190,106,.18)}100%{box-shadow:0 0 0 0 rgba(226,190,106,0)}}
.tb-meta{font-size:14px;color:rgba(246,241,232,.75);display:grid;gap:4px}
.tb-meta b{font:600 17px/1.2 var(--body);color:var(--cream)}

/* ---------- essentials ---------- */
.free{padding-block:clamp(88px,11vw,150px)}
.free-grid{margin-top:clamp(36px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,72px);align-items:start}
.list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;padding:20px 0;border-bottom:1px solid var(--line)}
.list .ic{width:44px;height:44px;border-radius:14px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--green)}
.list .ic svg{width:24px;height:24px}
.list h3{font:600 19px/1.3 var(--body);letter-spacing:0}
.list p{margin-top:4px;font-size:15.5px;color:var(--muted)}
.premium{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:28px;display:grid;gap:16px;position:sticky;top:calc(var(--header-h) + 24px)}
.premium .eyebrow{color:var(--gold-text)}
.premium h3{font-size:34px;letter-spacing:-.02em}
.premium p{font-size:16px;color:var(--muted)}
.premium .plist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.premium .plist li{display:grid;gap:2px;padding-left:16px;position:relative}
.premium .plist li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.premium .plist b{font-weight:600}
.premium .plist span{font-size:15px;color:var(--muted)}
.premium .fine{font-size:13.5px}
.premium img{border-radius:18px;box-shadow:0 10px 24px -16px rgba(23,21,15,.4)}
@media (max-width:900px){.free-grid{grid-template-columns:1fr}.premium{position:static}}

/* ---------- optional sections (enable in CONFIG) ---------- */
.band{padding-block:clamp(80px,10vw,130px)}
.band.alt{background:var(--ground-2)}
.gift-card{margin-top:40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center;background:var(--deep);color:var(--cream);border-radius:32px;padding:clamp(24px,4vw,48px)}
.gift-card h3{font-size:clamp(28px,3vw,40px)}
.gift-card p{margin-top:12px;color:rgba(246,241,232,.82)}
.gift-card ol{margin:18px 0 0;padding-left:20px;display:grid;gap:8px;color:rgba(246,241,232,.9)}
@media (max-width:860px){.gift-card{grid-template-columns:1fr}}
.cards{margin-top:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cards article{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:26px}
.cards h3{font-size:24px;letter-spacing:-.01em}
.cards p{margin:10px 0 0;color:var(--muted);font-size:16px}
.band .safe{margin-top:22px;font-size:15px;color:var(--muted)}
@media (max-width:860px){.cards{grid-template-columns:1fr}}
.reviews{margin-top:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.reviews blockquote{margin:0;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:24px;font:500 19px/1.45 var(--display)}
.reviews cite{display:block;margin-top:14px;font:500 14px/1.3 var(--body);font-style:normal;color:var(--muted)}
@media (max-width:860px){.reviews{grid-template-columns:1fr}}

/* ---------- faq ---------- */
.faq{background:var(--ground-2);padding-block:clamp(88px,11vw,140px)}
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,6vw,96px);align-items:start}
.faq h2{font-size:clamp(40px,5.2vw,68px);letter-spacing:-.035em}
.faq .eyebrow{color:var(--green);margin-bottom:16px}
.qa{border-top:1px solid #D9CFBD}
.qa details{border-bottom:1px solid #D9CFBD}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font:600 19px/1.35 var(--body)}
.qa summary::-webkit-details-marker{display:none}
.qa summary .pm{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid #CFC4B0;display:grid;place-items:center;transition:transform var(--t2) var(--ease),background var(--t1)}
.qa summary .pm svg{width:14px;height:14px}
.qa details[open] summary .pm{transform:rotate(45deg);background:var(--card)}
.qa .a{padding:0 48px 24px 0;font-size:16.5px;color:var(--muted);max-width:40em}
.qa .a p+p{margin-top:10px}
.qa .a a{color:var(--deep);font-weight:600}
@media (prefers-reduced-motion:no-preference){.qa details[open] .a{animation:fadeup 420ms var(--ease)}}
@media (max-width:860px){.faq-grid{grid-template-columns:1fr}.qa .a{padding-right:0}}

/* ---------- close: night to dawn ---------- */
.close{--r:0;position:relative;overflow:hidden;color:var(--cream);isolation:isolate;background:linear-gradient(180deg,#0B131E 0%,#14243A 45%,#2B2C4F 75%,#6A4A62 100%)}
.close::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#1F2B4D 0%,#5A5478 40%,#D99A86 78%,#F3C99A 100%);opacity:var(--r)}
.close .sunrise{position:absolute;left:50%;bottom:0;width:min(560px,90vw);aspect-ratio:1;border-radius:50%;transform:translate(-50%,calc(88% - var(--r) * 34%));background:radial-gradient(closest-side,#FFE2A6 0%,#F7C77B 40%,rgba(247,199,123,.35) 62%,transparent 72%);z-index:-1;opacity:calc(.25 + var(--r) * .75)}
.close .stars{position:absolute;inset:0;z-index:-1;opacity:calc(1 - var(--r));background-size:420px 420px;background-image:radial-gradient(1.3px 1.3px at 30px 40px,#fff 50%,transparent 52%),radial-gradient(1px 1px at 120px 210px,#fff 50%,transparent 52%),radial-gradient(1.4px 1.4px at 260px 90px,#fff 50%,transparent 52%),radial-gradient(1px 1px at 340px 300px,#fff 50%,transparent 52%),radial-gradient(1px 1px at 390px 160px,#fff 50%,transparent 52%)}
.close .wrap{padding-block:clamp(110px,13vw,190px) clamp(150px,18vw,260px);display:grid;justify-items:center;text-align:center;gap:22px}
.close h2{font-size:clamp(48px,8vw,124px);letter-spacing:-.04em;line-height:.96}
.close p{font-size:18px;color:rgba(246,241,232,.84);max-width:30em}
.close .cta{justify-content:center;margin-top:10px}
.close .android{color:rgba(246,241,232,.8)}

/* ---------- footer ---------- */
.foot{background:var(--night);color:rgba(246,241,232,.72);font-size:14.5px}
.foot .wrap{padding-block:40px calc(40px + env(safe-area-inset-bottom,0px));display:grid;gap:22px}
.foot .top{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:center}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot a{text-decoration:none;color:var(--cream)}
.foot a:hover{text-decoration:underline}
.foot .wordmark{color:var(--cream)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:1ms!important;animation:none!important}
  .js [data-reveal]{opacity:1;transform:none}
  .screens .scr img{clip-path:none;opacity:0}
  .screens .scr img.shown:not(.covered){opacity:1}
}

/* ---------- other pages: legal, support, gift, 404 ---------- */
.page{padding-block:clamp(40px,7vw,96px) clamp(64px,9vw,120px)}
.doc{max-width:68ch;margin-inline:auto}
.doc h1{font-size:clamp(40px,6vw,64px);letter-spacing:-.03em;line-height:1}
.doc h2{font-size:clamp(26px,3vw,32px);letter-spacing:-.02em;line-height:1.15;margin-top:2.2em}
.doc h3{font:600 19px/1.35 var(--body);letter-spacing:0;margin-top:1.6em}
.doc p,.doc ul,.doc ol,.doc .table-wrap,.doc details{margin-top:1em}
.doc ul,.doc ol{padding-left:1.3em}
.doc li+li{margin-top:.45em}
.doc li::marker{color:var(--green)}
.doc a{color:var(--deep);font-weight:500;text-decoration-thickness:1px;text-underline-offset:3px}
.doc a:hover{text-decoration-thickness:2px}
.doc strong{font-weight:600}
.doc .meta{margin-top:12px;font-size:15px;color:var(--muted)}
.doc .lead{margin-top:18px;font-size:clamp(18px,1.6vw,20px);color:var(--muted)}
.doc .summary,.doc .toc,.doc .contact-card{margin-top:28px;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:22px 26px}
.doc .summary h2,.doc .toc h2{margin-top:0;font-size:22px}
.doc .toc ol{columns:2 220px;column-gap:28px}
.doc .toc li{break-inside:avoid}
.doc .contact-card p:first-child{margin-top:0}
.doc .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.doc table{width:100%;border-collapse:collapse;font-size:15px}
.doc th,.doc td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line)}
.doc th{font-weight:600;background:var(--ground-2)}
.doc tr:last-child td{border-bottom:0}
.doc details{border-bottom:1px solid var(--line);padding-bottom:4px}
.doc details:first-of-type{border-top:1px solid var(--line)}
.doc summary{cursor:pointer;padding:16px 0;font:600 18px/1.35 var(--body);list-style:none;display:flex;justify-content:space-between;gap:16px}
.doc summary::-webkit-details-marker{display:none}
.doc summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;border:1px solid #CFC4B0;display:grid;place-items:center;font-weight:500;transition:transform var(--t2) var(--ease)}
.doc details[open] summary::after{transform:rotate(45deg);background:var(--card)}
.doc details>:last-child{margin-bottom:16px}
@media (max-width:520px){.doc th,.doc td{padding:10px;font-size:14px}}
.pagecta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:30px}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:999px;background:var(--deep);color:var(--cream);font-weight:600;text-decoration:none;transition:transform var(--t1) var(--ease),background var(--t2)}
.button:hover{background:var(--green)}
.button:active{transform:scale(.97)}
.button.ghost{background:transparent;color:var(--deep);border:1.5px solid var(--deep)}
.button.ghost:hover{background:var(--card)}
.gift-page .companions{display:flex;gap:4px;margin-bottom:8px}
.gift-page .companions img{width:120px;height:auto}
.gift-page .eyebrow{color:var(--green);margin-top:8px}
.gift-page h1{margin-top:12px}
.code-card{margin-top:28px;background:var(--deep);color:var(--cream);border-radius:24px;padding:22px 26px}
.code-card p{margin:0;font-size:15px;color:rgba(246,241,232,.8)}
.code-card .code{margin-top:6px;font:600 clamp(28px,5vw,38px)/1.1 var(--display);letter-spacing:.06em;color:#D4B062;overflow-wrap:anywhere}
.steps{margin-top:14px}
.notfound{text-align:center;max-width:36em;margin-inline:auto;display:grid;justify-items:center;gap:18px}
.notfound .companions img{width:150px;height:auto}
.notfound h1{font-size:clamp(40px,6vw,64px);letter-spacing:-.03em}
.notfound p{font-size:18px;color:var(--muted)}
[hidden]{display:none!important}
.doc a.button{color:var(--cream);font-weight:600;text-decoration:none}
.doc a.button.ghost{color:var(--deep)}
.gift-page .companions img,.notfound .companions img{mix-blend-mode:multiply}
.notfound .pagecta{justify-content:center}
.foot p a{text-decoration:underline;text-underline-offset:3px}