/* =========================================================================
   Ummah Connect - ummahconnect.co.in
   Palette, depth and motion are lifted from the app's own "ultra premium"
   design phase (app/src/main/res/values/colors.xml): deep emerald ground,
   gold hairlines, glass surfaces, a slow gold shine.
   Dark only, by design - it is the app's identity, not a theme choice.
   ========================================================================= */

:root {
  /* --- Emerald ground (colors.xml: ultra_premium_bg_*, emerald_*) --- */
  --ink:          #050F0A;
  --ink-2:        #081a12;
  --emerald-deep: #0E3324;
  --emerald-700:  #004D40;
  --emerald-600:  #00695C;
  --emerald-400:  #4DB6AC;

  /* --- Gold (colors.xml: gold_*) --- */
  --gold:         #D4AF37;
  --gold-bright:  #FFD700;
  --gold-soft:    #C5A059;
  --gold-hair:    rgba(212, 175, 55, .30);
  --gold-hair-2:  rgba(212, 175, 55, .55);
  --gold-glow:    rgba(212, 175, 55, .16);

  /* --- Text --- */
  --cream:        #FFFBF2;
  --text:         #EAF3EE;
  --text-2:       #A9C2B6;
  --text-3:       #7C978A;

  /* --- Glass --- */
  --glass:        rgba(255, 255, 255, .045);
  --glass-2:      rgba(255, 255, 255, .075);
  --glass-line:   rgba(255, 255, 255, .10);
  --glass-blur:   18px;

  /* --- Rhythm --- */
  --r-sm: 12px;  --r: 20px;  --r-lg: 28px;  --r-xl: 36px;
  --pad: clamp(18px, 3.2vw, 46px);
  --maxw: 1560px;
  --sect: clamp(72px, 11vw, 148px);

  /* --- Type --- */
  --font-display: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --font-body:    "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* --- Motion --- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* Per-language faces. The Latin display serif has no Arabic or Devanagari
   glyphs at all, so each script gets a face that actually covers it -
   otherwise the browser silently falls back and the page loses its voice. */
html[lang="hi"] { --font-display: "Tiro Devanagari Hindi", "Noto Serif Devanagari", serif;
                  --font-body: "Noto Sans Devanagari", "Outfit", system-ui, sans-serif; }
html[lang="ur"] { --font-display: "Noto Nastaliq Urdu", serif;
                  --font-body: "Noto Nastaliq Urdu", "Noto Naskh Arabic", system-ui, sans-serif; }
html[lang="ar"] { --font-display: "Amiri", "Noto Naskh Arabic", serif;
                  --font-body: "Noto Kufi Arabic", "Noto Naskh Arabic", system-ui, sans-serif; }
html[lang="tr"] { --font-display: "Marcellus", Georgia, serif;
                  --font-body: "Outfit", "Segoe UI", system-ui, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(16px, 1.05vw, 17.5px);
  line-height: 1.68;
  font-weight: 350;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Nastaliq needs air between lines or its descenders collide. */
html[lang="ur"] body { line-height: 2.25; font-size: clamp(16px, 1.1vw, 18px); }
html[lang="ar"] body { line-height: 1.95; }

img, svg, canvas { max-width: 100%; display: block; }
a { color: var(--gold); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--gold-bright); }

:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute; inset-inline-start: 50%; top: -60px;
  transform: translateX(-50%);
  background: var(--gold); color: #1B2E27; font-weight: 600;
  padding: 10px 18px; border-radius: 0 0 10px 10px; z-index: 999;
  transition: top .2s var(--ease);
}
.skip:focus { top: 0; }

/* =========================================================================
   1. THE GROUND - stacked layers behind everything
   ========================================================================= */

.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

/* (a) the emerald dome */
.bg__dome {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 85% at 50% -10%, var(--emerald-deep) 0%, #09231a 42%, var(--ink) 78%),
    linear-gradient(180deg, #06140e 0%, var(--ink) 100%);
}

/* (b) slow aurora - three emerald/gold bodies drifting */
.bg__aurora { position: absolute; inset: -20%; filter: blur(90px); opacity: .55; }
.bg__aurora i {
  position: absolute; display: block; border-radius: 50%;
  mix-blend-mode: screen;
  animation: drift 34s var(--ease) infinite alternate;
}
.bg__aurora i:nth-child(1) {
  width: 52vw; height: 52vw; inset-inline-start: -8vw; top: -6vw;
  background: radial-gradient(circle, rgba(0,105,92,.70), transparent 66%);
}
.bg__aurora i:nth-child(2) {
  width: 44vw; height: 44vw; inset-inline-end: -6vw; top: 18vh;
  background: radial-gradient(circle, rgba(212,175,55,.26), transparent 68%);
  animation-duration: 44s; animation-delay: -12s;
}
.bg__aurora i:nth-child(3) {
  width: 60vw; height: 60vw; inset-inline-start: 22vw; top: 62vh;
  background: radial-gradient(circle, rgba(77,182,172,.30), transparent 70%);
  animation-duration: 52s; animation-delay: -26s;
}
@keyframes drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(4vw, -3vh, 0) scale(1.12); }
  100% { transform: translate3d(-3vw, 4vh, 0) scale(.95); }
}

/* (c) girih - the eight-point star tiling, an inline data-URI so it stays
       crisp at 4K and costs one paint */
.bg__girih {
  position: absolute; inset: 0;
  background-image: var(--girih);
  background-size: 300px 300px;
  opacity: .10;
  animation: girih-pan 120s linear infinite;
}
@keyframes girih-pan { to { background-position: 300px 300px; } }

/* (d) starfield - canvas, twinkled in JS */
.bg__stars { position: absolute; inset: 0; opacity: .8; }

/* (e) vignette, so the edges hold the eye in */
.bg__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(100% 70% at 50% 40%, transparent 52%, rgba(3,9,6,.72) 100%);
}

/* =========================================================================
   2. LAYOUT
   ========================================================================= */

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.sect { padding-block: var(--sect); position: relative; }
.sect--tight { padding-block: calc(var(--sect) * .6); }

.center { text-align: center; }

/* =========================================================================
   3. TYPE
   ========================================================================= */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.012em;
  margin: 0 0 .5em;
  color: var(--cream);
}
h1 { font-size: clamp(2.35rem, 6.2vw, 4.5rem); line-height: 1.06; }
h2 { font-size: clamp(1.85rem, 3.9vw, 3rem); }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); }
h4 { font-size: 1.05rem; }

html[lang="ur"] h1, html[lang="ur"] h2 { line-height: 1.9; letter-spacing: 0; }
html[lang="ar"] h1, html[lang="ar"] h2 { line-height: 1.5; letter-spacing: 0; }

/* ---------------------------------------------------------------------------
   Devanagari.

   Two faults shipped here, and both were on every Hindi page.

   1. Urdu and Arabic were each given their own line-height on the two lines
      above, and Hindi never was, so its headings ran at 1.06 and 1.16.
      Devanagari carries marks well above the shirorekha and below the base;
      at that spacing one line's marks land in the next line's ink. It reads
      as the matras being cut off, because that is what it is.

   2. .gold paints its shimmer with background-clip: text, and Chrome loses
      Devanagari reordering on that path - the i-matra stayed where it sits
      in the code instead of moving in front of its consonant, and the long-i
      was drawn as the o-matra. Urdu, Arabic, English and Turkish all come out
      correct through the very same rule; this was measured one script at a
      time, not assumed. So Hindi gets a flat gold. A shimmer that spells the
      word wrong is not worth having.

   Anything added later that sets background-clip: text, or a line-height
   under 1.35 on an element that can hold words, needs a line here too -
   verify.mjs fails otherwise.
   --------------------------------------------------------------------------- */
html[lang="hi"] h1 { line-height: 1.4; letter-spacing: 0; }
html[lang="hi"] h2,
html[lang="hi"] h3,
html[lang="hi"] h4 { line-height: 1.45; letter-spacing: 0; }
html[lang="hi"] .evhero__date { line-height: 1.4; }
html[lang="hi"] .brand__name { line-height: 1.4; }

html[lang="hi"] .gold {
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: var(--gold-bright);
  color: var(--gold-bright);
  animation: none;
}

p { margin: 0 0 1.1em; color: var(--text-2); }
p.lead {
  font-size: clamp(1.05rem, 1.55vw, 1.3rem);
  color: var(--text);
  max-width: 62ch;
  font-weight: 320;
}
.center p.lead { margin-inline: auto; }

strong, b { color: var(--cream); font-weight: 600; }
small { font-size: .85em; color: var(--text-3); }

/* Gold gradient text with a shine that sweeps across it */
.gold {
  background: linear-gradient(100deg,
    var(--gold-soft) 0%, var(--gold) 22%, #FFF3C4 42%,
    var(--gold-bright) 52%, var(--gold) 72%, var(--gold-soft) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shine-text 7s linear infinite;
  filter: drop-shadow(0 2px 14px rgba(212,175,55,.22));
}
@keyframes shine-text { to { background-position: 260% 0; } }

/* Section eyebrow - small caps between two gold rules */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-body);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
html[lang="ur"] .eyebrow, html[lang="ar"] .eyebrow { letter-spacing: 0; font-size: .82rem; text-transform: none; }
.eyebrow::before, .eyebrow::after {
  content: ""; width: clamp(18px, 5vw, 44px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-hair-2), transparent);
}

.sect__head { max-width: 66ch; margin-inline: auto; margin-bottom: clamp(40px, 6vw, 72px); }

/* =========================================================================
   4. GLASS - the one surface everything else is built from
   ========================================================================= */

.glass {
  position: relative;
  background: linear-gradient(160deg, var(--glass-2), var(--glass) 55%, rgba(0,0,0,.14));
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  backdrop-filter: blur(var(--glass-blur)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(135%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,          /* top highlight */
    0 -1px 0 rgba(0,0,0,.28) inset,               /* bottom shade */
    0 22px 48px -22px rgba(0,0,0,.72),            /* cast shadow */
    0 0 0 1px rgba(212,175,55,.06);               /* gold whisper */
  overflow: hidden;
  isolation: isolate;
}

/* Gold hairline along the top edge - the app's ultra_hairline_gold */
.glass::before {
  content: ""; position: absolute; inset-inline: 14%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-hair-2) 50%, transparent);
  opacity: .8;
}

/* The shine: a wide diagonal band that crosses the card on hover */
.shine::after {
  content: ""; position: absolute; inset: -60% -20%;
  background: linear-gradient(100deg,
    transparent 38%, rgba(255,255,255,.10) 47%,
    rgba(255,243,196,.20) 50%, rgba(255,255,255,.10) 53%, transparent 62%);
  transform: translateX(-120%) rotate(8deg);
  transition: transform 1.05s var(--ease-out);
  pointer-events: none; z-index: 3;
}
.shine:hover::after, .shine:focus-within::after { transform: translateX(120%) rotate(8deg); }
[dir="rtl"] .shine::after { transform: translateX(120%) rotate(-8deg); }
[dir="rtl"] .shine:hover::after, [dir="rtl"] .shine:focus-within::after { transform: translateX(-120%) rotate(-8deg); }

/* =========================================================================
   5. BUTTONS
   ========================================================================= */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px;
  font-family: var(--font-body);
  font-size: .97rem; font-weight: 600; letter-spacing: .01em;
  border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .32s var(--ease-out), box-shadow .32s var(--ease), border-color .3s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 20px; height: 20px; flex: none; position: relative; z-index: 2; }
.btn span { position: relative; z-index: 2; }

/* Gold, gloss-topped - the one primary action on the page */
.btn--gold {
  background:
    linear-gradient(180deg, rgba(255,255,255,.34), transparent 46%),
    linear-gradient(135deg, var(--gold-soft), var(--gold) 38%, var(--gold-bright) 62%, var(--gold-soft));
  color: #17291F;
  box-shadow: 0 10px 30px -10px rgba(212,175,55,.62), 0 1px 0 rgba(255,255,255,.5) inset;
}
.btn--gold:hover { box-shadow: 0 16px 40px -12px rgba(212,175,55,.82), 0 1px 0 rgba(255,255,255,.55) inset; }
/* a specular streak that keeps travelling, so the button never looks flat */
.btn--gold::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  transform: translateX(-140%);
  animation: btn-sweep 4.6s var(--ease-out) infinite;
}
@keyframes btn-sweep { 0%, 62% { transform: translateX(-140%); } 100% { transform: translateX(140%); } }

/* Glass secondary */
.btn--ghost {
  background: var(--glass-2);
  border-color: var(--gold-hair);
  color: var(--cream);
  backdrop-filter: blur(12px);
}
.btn--ghost:hover { border-color: var(--gold-hair-2); background: rgba(212,175,55,.10); color: var(--cream); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.center .btn-row { justify-content: center; }

/* =========================================================================
   6. HEADER
   ========================================================================= */

.hdr {
  position: sticky; top: 0; z-index: 90;
  transition: background .4s var(--ease), border-color .4s, backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.hdr.is-stuck {
  background: rgba(5,15,10,.72);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom-color: var(--gold-hair);
}
.hdr__in {
  display: flex; align-items: center; gap: 18px;
  height: 74px;
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad);
}
.brand { display: flex; align-items: center; gap: 12px; margin-inline-end: auto; }
.brand img {
  width: 40px; height: 40px; border-radius: 12px;
  box-shadow: 0 0 0 1px var(--gold-hair), 0 6px 18px -6px rgba(0,0,0,.8);
}
.brand__name {
  font-family: var(--font-display); font-size: 1.16rem;
  color: var(--cream); letter-spacing: .02em; line-height: 1.1;
}
.brand__sub { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
html[lang="ur"] .brand__sub, html[lang="ar"] .brand__sub { letter-spacing: 0; font-size: .74rem; text-transform: none; }

.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  font-size: .92rem; font-weight: 400; color: var(--text-2);
  position: relative; padding-block: 6px;
}
.nav a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-out);
}
[dir="rtl"] .nav a::after { transform-origin: right; }
.nav a:hover { color: var(--cream); }
.nav a:hover::after { transform: scaleX(1); }

/* Language switcher */
.lang { position: relative; }
.lang__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  background: var(--glass-2); border: 1px solid var(--gold-hair);
  color: var(--cream); font-family: var(--font-body); font-size: .86rem;
  cursor: pointer; transition: border-color .3s, background .3s;
}
.lang__btn:hover { border-color: var(--gold-hair-2); background: rgba(212,175,55,.10); }
.lang__btn svg { width: 15px; height: 15px; opacity: .8; }
.lang__menu {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0;
  min-width: 200px; padding: 8px;
  background: rgba(7,21,15,.94);
  border: 1px solid var(--gold-hair); border-radius: var(--r);
  backdrop-filter: blur(22px);
  box-shadow: 0 26px 60px -20px rgba(0,0,0,.9);
  display: grid; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .26s var(--ease), transform .26s var(--ease-out), visibility .26s;
  z-index: 100;
}
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang__menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 13px; border-radius: 12px;
  color: var(--text); font-size: .9rem;
}
.lang__menu a:hover { background: rgba(212,175,55,.12); color: var(--cream); }
.lang__menu a[aria-current="true"] { background: rgba(212,175,55,.16); color: var(--gold-bright); }
.lang__menu em { font-style: normal; font-size: .74rem; color: var(--text-3); letter-spacing: .1em; text-transform: uppercase; }

.burger {
  display: none; width: 42px; height: 42px; flex: none;
  border-radius: 12px; background: var(--glass-2);
  border: 1px solid var(--gold-hair); cursor: pointer;
  align-items: center; justify-content: center;
}
.burger span { display: block; width: 18px; height: 1.5px; background: var(--cream); position: relative; transition: .3s var(--ease); }
.burger span::before, .burger span::after {
  content: ""; position: absolute; inset-inline: 0; height: 1.5px; background: var(--cream); transition: .3s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.is-nav-open .burger span { background: transparent; }
.is-nav-open .burger span::before { top: 0; transform: rotate(45deg); }
.is-nav-open .burger span::after { top: 0; transform: rotate(-45deg); }

/* =========================================================================
   7. HERO
   ========================================================================= */

.hero { position: relative; padding-block: clamp(48px, 8vw, 104px) clamp(56px, 9vw, 120px); overflow: hidden; }
.hero__grid {
  display: grid; grid-template-columns: 1.06fr .94fr;
  gap: clamp(32px, 5vw, 68px); align-items: center;
}
/* A grid item is min-width:auto by default, so its widest child sets the
   column floor. On a 390px phone that made the hero 578px wide and pushed
   the whole page sideways - the stats row below has a 128px minimum per
   column, and four of those do not fit. Measured, not guessed. */
.hero__grid > * { min-width: 0; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px 7px 8px; border-radius: 999px;
  background: rgba(212,175,55,.10); border: 1px solid var(--gold-hair);
  font-size: .78rem; color: var(--gold); letter-spacing: .04em;
  margin-bottom: 22px;
}
.hero__badge b {
  background: var(--gold); color: #17291F; font-size: .68rem; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; letter-spacing: .08em;
}
.hero h1 { margin-bottom: .34em; }
.hero p.lead { margin-bottom: 2em; }

/* Trust row under the buttons */
.trust {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: clamp(16px, 2vw, 26px); margin: 38px 0 0; padding: 0; max-width: 620px;
}
.trust div { position: relative; }
.trust dt {
  font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  color: var(--cream); line-height: 1;
}
.trust dd {
  margin: 6px 0 0; font-size: .76rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3);
}
html[lang="ur"] .trust dd, html[lang="ar"] .trust dd { letter-spacing: 0; font-size: .84rem; text-transform: none; }

/* =========================================================================
   8. PHONE - a CSS device with the app's real screens inside
   ========================================================================= */

.stage {
  position: relative;
  perspective: 1600px;
  display: grid; place-items: center;
  min-height: clamp(460px, 58vw, 640px);
}

/* the gold halo the phone floats in */
.stage::before {
  content: ""; position: absolute; width: 78%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--gold-glow), transparent 62%);
  filter: blur(30px);
  animation: pulse 9s var(--ease) infinite;
}
@keyframes pulse { 50% { transform: scale(1.14); opacity: .72; } }

/* slow rotating rings of light behind it */
.stage__ring {
  position: absolute; width: min(92%, 520px); aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(212,175,55,.14);
  animation: spin 46s linear infinite;
}
.stage__ring::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(212,175,55,.5) 74%, transparent 86%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
}
.stage__ring--2 { width: min(78%, 430px); animation-duration: 34s; animation-direction: reverse; border-style: dashed; opacity: .5; }
@keyframes spin { to { transform: rotate(360deg); } }

.phone {
  position: relative; z-index: 2;
  width: min(300px, 74vw); aspect-ratio: 9 / 19.2;
  border-radius: 42px;
  padding: 9px;
  background: linear-gradient(150deg, #2b3a33, #0b1712 30%, #16241d 62%, #34443b);
  box-shadow:
    0 0 0 1px rgba(212,175,55,.34),
    0 2px 2px rgba(255,255,255,.14) inset,
    0 54px 90px -30px rgba(0,0,0,.92),
    0 0 90px -20px rgba(212,175,55,.26);
  transform: rotateY(-13deg) rotateX(5deg) rotateZ(.6deg);
  transform-style: preserve-3d;
  transition: transform .9s var(--ease-out);
  will-change: transform;
}
[dir="rtl"] .phone { transform: rotateY(13deg) rotateX(5deg) rotateZ(-.6deg); }
.stage:hover .phone { transform: rotateY(-4deg) rotateX(2deg) scale(1.025); }
[dir="rtl"] .stage:hover .phone { transform: rotateY(4deg) rotateX(2deg) scale(1.025); }

.phone::before { /* the speaker pill */
  content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 62px; height: 5px; border-radius: 99px; background: #05100b; z-index: 6;
}
.phone__screen {
  position: relative; height: 100%; border-radius: 34px; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, var(--emerald-deep), #061710 62%, var(--ink));
  display: flex; flex-direction: column;
}
/* the glass glare across the screen */
.phone__screen::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.09) 0%, transparent 22%, transparent 78%, rgba(255,255,255,.04) 100%);
}

/* --- app screens, rebuilt in HTML --- */

/* A filmstrip, not a crossfade.

   The first version faded one screen into the next. It ghosted badly: the
   incoming screen is translucent for the whole transition, so whatever is
   behind it shows through - and a cream Quran page dissolving over a dark
   prayer dashboard reads as a rendering fault, not a transition. Making the
   outgoing screen opaque does not help, because opacity is applied to the
   element as a whole and an element at 50% cannot hide anything.

   So the screens sit side by side on a track that slides. They are never
   blended, because only one is ever over the viewport. *left* and translateX are
   physical properties on purpose - they must not flip under dir="rtl", while
   the text inside each screen still inherits the page direction. */
.phone__track {
  position: absolute; inset: 0;
  transition: transform .62s var(--ease-out);
  will-change: transform;
}
.scr {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--i, 0) * 100%); width: 100%;
  display: flex; flex-direction: column;
  padding: 34px 14px 14px;
  background: radial-gradient(120% 80% at 50% 0%, var(--emerald-deep), #061710 62%, var(--ink));
}

.scr__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.scr__title { font-family: var(--font-display); font-size: .72rem; letter-spacing: .16em; color: var(--gold); text-transform: uppercase; }
.scr__dot { width: 22px; height: 22px; border-radius: 8px; background: rgba(255,255,255,.08); }

.scr__banner {
  border-radius: 16px; padding: 12px; margin-bottom: 11px;
  background: linear-gradient(135deg, rgba(0,105,92,.6), rgba(212,175,55,.14));
  border: 1px solid var(--gold-hair);
}
.scr__jumma { font-family: var(--font-display); font-size: .8rem; color: var(--gold-bright); letter-spacing: .08em; }
.scr__hijri { font-size: .55rem; color: var(--text-3); margin-top: 2px; }
.scr__count { font-size: .6rem; color: var(--text); margin-top: 7px; }
.scr__count b { color: var(--gold); }

.scr__times { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 11px; }
.scr__times div {
  border-radius: 10px; padding: 7px 2px; text-align: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06);
}
.scr__times div.on { background: rgba(212,175,55,.18); border-color: var(--gold-hair-2); }
.scr__times span { display: block; font-size: .45rem; color: var(--text-3); letter-spacing: .04em; }
.scr__times b { font-size: .55rem; color: var(--cream); font-weight: 500; }
.scr__times div.on b { color: var(--gold-bright); }

.scr__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; flex: 1; align-content: start; }
.scr__tile {
  border-radius: 14px; padding: 10px 9px;
  background: linear-gradient(150deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.07);
  display: flex; flex-direction: column; gap: 6px;
}
.scr__tile svg { width: 17px; height: 17px; color: var(--gold); }
.scr__tile em { font-style: normal; font-size: .55rem; color: var(--cream); letter-spacing: .02em; }

.scr__nav {
  display: flex; justify-content: space-around; padding: 9px 4px 2px; margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.scr__nav i { width: 15px; height: 15px; border-radius: 5px; background: rgba(255,255,255,.14); display: block; }
.scr__nav i:nth-child(2) { background: var(--gold); box-shadow: 0 0 12px rgba(212,175,55,.6); }

/* Quran screen */
.scr--quran { padding: 34px 16px 16px; }
.scr__page {
  flex: 1; border-radius: 14px; padding: 14px 12px;
  background: linear-gradient(170deg, #FFFBF2, #F3E9D2);
  box-shadow: 0 12px 28px -12px rgba(0,0,0,.7);
  display: flex; flex-direction: column; gap: 9px;
}
.scr__ayah { height: 7px; border-radius: 99px; background: rgba(43,33,24,.24); }
.scr__ayah:nth-child(even) { width: 82%; margin-inline-start: auto; }
.scr__ayah:nth-child(3n) { width: 64%; }
.scr__bismillah { font-family: var(--font-display); text-align: center; color: #7a5c1e; font-size: .78rem; letter-spacing: .04em; }

/* Tasbeeh screen */
.scr--tas { align-items: center; justify-content: center; gap: 14px; }
.scr__bead {
  width: 118px; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--gold-hair-2);
  display: grid; place-items: center; align-content: center;
  background: radial-gradient(circle at 34% 28%, rgba(212,175,55,.2), transparent 62%);
  position: relative;
}
.scr__bead::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px dashed rgba(212,175,55,.3); animation: spin 22s linear infinite;
}
.scr__bead b { font-family: var(--font-display); font-size: 1.9rem; color: var(--gold-bright); }
.scr__bead span { font-size: .48rem; color: var(--text-3); letter-spacing: .14em; }

/* Haram screen */
.scr--haram { padding: 0; }
.scr__haram { flex: 1; position: relative; overflow: hidden; }
.scr__kaaba {
  position: absolute; left: 50%; bottom: 34%; transform: translateX(-50%);
  width: 52px; height: 62px; border-radius: 3px;
  background: linear-gradient(160deg, #1d1d1d, #050505);
  box-shadow: 0 0 34px rgba(212,175,55,.42), 0 1px 0 var(--gold) inset;
}
.scr__kaaba::after {
  content: ""; position: absolute; inset-inline: 0; top: 40%; height: 4px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.scr__tawaf {
  position: absolute; left: 50%; bottom: 20%; transform: translateX(-50%) rotateX(66deg);
  width: 170px; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(212,175,55,.3);
}
.scr__tawaf i {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(212,175,55,.55) 82%, transparent 94%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
  animation: spin 9s linear infinite;
}
.scr__pad {
  position: absolute; inset-inline-start: 14px; bottom: 16px;
  width: 46px; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.05);
}
.scr__pad::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: rgba(212,175,55,.5); }

/* screen switcher pips */
.stage__pips { position: absolute; bottom: 4px; display: flex; gap: 9px; z-index: 4; }
.stage__pips button {
  width: 8px; height: 8px; padding: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.2); border: 0; transition: .3s var(--ease);
}
.stage__pips button[aria-selected="true"] {
  background: var(--gold); width: 24px; border-radius: 99px;
  box-shadow: 0 0 12px rgba(212,175,55,.7);
}

/* =========================================================================
   9. FEATURE CARDS - glass, gold hairline, 3D tilt, shine
   ========================================================================= */

.grid { display: grid; gap: clamp(14px, 1.7vw, 22px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--r-lg);
  transform-style: preserve-3d;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease), border-color .4s;
}
.card:hover {
  border-color: var(--gold-hair);
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 34px 64px -26px rgba(0,0,0,.86),
    0 0 42px -14px rgba(212,175,55,.3);
}
.card__icon {
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center; margin-bottom: 18px;
  background: linear-gradient(150deg, rgba(212,175,55,.22), rgba(0,105,92,.28));
  border: 1px solid var(--gold-hair);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 20px -10px rgba(0,0,0,.7);
  transition: transform .5s var(--ease-out);
}
.card:hover .card__icon { transform: translateZ(26px) scale(1.06); }
.card__icon svg { width: 24px; height: 24px; color: var(--gold-bright); }
.card h3 { margin-bottom: .4em; font-size: clamp(1.02rem, 1.4vw, 1.2rem); }
.card p { margin: 0; font-size: .93rem; color: var(--text-2); }
.card__tag {
  display: inline-block; margin-top: 14px;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); padding: 4px 10px; border-radius: 99px;
  background: rgba(212,175,55,.10); border: 1px solid var(--gold-hair);
}
html[lang="ur"] .card__tag, html[lang="ar"] .card__tag { letter-spacing: 0; text-transform: none; font-size: .76rem; }

/* =========================================================================
   10. SHOWCASE - the wide Virtual Haram panel
   ========================================================================= */

.show { position: relative; border-radius: var(--r-xl); padding: clamp(28px, 4.5vw, 62px); overflow: hidden; }
.show__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.show__art { position: relative; aspect-ratio: 4/3; display: grid; place-items: center; }
.show--haram { background: linear-gradient(150deg, rgba(0,77,64,.5), rgba(5,15,10,.75) 60%); }
.show ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.show li { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; color: var(--text-2); }
.show li svg { width: 19px; height: 19px; color: var(--gold); flex: none; margin-top: 4px; }

/* =========================================================================
   11. LANGUAGE STRIP
   ========================================================================= */

.langs { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.langs span {
  padding: 12px 22px; border-radius: 999px;
  background: var(--glass-2); border: 1px solid var(--glass-line);
  font-size: .95rem; color: var(--text);
  transition: border-color .3s, transform .3s var(--ease-out), background .3s;
}
.langs span:hover { border-color: var(--gold-hair-2); transform: translateY(-3px); background: rgba(212,175,55,.08); }

/* =========================================================================
   12. FAQ
   ========================================================================= */

.faq { max-width: 1120px; margin-inline: auto; display: grid; gap: 12px; }
.faq details {
  border-radius: var(--r);
  background: var(--glass); border: 1px solid var(--glass-line);
  overflow: hidden; transition: border-color .3s, background .3s;
}
.faq details[open] { border-color: var(--gold-hair); background: var(--glass-2); }
.faq summary {
  cursor: pointer; padding: 20px 24px; list-style: none;
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-display); font-size: 1.04rem; color: var(--cream);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 10px; height: 10px; flex: none; margin-inline-start: auto;
  border-inline-end: 1.5px solid var(--gold); border-block-end: 1.5px solid var(--gold);
  transform: rotate(45deg); transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg); }
.faq__body { padding: 0 24px 22px; }
.faq__body p:last-child { margin-bottom: 0; }

/* =========================================================================
   13. CTA BAND
   ========================================================================= */

.cta {
  position: relative; border-radius: var(--r-xl);
  padding: clamp(38px, 6vw, 84px) clamp(24px, 5vw, 64px);
  text-align: center; overflow: hidden;
}
.cta::after { /* slow gold sweep across the whole band */
  content: ""; position: absolute; inset: -50%;
  background: linear-gradient(100deg, transparent 42%, rgba(212,175,55,.14) 50%, transparent 58%);
  animation: band 9s linear infinite;
}
@keyframes band { 0% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
.cta > * { position: relative; z-index: 2; }

/* Google Play badge, drawn not imported */
.play {
  display: inline-flex; align-items: center; gap: 13px;
  padding: 13px 26px; border-radius: 16px;
  background: linear-gradient(180deg, #11221a, #060f0a);
  border: 1px solid var(--gold-hair); color: var(--cream);
  transition: border-color .3s, transform .3s var(--ease-out), box-shadow .3s;
}
.play:hover { border-color: var(--gold-hair-2); transform: translateY(-2px); box-shadow: 0 16px 36px -14px rgba(0,0,0,.9); color: var(--cream); }
.play svg { width: 26px; height: 26px; flex: none; }
.play u { text-decoration: none; display: block; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.play b { font-family: var(--font-display); font-size: 1.04rem; font-weight: 400; letter-spacing: .01em; }
html[lang="ur"] .play u, html[lang="ar"] .play u { letter-spacing: 0; text-transform: none; font-size: .72rem; }

/* =========================================================================
   14. FOOTER
   ========================================================================= */

.ftr { border-top: 1px solid var(--glass-line); padding-block: clamp(44px, 6vw, 72px) 34px; position: relative; }
.ftr__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(26px, 3vw, 48px); }
.ftr h4 {
  font-family: var(--font-body); font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 16px;
}
html[lang="ur"] .ftr h4, html[lang="ar"] .ftr h4 { letter-spacing: 0; text-transform: none; font-size: .88rem; }
.ftr ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.ftr ul a { color: var(--text-2); font-size: .92rem; }
.ftr ul a:hover { color: var(--gold); }
.ftr__note {
  margin-top: clamp(34px, 5vw, 56px); padding-top: 26px;
  border-top: 1px solid var(--glass-line);
  display: flex; flex-wrap: wrap; gap: 14px 28px;
  align-items: center; justify-content: space-between;
}
.ftr__note p { margin: 0; font-size: .84rem; color: var(--text-3); }

/* Arabesque divider - a gold ornament between big sections */
.orn { display: flex; align-items: center; gap: 18px; justify-content: center; margin-block: clamp(10px, 3vw, 26px); }
.orn::before, .orn::after {
  content: ""; height: 1px; flex: 1; max-width: 220px;
  background: linear-gradient(90deg, transparent, var(--gold-hair-2), transparent);
}
.orn svg { width: 30px; height: 30px; color: var(--gold); opacity: .8; }

/* =========================================================================
   15. LEGAL PAGES
   ========================================================================= */

.legal { max-width: 1120px; margin-inline: auto; }
.legal__meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 38px; font-size: .85rem; color: var(--text-3); }
.legal__body h2 {
  font-size: clamp(1.25rem, 2vw, 1.62rem); margin-top: 2.4em; margin-bottom: .6em;
  padding-top: 1.1em; border-top: 1px solid var(--glass-line);
}
.legal__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal__body h3 {
  font-size: 1.06rem; margin-top: 1.8em; margin-bottom: .5em;
  color: var(--gold); font-family: var(--font-body); font-weight: 600;
}
.legal__body ul, .legal__body ol { padding-inline-start: 1.3em; margin: 0 0 1.2em; color: var(--text-2); }
.legal__body li { margin-bottom: .6em; }
.legal__body li::marker { color: var(--gold); }
.legal__body table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: .92rem; }
.legal__body th, .legal__body td { text-align: start; padding: 12px 14px; border-bottom: 1px solid var(--glass-line); vertical-align: top; }
.legal__body th { color: var(--gold); font-weight: 600; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
html[lang="ur"] .legal__body th, html[lang="ar"] .legal__body th { letter-spacing: 0; text-transform: none; font-size: .9rem; }
.legal__body td { color: var(--text-2); }
.note {
  padding: 20px 24px; border-radius: var(--r);
  background: rgba(212,175,55,.07); border: 1px solid var(--gold-hair);
  border-inline-start: 3px solid var(--gold);
  margin: 0 0 1.6em;
}
.note p:last-child { margin-bottom: 0; }
.note strong { color: var(--gold-bright); }
.toc { margin-bottom: 44px; padding: 22px 26px; }
.toc h4 {
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 14px; font-family: var(--font-body);
}
html[lang="ur"] .toc h4, html[lang="ar"] .toc h4 { letter-spacing: 0; text-transform: none; font-size: .88rem; }
/* No list marker: each section heading already carries its own number
   ("1. Who this policy is from"), so an <ol> marker on top of it rendered
   every contents line as "1. 1. ..." in all five languages. */
.toc ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 32px; }
.toc li { break-inside: avoid; margin-bottom: 4px; }
.toc a { color: var(--text-2); font-size: .9rem; }
.toc a:hover { color: var(--gold); }

.crumb { display: flex; align-items: center; gap: 10px; font-size: .84rem; color: var(--text-3); margin-bottom: 24px; }
.crumb a { color: var(--text-2); }
.crumb svg { width: 13px; height: 13px; opacity: .5; }
[dir="rtl"] .crumb svg { transform: scaleX(-1); }

/* Support page contact cards */
.contact { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 40px; }
.contact a.card { text-decoration: none; display: block; }
.contact a.card h3 { transition: color .3s; }
.contact a.card:hover h3 { color: var(--gold-bright); }

/* =========================================================================
   16. REVEAL ON SCROLL
   ========================================================================= */

[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .85s var(--ease-out), transform .85s var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-d="1"] { transition-delay: .09s; }
[data-reveal][data-d="2"] { transition-delay: .18s; }
[data-reveal][data-d="3"] { transition-delay: .27s; }
[data-reveal][data-d="4"] { transition-delay: .36s; }
[data-reveal][data-d="5"] { transition-delay: .45s; }
[data-reveal][data-d="6"] { transition-delay: .54s; }
[data-reveal][data-d="7"] { transition-delay: .63s; }

/* =========================================================================
   17. RESPONSIVE
   ========================================================================= */

@media (max-width: 1040px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .ftr__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 900px) {
  .hero__grid, .show__grid { grid-template-columns: 1fr; }
  .hero__grid { gap: 44px; }
  .stage { min-height: 520px; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .toc ol { columns: 1; }

  .burger { display: flex; }
  .nav {
    position: fixed; inset: 74px 0 auto; flex-direction: column; gap: 0;
    padding: 18px var(--pad) 26px;
    background: rgba(5,15,10,.97);
    backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--gold-hair);
    align-items: stretch;
    opacity: 0; visibility: hidden; transform: translateY(-14px);
    transition: opacity .3s var(--ease), transform .3s var(--ease-out), visibility .3s;
  }
  .is-nav-open .nav { opacity: 1; visibility: visible; transform: none; }
  .nav a { padding: 15px 0; border-bottom: 1px solid var(--glass-line); font-size: 1rem; }
  .nav a::after { display: none; }
}

@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact { grid-template-columns: 1fr; }
  .ftr__grid { grid-template-columns: 1fr; }
  .trust { gap: 22px; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .play { width: 100%; justify-content: center; }
  .history-search .btn { width: auto; }
}

/* =========================================================================
   18. MOTION AND PRINT
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .gold { animation: none; background-position: 40% 0; }
  .phone { transform: none; }
}

@media print {
  .bg, .hdr, .stage, .cta, .orn { display: none !important; }
  body { background: #fff; color: #111; }
  h1, .legal__body h2, .legal__body h3 { color: #000; }
  p, li, td { color: #222 !important; }
  .glass { border: 1px solid #ccc; box-shadow: none; background: none; }
}

/* =========================================================================
   19. CONTENT PAGES - the story / hadith / guide / dua listings and articles.
   These are rendered from content.json, not built from the content/*.mjs
   files, so they reuse the glass card and the legal typography rather than
   introducing a second look.
   ========================================================================= */

/* Quran reader: local text and translations are presented as a page-turning
   mushaf, while the source CSV files remain available unchanged. */
.quran-reader { padding: clamp(38px, 6vw, 78px) 0 var(--sect); }
.quran-reader__intro { text-align: center; max-width: 850px; }
.quran-reader__intro h1 { margin: 12px 0; font-family: var(--font-display); font-size: clamp(2.3rem, 5.4vw, 4.8rem); line-height: 1.35; color: var(--cream); }
.quran-reader__intro p { max-width: 70ch; margin: 0 auto; color: var(--text-2); }
.quran-reader__tools, .quran-reader__pages { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.quran-reader__select { display: flex; align-items: center; gap: 10px; color: var(--text-2); }
.quran-reader__select select {
  min-width: 145px; padding: 10px 38px 10px 14px; border-radius: 12px;
  border: 1px solid var(--gold-hair-2); background: var(--ink-2); color: var(--cream);
  font: inherit;
}
.quran-reader__stop { min-height: 45px; }
.quran-reader__status { min-height: 1.7em; margin-top: 15px; text-align: center; color: var(--text-2); }
.quran-reader__status.is-error { color: #ffb4a8; }
.quran-reader__book { width: 100%; max-width: 1000px; margin: 20px auto 0; padding-inline: 0; perspective: 1800px; }
.quran-book-stack { position: relative; transform-style: preserve-3d; }
.quran-book {
  position: relative; overflow: hidden; isolation: isolate; padding: clamp(10px, 1.8vw, 20px);
  border: 5px double #174c40; border-radius: 4px;
  color: #18362e; background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.48), transparent 48%),
    linear-gradient(145deg, #e0f4e9 0%, #c5e9db 52%, #d8f0e5 100%);
  box-shadow: 0 0 0 4px rgba(77,182,172,.12), 0 0 30px rgba(77,182,172,.16),
    0 26px 65px rgba(0,0,0,.42), inset 0 0 30px rgba(20,76,64,.10);
  transform-origin: left center; transform-style: preserve-3d;
}
.quran-book--active { position: relative; z-index: 2; backface-visibility: hidden; }
.quran-book--underlay { position: absolute; z-index: 1; inset: 0; visibility: hidden; }
.quran-book--underlay.quran-book--ready { visibility: visible; }
.quran-book.is-turning-next { z-index: 3; transform-origin: left center; animation: quran-turn-next .82s cubic-bezier(.65,.05,.35,1) both; }
.quran-book.is-turning-previous { z-index: 3; transform-origin: right center; animation: quran-turn-previous .82s cubic-bezier(.65,.05,.35,1) both; }
.quran-book::before {
  content: ""; position: absolute; z-index: -1; inset: 9px; border: 1px solid rgba(25,83,69,.62);
  border-radius: 2px; pointer-events: none;
  background: var(--girih) repeat; background-size: 100px 100px; opacity: .06;
}
.quran-book::after {
  content: ""; position: absolute; z-index: 2; inset: -60% auto -60% -45%; width: 28%;
  pointer-events: none; transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent);
  animation: quran-page-shine 8s ease-in-out infinite;
}
.quran-book__ornament { position: absolute; inset: 9px; border: 1px solid rgba(29,92,77,.28); border-radius: 1px; pointer-events: none; }
.quran-book__heading { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 5px; border-bottom: 1px solid rgba(24,76,63,.42); color: #24594b; font-family: var(--font-display); font-size: .76rem; letter-spacing: .04em; text-shadow: 0 0 10px rgba(77,182,172,.35); }
.quran-book__surah-banner {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  max-width: 520px; padding: 4px 14px; margin: 6px auto 3px;
  border: 1px solid rgba(24,76,63,.62); border-radius: 999px;
  color: #174c40; background: linear-gradient(110deg, rgba(232,249,241,.2), rgba(255,255,255,.56), rgba(232,249,241,.2));
  background-size: 220% 100%; font-family: var(--font-display); text-align: center;
  box-shadow: 0 0 12px rgba(48,139,104,.18), inset 0 0 12px rgba(255,255,255,.35);
  animation: quran-header-glow 5s ease-in-out infinite;
}
.quran-book__surah-banner::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55), transparent 80%); transform: translateX(-120%); animation: quran-header-shine 6s ease-in-out infinite; }
.quran-book__surah-banner strong { color: #174c40; text-shadow: 0 0 8px rgba(77,182,172,.45); }
.quran-book__surah-banner span { color: #397967; font-size: 1.2rem; }
.quran-ayah-list { position: relative; }
.quran-page-ayah { padding: 2px 0 4px; border-bottom: 1px solid rgba(24,76,63,.3); }
.quran-page-ayah:last-child { border-bottom: 0; }
.quran-ayah__number { display: inline-grid; min-width: 1.75em; min-height: 1.75em; padding: 0 .2em; place-items: center; border: 1px solid rgba(29,92,77,.62); border-radius: 50%; color: #174c40; font: 500 .58em/1 var(--font-body); vertical-align: .16em; white-space: nowrap; }
.quran-page__arabic {
  margin: 0; padding: 0; color: #16372d; direction: rtl; text-align: justify; text-align-last: center; text-wrap: pretty;
  font: 400 clamp(1.35rem, 3.3vw, 2.2rem)/1.68 "Amiri", "Noto Naskh Arabic", serif;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.68em - 1px), rgba(24,76,63,.36) calc(1.68em - 1px), rgba(24,76,63,.36) 1.68em);
  background-size: 100% 1.68em;
}
.quran-page__arabic--flow { text-align-last: justify; line-height: 1.72; background-size: 100% 1.72em; }
.quran-page__translation { padding-inline: .2rem; margin: 2px 0 0; color: #24594b; font-size: clamp(.82rem, 1.4vw, .96rem); line-height: 1.42; text-align: start; }
.quran-page__translation--hi { font-family: "Noto Sans Devanagari", system-ui, sans-serif; }
.quran-page__translation--ur { font: 400 clamp(.92rem, 1.55vw, 1.08rem)/1.55 "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif; }
.quran-page__translation--en { font-family: var(--font-body); }
.quran-page__surah-opening { padding: 2px 0 4px; margin: 0 auto 3px; border-bottom: 1px solid rgba(24,76,63,.32); text-align: center; }
.quran-page__basmala { margin: 0 auto 1px; padding: 0 2px; color: #174c40; text-align: center; direction: rtl; font: 400 clamp(1.35rem, 3.3vw, 2.2rem)/1.6 "Amiri", "Noto Naskh Arabic", serif; }
.quran-page__surah-title { margin: 0; color: #397967; font: 600 .72rem/1.3 var(--font-display); letter-spacing: .04em; }
.quran-reader__pages { margin-top: 22px; }
.quran-reader__page-count { min-width: 95px; text-align: center; color: var(--cream); }
.quran-reader__pages button:disabled { opacity: .42; cursor: not-allowed; }
.quran-reader__actions { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.quran-reader__actions button:disabled { opacity: .45; cursor: not-allowed; }
.quran-reader__audio, .quran-reader__sources {
  max-width: 1050px; padding: 22px 26px; margin: 28px auto 0;
  border: 1px solid var(--glass-line); border-radius: var(--r);
  background: var(--glass); box-shadow: 0 12px 30px rgba(0,0,0,.16);
}
.quran-reader__audio { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.quran-reader__audio h2, .quran-reader__sources h2 { margin: 0 0 5px; color: var(--cream); font-family: var(--font-display); font-size: 1.25rem; }
.quran-reader__audio p, .quran-reader__sources p { margin: 0; color: var(--text-2); font-size: .92rem; }
.quran-reader__audio audio { width: min(100%, 420px); }
.quran-reader__sources ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 16px 0 0; list-style: none; }
.quran-source { display: flex; flex-direction: column; gap: 4px; padding: 13px; border: 1px solid var(--glass-line); border-radius: 12px; color: var(--text-2); font-size: .88rem; }
.quran-source strong { color: var(--cream); }
.quran-source__links { display: flex; gap: 7px; flex-wrap: wrap; }
.quran-source a { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; }
@keyframes quran-page-shine { 0%, 64%, 100% { left: -45%; } 30% { left: 120%; } }
@keyframes quran-header-glow { 0%, 100% { background-position: 0 0; box-shadow: 0 0 10px rgba(48,139,104,.14), inset 0 0 10px rgba(255,255,255,.25); } 50% { background-position: 100% 0; box-shadow: 0 0 22px rgba(48,139,104,.32), inset 0 0 16px rgba(255,255,255,.5); } }
@keyframes quran-header-shine { 0%, 55%, 100% { transform: translateX(-120%); } 78% { transform: translateX(120%); } }
@keyframes quran-turn-next {
  0% { transform: rotateY(0); filter: brightness(1); box-shadow: 0 0 0 4px rgba(77,182,172,.12), 0 0 30px rgba(77,182,172,.16), 0 26px 65px rgba(0,0,0,.42); }
  35% { transform: rotateY(-58deg); filter: brightness(.88); box-shadow: 18px 0 32px rgba(0,0,0,.32); }
  52% { transform: rotateY(-92deg); filter: brightness(.72); box-shadow: 28px 0 38px rgba(0,0,0,.38); }
  100% { transform: rotateY(-180deg); filter: brightness(.68); box-shadow: 0 0 28px rgba(0,0,0,.28); }
}
@keyframes quran-turn-previous {
  0% { transform: rotateY(0); filter: brightness(1); box-shadow: 0 0 0 4px rgba(77,182,172,.12), 0 0 30px rgba(77,182,172,.16), 0 26px 65px rgba(0,0,0,.42); }
  35% { transform: rotateY(58deg); filter: brightness(.88); box-shadow: -18px 0 32px rgba(0,0,0,.32); }
  52% { transform: rotateY(92deg); filter: brightness(.72); box-shadow: -28px 0 38px rgba(0,0,0,.38); }
  100% { transform: rotateY(180deg); filter: brightness(.68); box-shadow: 0 0 28px rgba(0,0,0,.28); }
}
@media (max-width: 700px) {
  .quran-reader__book { width: calc(100% - 12px); margin-top: 12px; padding-inline: 0; }
  .quran-book { padding: 7px 3px; border-width: 4px; }
  .quran-book__ornament { inset: 5px; }
  .quran-book__heading { gap: 6px; padding-bottom: 3px; font-size: .62rem; }
  .quran-book__surah-banner { gap: 8px; padding: 2px 7px; margin-block: 3px 1px; font-size: .78rem; }
  .quran-reader__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .quran-reader__actions [data-share-image] { grid-column: 1 / -1; }
  .quran-page__arabic { font-size: clamp(1.16rem, 5.5vw, 1.38rem); line-height: 1.56; background-size: 100% 1.56em; }
  .quran-page__arabic--flow { line-height: 1.68; background-size: 100% 1.68em; }
  .quran-page-ayah { padding-block: 2px 4px; }
  .quran-page__arabic { font-size: clamp(1.24rem, 5.5vw, 1.46rem); }
  .quran-page__translation { font-size: clamp(.72rem, 3.2vw, .82rem); line-height: 1.42; }
  .quran-page__translation--ur { font-size: clamp(.82rem, 3.6vw, .92rem); line-height: 1.5; }
  .quran-page__surah-opening { padding-block: 1px 2px; margin-bottom: 2px; }
  .quran-page__basmala { font-size: clamp(1.22rem, 5.8vw, 1.48rem); line-height: 1.5; }
  .quran-page__surah-title { font-size: .64rem; }
  .quran-reader__sources ul { grid-template-columns: 1fr; }
  .quran-reader__audio { align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .quran-book::after { animation: none; display: none; }
  .quran-book__surah-banner, .quran-book__surah-banner::after { animation: none; }
  .quran-book.is-turning-next, .quran-book.is-turning-previous { animation-duration: .01ms; }
}

/* category chips */
[hidden] { display: none !important; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-bottom: clamp(30px, 5vw, 52px); }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 999px; font-size: .9rem;
  background: var(--glass-2); border: 1px solid var(--glass-line); color: var(--text-2);
  transition: border-color .25s, background .25s, color .25s;
}
.chip:hover { border-color: var(--gold-hair); color: var(--cream); }
.chip.on { background: rgba(212,175,55,.14); border-color: var(--gold-hair-2); color: var(--gold-bright); }
.chip i { font-style: normal; font-size: .72rem; opacity: .65; }

/* searchable directory of prophets and their stories */
.history-search {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  max-width: 760px; margin: 0 auto 34px;
}
.history-search input {
  flex: 1 1 280px; min-width: 0; padding: 14px 20px; border-radius: 999px;
  background: var(--glass-2); border: 1px solid var(--glass-line);
  color: var(--text); font: inherit;
}
.history-search input:focus { outline: none; border-color: var(--gold-hair-2); }
.history-search input::placeholder { color: var(--text-3); }
.history-directory__title {
  text-align: center; color: var(--gold); font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase; margin: 0 0 14px;
}
.history-directory {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 0 auto clamp(30px, 5vw, 52px);
}
.history-directory .chip { padding: 8px 14px; }
.history-prophet { margin: 0 0 34px; scroll-margin-top: 100px; }
.history-prophet__title {
  color: var(--cream); font-size: clamp(1.45rem, 3vw, 2rem);
  border-bottom: 1px solid var(--gold-hair); padding-bottom: 12px;
}
.history-prophet__empty, .history-search__empty {
  color: var(--text-3); text-align: center; padding: 18px;
}
html[lang="ur"] .history-directory__title,
html[lang="ar"] .history-directory__title { letter-spacing: 0; text-transform: none; }

.history-book__entry {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px; max-width: 900px; margin: 0 auto 42px; padding: 24px 28px;
  border: 1px solid var(--gold-hair); border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(212,175,55,.11), var(--glass-2));
}
.history-book__entry h2 { margin: 4px 0 8px; color: var(--cream); }
.history-book__entry p { margin: 0; color: var(--text-3); }
.history-book__toolbar, .history-book__pagination {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.history-book__toolbar { max-width: 960px; margin: 0 auto 18px; }
.history-book__page {
  max-width: 960px; min-height: min(72vh, 880px); margin: 0 auto;
  padding: clamp(24px, 6vw, 72px); border: 1px solid var(--gold-hair);
  border-radius: var(--r-lg); background:
    radial-gradient(ellipse at 50% 0, rgba(212,175,55,.09), transparent 60%),
    var(--glass-2); box-shadow: 0 24px 80px rgba(0,0,0,.22);
}
.history-book__page-number, .history-book__count {
  color: var(--text-3); font-size: .85rem; font-variant-numeric: tabular-nums;
}
.history-book__page-number { text-align: end; margin-bottom: clamp(30px, 7vh, 72px); }
.history-book__cover {
  display: flex; min-height: 48vh; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
}
.history-book__cover h1 { max-width: 780px; margin: 18px 0; font-size: clamp(2.4rem, 7vw, 5rem); }
.history-book__cover .lead { max-width: 650px; }
.history-book__credits {
  display: grid; gap: 8px; margin-top: clamp(40px, 9vh, 90px);
  color: var(--text-2); text-align: center;
}
.history-book__text { max-width: 740px; margin-inline: auto; }
.history-book__text > h1 { font-size: clamp(1.8rem, 4vw, 2.7rem); margin: 0 0 24px; }
.history-book__text .legal__body { margin-top: 24px; }
.history-book__index { list-style: none; padding: 0; columns: 2; column-gap: 36px; }
.history-book__index li { break-inside: avoid; margin: 0 0 12px; }
.history-book__index a, .history-book__index li > span {
  display: grid; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--glass-line);
}
.history-book__index a:hover { color: var(--gold-bright); }
.history-book__index a span, .history-book__index small { color: var(--text-3); font-size: .82rem; }
.history-book__pagination { max-width: 960px; margin: 20px auto 0; }
html[lang="ur"] .history-book__index, html[lang="ar"] .history-book__index { direction: rtl; }
@media print {
  .history-book__toolbar, .history-book__pagination, .history-book__page-number { display: none !important; }
  .history-book__page { min-height: 0; border: 0; box-shadow: none; padding: 0; background: #fff; }
  .history-book__text { max-width: none; }
}

/* an article card in a listing */
.arts .art { display: flex; flex-direction: column; text-decoration: none; }
.art__img {
  display: block; width: calc(100% + 2px); margin: -1px -1px 18px;
  aspect-ratio: 16/9; border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: #0a1a13 center/cover no-repeat;
}
.art__cat {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 9px;
}
html[lang="ur"] .art__cat, html[lang="ar"] .art__cat { letter-spacing: 0; text-transform: none; font-size: .78rem; }
.arts .art h3 { margin-bottom: .45em; }
.arts .art p { flex: 1; }
.art__src {
  margin-top: 14px; font-size: .76rem; color: var(--text-3);
  padding-top: 12px; border-top: 1px solid var(--glass-line);
}

/* the article page */
.art__hero {
  width: 100%; border-radius: var(--r-lg); margin: 0 0 2em;
  border: 1px solid var(--glass-line);
}
.art-body p { font-size: 1.04rem; }
.art-body blockquote {
  margin: 0 0 1.4em; padding: 18px 26px;
  border-inline-start: 3px solid var(--gold);
  background: rgba(212,175,55,.07);
  border-radius: 0 var(--r) var(--r) 0;
  color: var(--cream); font-size: 1.08rem;
}
html[lang="ur"] .art-body blockquote, html[lang="ar"] .art-body blockquote {
  border-radius: var(--r) 0 0 var(--r);
}
.art-body blockquote p:last-child { margin-bottom: 0; }

/* the strip of latest pieces on the home page, filled in by site.js */
.latest { min-height: 1px; }
.latest__empty { text-align: center; color: var(--text-3); font-size: .95rem; }

/* =========================================================================
   20. TOOL PAGES - prayer times by city, Qibla, Zakat, Hijri.
   ========================================================================= */

/* city index */
.citysearch { max-width: 520px; margin: 0 auto clamp(26px, 4vw, 44px); }
.citysearch input {
  width: 100%; padding: 15px 22px; border-radius: 999px; font: inherit;
  background: var(--glass-2); border: 1px solid var(--glass-line); color: var(--text);
  transition: border-color .25s;
}
.citysearch input:focus { outline: none; border-color: var(--gold-hair-2); }
.citysearch input::placeholder { color: var(--text-3); }

.citylist__h {
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); font-family: var(--font-body); margin: 34px 0 14px;
}
html[lang="ur"] .citylist__h, html[lang="ar"] .citylist__h { letter-spacing: 0; text-transform: none; font-size: .9rem; }
.citylist { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 8px; }
.citylist a {
  display: block; padding: 12px 16px; border-radius: var(--r);
  background: var(--glass); border: 1px solid var(--glass-line);
  transition: border-color .22s, background .22s, transform .22s var(--ease-out);
}
.citylist a:hover { border-color: var(--gold-hair); background: rgba(212,175,55,.08); transform: translateY(-2px); }
.citylist b { display: block; color: var(--cream); font-weight: 500; font-size: .96rem; }
.citylist span { font-size: .78rem; color: var(--text-3); }
.citylist__none { text-align: center; color: var(--text-3); margin-top: 26px; }

/* the five times */
.times {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 10px; margin: 30px 0 22px;
}
.times__c {
  padding: 18px 10px; border-radius: var(--r); text-align: center;
  background: linear-gradient(160deg, var(--glass-2), var(--glass));
  border: 1px solid var(--gold-hair);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
}
.times__c--soft { border-color: var(--glass-line); opacity: .82; }
.times__c span {
  display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 7px;
}
html[lang="ur"] .times__c span, html[lang="ar"] .times__c span { letter-spacing: 0; text-transform: none; font-size: .82rem; }
.times__c b {
  font-family: var(--font-display); font-size: clamp(1.02rem, 1.9vw, 1.36rem);
  color: var(--gold-bright); font-weight: 400; white-space: nowrap;
}
.times__c--soft b { color: var(--text); }

/* method pickers */
.opts { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.opts label { display: grid; gap: 6px; flex: 1 1 260px; }
.opts span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
html[lang="ur"] .opts span, html[lang="ar"] .opts span { letter-spacing: 0; text-transform: none; font-size: .86rem; }
.opts select {
  padding: 11px 15px; border-radius: 10px; font: inherit; cursor: pointer;
  background: rgba(0,0,0,.34); border: 1px solid var(--glass-line); color: var(--text);
}
.opts select:focus { outline: none; border-color: var(--gold-hair-2); }
.opts option { background: #0e2419; }

/* the month table */
.tablewrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--glass-line); }
.montht { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 560px; }
.montht th, .montht td { padding: 10px 12px; text-align: start; white-space: nowrap; }
.montht thead th {
  color: var(--gold); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(0,0,0,.28); position: sticky; top: 0;
}
html[lang="ur"] .montht thead th, html[lang="ar"] .montht thead th { letter-spacing: 0; text-transform: none; font-size: .84rem; }
.montht tbody tr { border-top: 1px solid var(--glass-line); }
.montht tbody td { color: var(--text-2); }
.montht tbody td:first-child { color: var(--text-3); }
.montht tbody tr.on { background: rgba(212,175,55,.12); }
.montht tbody tr.on td { color: var(--cream); }

.citynear { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.citynear a {
  padding: 6px 13px; border-radius: 999px; font-size: .86rem;
  background: var(--glass-2); border: 1px solid var(--glass-line); color: var(--text-2);
}
.citynear a:hover { border-color: var(--gold-hair); color: var(--gold-bright); }

.hintline { font-size: .84rem; color: var(--text-3); margin: 10px 0 0; }

/* Qibla */
.qibla { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 5vw, 56px); align-items: center; margin: 30px 0 40px; }
.qibla__dial {
  position: relative; width: min(260px, 60vw); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--gold-hair);
  background: radial-gradient(circle at 50% 40%, rgba(0,105,92,.28), transparent 68%);
  display: grid; place-items: center;
  transition: transform .25s linear;
}
.qibla__dial::after {
  content: ""; position: absolute; inset: 14px; border-radius: 50%;
  border: 1px dashed rgba(212,175,55,.26);
}
.qibla__n { position: absolute; top: 10px; font-size: .74rem; letter-spacing: .2em; color: var(--text-3); }
.qibla__needle {
  position: absolute; width: 3px; height: 42%; bottom: 50%; border-radius: 3px;
  transform-origin: 50% 100%;
  background: linear-gradient(180deg, var(--gold-bright), rgba(212,175,55,.15));
  box-shadow: 0 0 18px rgba(212,175,55,.55);
  transition: transform .3s var(--ease-out);
}
.qibla__kaaba {
  position: absolute; width: 16px; height: 18px; border-radius: 2px;
  background: linear-gradient(160deg, #222, #050505);
  box-shadow: 0 0 16px rgba(212,175,55,.5), 0 1px 0 var(--gold) inset;
}
.qibla__big { font-family: var(--font-display); font-size: clamp(2.6rem, 7vw, 4rem); color: var(--gold-bright); line-height: 1; }
.qibla__sub { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin: 8px 0 0; }
html[lang="ur"] .qibla__sub, html[lang="ar"] .qibla__sub { letter-spacing: 0; text-transform: none; font-size: .92rem; }
.qibla__km { margin-top: 18px; font-size: 1.1rem; color: var(--cream); }
.qibla__km span { font-size: .84rem; color: var(--text-3); }

/* Zakat */
.zk__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.zk__f { display: grid; gap: 6px; margin-bottom: 14px; }
.zk__f span { font-size: .84rem; color: var(--text-2); }
.zk__f input {
  padding: 11px 14px; border-radius: 10px; font: inherit; width: 100%;
  background: rgba(0,0,0,.34); border: 1px solid var(--glass-line); color: var(--text);
}
.zk__f input:focus { outline: none; border-color: var(--gold-hair-2); }
.zk__out { margin-top: 20px; padding: 24px clamp(20px, 3vw, 34px); border-radius: var(--r-lg); display: grid; gap: 12px; }
.zk__out > div { display: flex; align-items: baseline; gap: 14px; }
.zk__out span { color: var(--text-2); margin-inline-end: auto; }
.zk__out b { font-family: var(--font-display); font-size: 1.3rem; color: var(--cream); font-weight: 400; }
.zk__due { padding-top: 14px; border-top: 1px solid var(--gold-hair); }
.zk__due b { font-size: clamp(1.7rem, 4vw, 2.4rem); color: var(--gold-bright); }
.zk__below { margin: 6px 0 0; font-size: .88rem; color: var(--text-3); }

/* Hijri */
.hijri { padding: clamp(26px, 4vw, 46px); border-radius: var(--r-lg); text-align: center; }
.hijri__lab { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
html[lang="ur"] .hijri__lab, html[lang="ar"] .hijri__lab { letter-spacing: 0; text-transform: none; font-size: .88rem; }
.hijri__big { font-family: var(--font-display); font-size: clamp(1.8rem, 5vw, 3rem); color: var(--cream); margin-top: 10px; }
.hijri__big small { font-size: .5em; color: var(--gold); }
.hijri__sub { color: var(--text-3); margin-top: 8px; font-size: .95rem; }

@media (max-width: 1000px) {
  .times { grid-template-columns: repeat(3, 1fr); }
  .zk__grid { grid-template-columns: 1fr; }
  .qibla { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
@media (max-width: 560px) {
  .times { grid-template-columns: repeat(2, 1fr); }
  .citylist { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   21. THE ISLAMIC CALENDAR PAGES
   ========================================================================= */

/* the countdown panel at the top of an occasion's page */
.evhero {
  padding: clamp(28px, 5vw, 52px); border-radius: var(--r-xl);
  text-align: center; margin: 26px 0 28px;
}
.evhero__lab {
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
html[lang="ur"] .evhero__lab, html[lang="ar"] .evhero__lab { letter-spacing: 0; text-transform: none; font-size: .9rem; }
.evhero__date {
  font-family: var(--font-display); font-size: clamp(1.7rem, 4.6vw, 2.9rem);
  color: var(--cream); margin-top: 12px; line-height: 1.18;
}
.evhero__hijri { color: var(--gold-bright); margin-top: 8px; font-size: 1.05rem; }
.evhero__count {
  display: inline-block; margin-top: 20px; padding: 9px 22px; border-radius: 999px;
  background: rgba(212,175,55,.12); border: 1px solid var(--gold-hair);
  color: var(--gold-bright); font-size: 1rem;
}
.evhero__len { margin-top: 12px; color: var(--text-3); font-size: .9rem; }

/* the year table: an occasion that has already passed is dimmed rather than
   hidden, because half the reason to look at a past year is to check it */
.calt td a { color: var(--cream); }
.calt td a:hover { color: var(--gold-bright); }
.calt tr.past td { opacity: .5; }
.calt__when { color: var(--gold); white-space: nowrap; }
html[lang="ur"] .calt__when, html[lang="ar"] .calt__when { white-space: normal; }

.yearlist { display: flex; flex-wrap: wrap; gap: 9px; margin: 18px 0 0; }
.yearlist a {
  padding: 10px 20px; border-radius: 999px; font-size: .95rem;
  background: var(--glass-2); border: 1px solid var(--glass-line); color: var(--text-2);
  transition: border-color .25s, background .25s, color .25s;
}
.yearlist a:hover { border-color: var(--gold-hair); color: var(--cream); }
.yearlist a.on { background: rgba(212,175,55,.16); border-color: var(--gold-hair-2); color: var(--gold-bright); }

/* =========================================================================
   22. THE HADITH COLLECTIONS BROWSER
   ========================================================================= */

/* the Arabic text. Bigger than the translation on purpose: it is the text,
   and the translation is the help. */
.hd__ar {
  font-family: "Amiri", "Noto Naskh Arabic", Georgia, serif;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 2.05;
  color: var(--cream);
  padding: clamp(20px, 3vw, 32px);
  margin: 26px 0;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(212,175,55,.09), rgba(255,255,255,.03));
  border: 1px solid var(--gold-hair);
  border-inline-start: 3px solid var(--gold);
}
.hd__tr {
  font-size: 1.05rem; line-height: 1.85; color: var(--text-2);
  margin-bottom: 26px;
}
.hd__nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hd__nav .btn { flex: 0 1 auto; }

/* a book's list of hadith */
.hdlist { display: grid; gap: 8px; margin-top: 26px; }
.hdlist__i {
  display: grid; grid-template-columns: 62px 1fr; gap: 14px; align-items: start;
  padding: 14px 18px; border-radius: var(--r);
  background: var(--glass); border: 1px solid var(--glass-line);
  transition: border-color .22s, background .22s;
}
.hdlist__i:hover { border-color: var(--gold-hair); background: rgba(212,175,55,.07); }
.hdlist__i b {
  font-family: var(--font-display); font-size: 1.05rem; color: var(--gold);
  font-weight: 400; text-align: center;
  padding: 2px 0; border-radius: 8px; background: rgba(212,175,55,.10);
}
.hdlist__i span { color: var(--text-2); font-size: .95rem; line-height: 1.6; }

/* a collection's books */
.bookgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 9px; margin-top: 26px;
}
.bookgrid a {
  display: block; padding: 14px 18px; border-radius: var(--r);
  background: var(--glass); border: 1px solid var(--glass-line);
  transition: border-color .22s, background .22s, transform .22s var(--ease-out);
}
.bookgrid a:hover { border-color: var(--gold-hair); background: rgba(212,175,55,.08); transform: translateY(-2px); }
.bookgrid b { display: block; color: var(--cream); font-weight: 500; font-size: .97rem; line-height: 1.4; }
.bookgrid span { font-size: .78rem; color: var(--text-3); }

@media (max-width: 560px) {
  .hdlist__i { grid-template-columns: 48px 1fr; gap: 10px; padding: 12px 14px; }
  .bookgrid { grid-template-columns: 1fr; }
}

/* =========================================================================
   23. SEARCH RESULTS
   ========================================================================= */

.sres { display: grid; gap: 7px; margin-bottom: 30px; }
.sres__i {
  display: grid; gap: 4px; padding: 14px 18px; border-radius: var(--r);
  background: var(--glass); border: 1px solid var(--glass-line);
  transition: border-color .2s, background .2s;
}
.sres__i:hover { border-color: var(--gold-hair); background: rgba(212,175,55,.07); }
.sres__i--alt { margin-inline-start: 22px; opacity: .85; }
.sres__t { color: var(--cream); font-size: 1rem; }
.sres__s { color: var(--text-2); font-size: .9rem; line-height: 1.6; }
.sres__g {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); margin-top: 2px;
}
html[lang="ur"] .sres__g, html[lang="ar"] .sres__g { letter-spacing: 0; text-transform: none; font-size: .8rem; }

/* =========================================================================
   24. PHONE FIXES

   Measured on a real 390px viewport, not guessed. tests/mobile-test.mjs
   guards the one thing that cannot be seen in a screenshot - whether the
   page scrolls sideways - and these are the things that could.
   ========================================================================= */

@media (max-width: 520px) {
  /* The tagline wrapped the brand onto three lines and pushed the whole
     header down. On a phone the name is enough; the tagline is on every
     page below it anyway. */
  .brand__sub { display: none; }
  .brand img { width: 34px; height: 34px; }
  .brand__name { font-size: 1.05rem; }
  .hdr__in { height: 62px; gap: 10px; }

  /* A breadcrumb with four levels wrapped into an unreadable block. One
     line that scrolls is honest about being long; a wrapped one just looks
     broken. The gradient at the end is the hint that it scrolls. */
  .crumb {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
    padding-bottom: 4px;
    mask-image: linear-gradient(to right, #000 85%, transparent);
  }
  [dir="rtl"] .crumb { mask-image: linear-gradient(to left, #000 85%, transparent); }
  .crumb::-webkit-scrollbar { display: none; }
  .crumb > * { flex: none; white-space: nowrap; }

  /* Long titles set in a display serif need a little more room to breathe
     before they are broken across lines. */
  h1 { hyphens: auto; }

  /* The Arabic panel is the point of a hadith page; give it the width. */
  .hd__ar {
    padding: 18px 16px;
    margin-inline: calc(var(--pad) * -0.5);
    font-size: 1.25rem;
    line-height: 1.95;
  }

  /* Stacked, so a thumb reaches all three without a horizontal stretch. */
  .hd__nav { flex-direction: column; }
  .hd__nav .btn { width: 100%; }
  .history-book__toolbar { align-items: stretch; }
  .history-book__toolbar .btn { flex: 1; }
  .history-book__page { min-height: 70vh; padding: 24px 18px; }
  .history-book__index { columns: 1; }
  .history-book__pagination .btn { max-width: 46%; }

  /* Article typography: slightly larger, because a phone is held closer and
     these pages are read, not scanned. */
  .art-body p, .legal__body p { font-size: 1.02rem; line-height: 1.8; }
  .art-body blockquote { padding: 14px 18px; font-size: 1.04rem; }

  /* The source callout is the first thing a reader should be able to check. */
  .note { padding: 16px 18px; }
}

/* A phone in landscape, or a small tablet: the month table is the one thing
   that genuinely needs the width, so let it use the full bleed. */
@media (max-width: 760px) {
  .tablewrap {
    margin-inline: calc(var(--pad) * -1);
    border-inline: 0;
    border-radius: 0;
  }
}

/* The "Part 2 / 4" counter that sits between the two page buttons. It uses
   .hd__nav, the row the hadith browser already had, so it stacks on a phone
   with the rest of section 24 and needs no rule of its own there. */
.pg__at {
  align-self: center;
  color: var(--text-3);
  font-size: .9rem;
  letter-spacing: .06em;
}

/* The share row under an article. Wraps rather than scrolls, because on a
   phone a row that scrolls sideways hides the buttons at the end of it. */
.share {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid var(--gold-hair);
}
.share__lab {
  color: var(--text-3); font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase;
  margin-inline-end: 4px;
}
html[lang="ur"] .share__lab, html[lang="ar"] .share__lab {
  letter-spacing: 0; text-transform: none; font-size: .95rem;
}

/* The little line above a series card - "Next in this series". Gold, small
   and set apart, so the card reads as a direction rather than a heading. */
.art__kick {
  display: block; margin-bottom: 8px;
  color: var(--gold); font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase;
}
html[lang="ur"] .art__kick, html[lang="ar"] .art__kick {
  letter-spacing: 0; text-transform: none; font-size: .92rem;
}

/* The map of the site on the home page: five pillars, each a small heading
   with its sections under it. It wraps rather than scrolls, because a row
   that scrolls sideways on a phone hides the sections at the end of it —
   and hiding a section on the home page is the exact fault this replaced. */
.pillars {
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 40px; text-align: start;
}
.pillar__h {
  margin: 0 0 12px;
  font-family: var(--font-display); font-size: .82rem; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
}
html[lang="ur"] .pillar__h, html[lang="ar"] .pillar__h {
  letter-spacing: 0; text-transform: none; font-size: 1rem; line-height: 1.7;
}
html[lang="hi"] .pillar__h { letter-spacing: .08em; line-height: 1.5; }
/* The pillar buttons WRAP on a phone rather than stacking, which the
   general .btn-row rule does below 620px. Fourteen full-width buttons in a
   column is most of a screen of scrolling to get past the site map - and the
   map exists so sections are easy to reach, not hard. */
.pillars .btn-row {
  justify-content: flex-start;
  gap: 8px;
  flex-direction: row;
  align-items: center;
}
.pillars .btn { flex: 0 0 auto; width: auto; padding: 11px 20px; font-size: .9rem; }

/* =========================================================================
   Saved pages — the Save button's on state, and the /saved list.

   btn--on is the only new button variant: a Save that has been pressed has
   to look different from one that has not, and it has to do so without
   colour alone, so the label changes too (Save -> Saved) and aria-pressed
   is set. A reader who cannot see the gold fill still gets both.
   ========================================================================= */
.btn--on {
  background: linear-gradient(180deg, rgba(212, 175, 55, .22), rgba(212, 175, 55, .10));
  border-color: var(--gold-hair-2);
  color: var(--gold-bright);
}
.btn--on:hover { border-color: rgba(212, 175, 55, .8); }

.saved { margin-top: 30px; }
.saved__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.saved__count { color: var(--text-2); font-size: .94rem; }

.saved__rows { list-style: none; margin: 0; padding: 0; }
.saved__row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; margin-bottom: 10px;
  border: 1px solid var(--glass-line); border-radius: 14px;
  background: rgba(255, 255, 255, .02);
}
.saved__link { flex: 1 1 260px; min-width: 0; font-weight: 600; }
.saved__sec {
  font-size: .8rem; color: var(--text-2);
  border: 1px solid var(--glass-line); border-radius: 999px; padding: 3px 10px;
  white-space: nowrap;
}
/* The remove button is pushed to the end in both directions: margin-inline
   works for ltr and for the two rtl languages without a second rule. */
.saved__x { margin-inline-start: auto; }

.saved__empty { padding: 26px 4px; color: var(--text-2); }
.saved__empty strong { color: var(--cream); }

@media (max-width: 480px) {
  .saved__row { padding: 12px 13px; }
  .saved__x { margin-inline-start: 0; }
}

/* =========================================================================
   Body tables and lists — the markers uc_body() turns into real markup.

   The wrapper scrolls, not the page. A four-column fiqh comparison cannot
   fit 360px, and a table that widens the document gives every OTHER element
   on the phone a horizontal scrollbar too — which is why tests/mobile-test
   checks the document width and not the table's.
   ========================================================================= */
.art-body .tw {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 22px 0;
  border: 1px solid var(--glass-line);
  border-radius: 14px;
}
.art-body table {
  border-collapse: collapse;
  width: 100%;
  min-width: 460px;
  font-size: .95rem;
}
.art-body th,
.art-body td {
  padding: 11px 14px;
  text-align: start;
  vertical-align: top;
  border-bottom: 1px solid var(--glass-line);
}
.art-body tr:last-child td { border-bottom: 0; }
.art-body th {
  color: var(--gold-bright);
  font-weight: 700;
  background: rgba(212, 175, 55, .07);
  white-space: nowrap;
}
/* A table written with no header row still has a first column that reads as
   one — the fiqh comparisons put the subject there. */
.art-body tbody td:first-child { color: var(--cream); }

.art-body ul,
.art-body ol { margin: 18px 0 18px 0; padding-inline-start: 26px; }
.art-body li { margin-bottom: 9px; line-height: 1.75; }
.art-body li::marker { color: var(--gold-soft); }

/* The language label above each hadith translation. Small, quiet, and
   necessary: a Hindi reader was being shown a block of Urdu with nothing to
   say what it was. */
.hd__trlab {
  margin: 22px 0 6px;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.hd__tr[dir="rtl"] { text-align: right; }