/* ═══════════════════════════════════════════════════════════════════════════
   نقاء — the site
   ═══════════════════════════════════════════════════════════════════════════
   Every value here comes from tokens.css. Nothing below writes a colour, a
   type size, a radius or a spacing number of its own — see the header of that
   file for why, and scripts/check_site_css.py for what enforces it.

   RTL IS THE DEFAULT, NOT A MODE. Logical properties throughout —
   `padding-inline`, `margin-inline-start`, `inset-inline-end` — so the layout
   is described in terms of «the start of the line» rather than «the left».
   The previous stylesheet used left/right directly and then flipped values by
   hand in places, which is how a layout ends up almost-mirrored.
   ═════════════════════════════════════════════════════════════════════════ */

/* tokens.css is linked before this file in index.html, not @imported from
   here: an @import is only discovered after this sheet has downloaded and
   parsed, which puts a second round trip in front of the first paint. */

/* ── Reset ──────────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  /* The sticky nav must not cover the heading of a section jumped to. */
  scroll-padding-block-start: calc(var(--nav-height) + var(--space-md));
}

body {
  font-family: 'Cairo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--text-body);
  background: var(--surface-page);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

/* HIDDEN MEANS HIDDEN — ONE RULE, NOT ONE PER ELEMENT.
   `hidden` is an attribute, and the browser's own `[hidden] { display: none }`
   is the weakest style on the page: every `display` written in this file beats
   it. The sleep-timer menu declares `display: flex` and so never closed, and
   the play and pause icons are <svg>, which the line above sets to `display:
   block` — so both were drawn at once and the button never appeared to change.
   site.js toggles `hidden` in eighteen places; this is the line that makes all
   eighteen mean something. `!important` because the whole point is to outrank
   a `display` that a rule further down has already set. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: var(--leading-tight); color: var(--text-strong); font-weight: var(--weight-bold); }
p { max-inline-size: var(--measure); }

/* Focus is visible and it is gold. A keyboard user must never have to guess
   where they are, and the default ring is invisible on this ground. */
:focus-visible {
  outline: 2px solid var(--hue-gold-soft);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── The ground ─────────────────────────────────────────────────────────── */

.starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--surface-page);
  background-image:
    radial-gradient(ellipse 120% 62% at 50% -10%, var(--surface-accent), transparent 62%),
    var(--pattern-geometry);
}

.content { position: relative; z-index: 1; }

.shell {
  inline-size: min(100% - (var(--space-md) * 2), var(--shell-width));
  margin-inline: auto;
}

.section { padding-block: var(--space-section); }

/* ── Navigation ─────────────────────────────────────────────────────────── */

.top-nav {
  position: sticky;
  transition: background-color var(--speed-medium) var(--ease-out),
              border-color var(--speed-medium) var(--ease-out),
              box-shadow var(--speed-medium) var(--ease-out);
  inset-block-start: 0;
  z-index: 50;
  block-size: var(--nav-height);
  display: flex;
  align-items: center;
  background: var(--surface-nav);
  backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--line-faint);
}

/* The nav sits on the hero's own glow at rest and needs no edge of its own;
   once the page moves under it, it has to separate from whatever is passing
   beneath. */
.top-nav.is-scrolled {
  background: var(--surface-nav-lifted);
  border-block-end-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.nav-shell {
  inline-size: min(100% - (var(--space-md) * 2), var(--shell-width));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.nav-brand { display: flex; align-items: center; gap: var(--space-2xs); }

.nav-brand__logo {
  inline-size: 38px;
  block-size: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

.nav-brand__meta { display: flex; flex-direction: column; line-height: var(--leading-tight); }
.nav-brand__title { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--text-strong); }
.nav-brand__badge { font-size: var(--text-2xs); color: var(--text-faint); }

/* NINE LINKS IN A 68px BAR. Every label was wrapping to two lines — the row
   needs about 800px and the shell has roughly 780 left once the brand and the
   download button have taken theirs, so the flexbox resolved the shortfall by
   breaking «مواقيت الصلاة» in half. The row scrolls sideways instead: a tenth
   link pushes the row, it does not break the bar. min-inline-size: 0 is what
   lets a flex child shrink below its content and therefore scroll at all. */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nav-links::-webkit-scrollbar { display: none; }

.nav-link {
  flex: none;
  white-space: nowrap;
  font-size: var(--text-sm);
  color: var(--text-body);
  padding-block: var(--space-3xs);
  border-block-end: 1px solid transparent;
  transition: color var(--speed-fast) var(--ease-out),
              border-color var(--speed-fast) var(--ease-out);
}

.nav-link:hover { color: var(--text-accent); border-block-end-color: var(--line-strong); }

.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  /* One line, always: squeezed by the links beside it, «تحميل مجاني» was
     breaking into a two-line pill taller than the bar. */
  flex: none;
  white-space: nowrap;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--surface-accent-solid);
  color: var(--text-on-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-sm);
  transition: transform var(--speed-fast) var(--ease-out),
              box-shadow var(--speed-fast) var(--ease-out);
}

.nav-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-gold); }
.nav-btn svg { inline-size: 16px; block-size: 16px; }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-xl);
  padding-block: var(--space-section);
}

.hero__glow {
  position: absolute;
  inset-block-start: -10%;
  inset-inline-end: -10%;
  inline-size: min(58vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--surface-accent), transparent 68%);
  filter: blur(40px);
  pointer-events: none;
  z-index: -1;
}

.hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); }

.eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-sm);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-accent);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  color: var(--text-accent);
  box-shadow: var(--shadow-sm);
}

.eyebrow-badge svg {
  inline-size: 14px;
  block-size: 14px;
  flex: none;
}

.badge-islamic-icon,
.badge-sparkle { color: var(--text-gold); display: flex; align-items: center; }
.badge-sparkle svg { inline-size: 11px; block-size: 11px; }
.badge-divider { inline-size: 1px; block-size: 12px; background: var(--line-strong); }
.badge-free { color: var(--text-strong); font-weight: var(--weight-bold); }

.wordmark {
  font-family: var(--font-quran);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--hue-green-deep);
  letter-spacing: 0.02em;
}

.tagline {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  max-inline-size: 18ch;
}

.lede { font-size: var(--text-md); color: var(--text-body); }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* ── Buttons ────────────────────────────────────────────────────────────── */

/* One button language. Three sizes and two weights of emphasis, so a button
   never has to be described twice. */
.download,
.hero-download-btn,
.app-download-btn,
.secondary-btn,
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--speed-fast) var(--ease-out),
              box-shadow var(--speed-fast) var(--ease-out),
              background-color var(--speed-fast) var(--ease-out);
}

.download,
.hero-download-btn,
.app-download-btn {
  background: var(--surface-accent-solid);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-md);
}

.download:hover,
.hero-download-btn:hover,
.app-download-btn:hover {
  transform: translateY(-2px);
  background: var(--hue-green-deep);
  box-shadow: var(--shadow-accent);
}
.download:active { transform: translateY(0); }
.download svg, .secondary-btn svg, .share-btn svg { inline-size: 18px; block-size: 18px; }

.hero-download-btn { padding: var(--space-sm) var(--space-lg); font-size: var(--text-md); }
.download-icon-box {
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--radius-sm);
  background: var(--veil-faint);
}
.download-text-wrap { display: flex; flex-direction: column; line-height: var(--leading-tight); text-align: start; }
.download-main-text { font-size: var(--text-md); font-weight: var(--weight-bold); }
.download-sub-text { font-size: var(--text-2xs); font-weight: var(--weight-regular); opacity: 0.76; }

.secondary-btn,
.share-btn {
  background: var(--surface-raised);
  border-color: var(--line);
  color: var(--text-strong);
}

.secondary-btn:hover,
.share-btn:hover { background: var(--surface-lifted); border-color: var(--line-strong); transform: translateY(-2px); }

.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-xs);
  color: var(--text-faint);
}

/* ── Card foundation ────────────────────────────────────────────────────── */

/* Every panel on the page is this, then a few differences. Before, each
   section invented its own padding, radius, border and shadow, so four kinds
   of card disagreed on all four. */
.spotlight-card,
.feature-card,
.why-card,
.app-card,
.faq-item,
.hadith-banner {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.feature-card,
.why-card,
.app-card {
  padding: var(--space-lg);
  transition: transform var(--speed-medium) var(--ease-out),
              border-color var(--speed-medium) var(--ease-out),
              box-shadow var(--speed-medium) var(--ease-out);
}

.feature-card:hover,
.why-card:hover,
.app-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-accent);
  box-shadow: var(--shadow-md);
}

/* ── Spotlight: 3D Paper Mushaf Showcase ────────────────────────────── */

.spotlight-section { padding-block: var(--space-section); }

.spotlight-card {
  position: relative;
  padding: clamp(var(--space-md), 4vw, var(--space-xl));
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.spotlight-card::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: linear-gradient(90deg, transparent, var(--hue-green), transparent);
  pointer-events: none;
}

.spotlight-eyebrow,
.spotlight-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--surface-gold);
  border: 1px solid var(--line-gold);
  color: var(--text-gold);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-sm);
  margin-block-end: var(--space-xs);
}

.spotlight-eyebrow svg,
.spotlight-badge svg {
  inline-size: 14px;
  block-size: 14px;
  flex: none;
  color: var(--text-gold);
}

.spotlight-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.spotlight-text h2 {
  font-family: var(--font-quran);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  margin-block-end: var(--space-2xs);
  color: var(--text-strong);
}

.spotlight-tag {
  font-size: var(--text-sm);
  color: var(--text-accent);
  font-weight: var(--weight-medium);
  margin-block-end: var(--space-xs);
}

.spotlight-desc {
  margin-block-end: var(--space-md);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--text-body);
}

.spotlight-perks {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-block-end: var(--space-lg);
}

.perk-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--surface-sunk);
  border: 1px solid var(--line-faint);
  transition: transform var(--speed-fast) var(--ease-out),
              border-color var(--speed-fast) var(--ease-out),
              background var(--speed-fast) var(--ease-out);
}

.perk-item:hover {
  transform: translateX(-4px);
  border-color: var(--line);
  background: var(--surface-accent);
}

.perk-icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--radius-sm);
  background: var(--surface-accent);
  border: 1px solid var(--line-accent);
  color: var(--text-accent);
}

.perk-icon svg {
  inline-size: 18px;
  block-size: 18px;
}

.perk-item b {
  display: block;
  color: var(--text-strong);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  margin-block-end: 2px;
}

.perk-item span {
  font-size: var(--text-xs);
  color: var(--text-faint);
  line-height: var(--leading-snug);
}

.spotlight-action {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

/* ── The 3D Interactive Mushaf Reader Artwork ────────────────────────── */

.spotlight-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  inline-size: 100%;
}

.mushaf-reader-wrap {
  position: relative;
  inline-size: 100%;
  max-inline-size: 440px;
  perspective: 1200px;
}

.mushaf-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  margin-block-end: var(--space-xs);
  inline-size: 100%;
}

.mushaf-tab-btn {
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-faint);
  background: var(--surface-sunk);
  color: var(--text-body);
  font-size: var(--text-2xs);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--speed-fast) var(--ease-out);
}

.mushaf-tab-btn:hover {
  color: var(--text-accent);
  border-color: var(--line);
}

.mushaf-tab-btn.active {
  background: var(--surface-accent-solid);
  color: var(--text-on-accent);
  border-color: transparent;
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-sm);
}

.mushaf-art-frame {
  position: relative;
  inline-size: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--line-gold);
  background: var(--surface-mushaf);
  box-shadow: var(--shadow-md);
  transition: opacity var(--speed-medium) var(--ease-out);
}

.mushaf-running-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 14px 6px;
  margin-block-end: 6px;
  border-block-end: 1px solid var(--line-gold);
  font-family: var(--font-quran);
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--hue-green-dark);
}

.mushaf-header-item {
  color: var(--hue-green-dark);
  letter-spacing: 0.2px;
}

.mushaf-header-rosette {
  color: var(--hue-gold-deep);
  font-size: 13px;
}

.mushaf-art-inner {
  position: relative;
  block-size: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-xs);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-gold);
  background: var(--hue-paper);
  text-align: center;
  box-shadow: none;
}

/* Authentic Surah Header Plate */
.mushaf-surah-plate {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  border: 1.4px solid var(--hue-gold);
  background: var(--hue-green-dark);
  color: var(--hue-gold-light);
  font-family: var(--font-quran);
  font-size: 11px;
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-sm);
  margin-block-end: 2px;
  transition: all var(--speed-fast) var(--ease-out);
}

.mushaf-plate-wing-left,
.mushaf-plate-wing-right {
  font-size: 10.5px;
  color: var(--hue-gold-light);
  letter-spacing: 0.2px;
}

.mushaf-plate-cartouche {
  background: var(--hue-paper);
  border: 1.2px solid var(--hue-gold);
  border-radius: var(--radius-pill);
  padding: 2px 16px;
  color: var(--hue-green-dark);
  font-family: var(--font-quran);
  font-size: 15.5px;
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-sm);
}

.mushaf-bismillah {
  font-family: var(--font-quran);
  font-size: clamp(17px, 2.1vw, 21px);
  color: var(--hue-green-dark);
  margin-block: 2px 4px;
}

.mushaf-verses-body {
  font-family: var(--font-quran);
  font-size: clamp(16px, 1.9vw, 20px);
  line-height: 2.15;
  color: var(--hue-ink);
  padding-inline: 4px;
  text-align: justify;
  text-align-last: center;
}

.ayah-highlight {
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  transition: background-color var(--speed-fast) var(--ease-out), color var(--speed-fast) var(--ease-out);
}

.ayah-highlight:hover,
.ayah-highlight.active {
  background-color: var(--hue-gold-tint);
  color: var(--hue-green-dark);
  font-weight: var(--weight-bold);
}

.verse-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  border: 1.2px solid var(--hue-gold);
  background: var(--hue-paper-edge);
  color: var(--hue-green-dark);
  font-size: 12px;
  font-weight: var(--weight-bold);
  font-family: var(--font-quran);
  margin-inline: 4px;
  vertical-align: middle;
  box-shadow: none;
}

.mushaf-page-number-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-block: 4px 2px;
  margin-block-start: 4px;
  border-block-start: 1px solid var(--line-gold);
}

.mushaf-page-number {
  font-family: var(--font-quran);
  font-size: 13px;
  font-weight: var(--weight-bold);
  color: var(--hue-green-dark);
}

.mushaf-page-num-rosette {
  font-size: 11px;
  color: var(--hue-gold-deep);
}

.mushaf-tafsir-card {
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-gold);
  background: var(--hue-paper-edge);
  padding: var(--space-xs) var(--space-sm);
  text-align: start;
  display: grid;
  gap: 4px;
  margin-block-start: 4px;
  animation: fade-in-up 0.25s ease-out;
}

.tafsir-title {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  color: var(--hue-green-dark);
}

.tafsir-text {
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--hue-ink-soft);
}

/* Islamic corner brackets */
.mushaf-gold-corner {
  position: absolute;
  inline-size: 26px;
  block-size: 26px;
  border: 2px solid var(--hue-gold);
  pointer-events: none;
  opacity: 0.9;
}

.corner-tl {
  inset-block-start: var(--space-2xs);
  inset-inline-start: var(--space-2xs);
  border-inline-end: 0;
  border-block-end: 0;
  border-start-start-radius: var(--radius-sm);
}

.corner-tr {
  inset-block-start: var(--space-2xs);
  inset-inline-end: var(--space-2xs);
  border-inline-start: 0;
  border-block-end: 0;
  border-start-end-radius: var(--radius-sm);
}

.corner-bl {
  inset-block-end: var(--space-2xs);
  inset-inline-start: var(--space-2xs);
  border-inline-end: 0;
  border-block-start: 0;
  border-end-start-radius: var(--radius-sm);
}

.corner-br {
  inset-block-end: var(--space-2xs);
  inset-inline-end: var(--space-2xs);
  border-inline-start: 0;
  border-block-start: 0;
  border-end-end-radius: var(--radius-sm);
}

/* Reader navigation footer */
.mushaf-reader-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: 100%;
  gap: var(--space-2xs);
}

.mushaf-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--text-strong);
  font-size: var(--text-xs);
  font-family: inherit;
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--speed-fast) var(--ease-out);
}

.mushaf-nav-btn:hover {
  border-color: var(--line-strong);
  background: var(--surface-lifted);
  color: var(--text-accent);
}

.mushaf-nav-btn svg {
  inline-size: 14px;
  block-size: 14px;
}

.mushaf-audio-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface-accent-solid);
  color: var(--text-on-accent);
  font-size: var(--text-xs);
  font-family: inherit;
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: all var(--speed-fast) var(--ease-out);
}

.mushaf-audio-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-gold);
}

.mushaf-audio-btn svg {
  inline-size: 15px;
  block-size: 15px;
}

/* ── Section headings ───────────────────────────────────────────────────── */

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  text-align: center;
  margin-block-end: var(--space-xl);
}

.section-eyebrow {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  color: var(--text-accent);
  text-transform: uppercase;
}

.section-head h2 { font-size: var(--text-2xl); }
.section-head p { font-size: var(--text-md); color: var(--text-faint); margin-inline: auto; }

.divider { display: flex; align-items: center; justify-content: center; gap: var(--space-2xs); color: var(--text-accent); }
.divider::before,
.divider::after { content: ''; inline-size: clamp(40px, 12vw, 110px); block-size: 1px; background: linear-gradient(90deg, transparent, var(--line-strong)); }
.divider::after { background: linear-gradient(90deg, var(--line-strong), transparent); }
.divider svg { inline-size: 18px; block-size: 18px; }

/* ── The five demos, one at a time ───────────────────────────────────────
   TWELVE AND A HALF SCREENS OF TWENTY-ONE were five interactive playgrounds
   stacked end to end — the مصحف, the مواقيت, the إذاعة, the زكاة, the سبحة —
   each a working tool given a full section of its own. Measured at 375px they
   were 2.4 to 3 screens each, and a visitor scrolling past four of them to
   reach the download button is a visitor who has been asked to read a manual.

   Nothing was removed and nothing was moved. Each demo keeps its own section,
   its own id — so every nav link and every shared deep link still resolves —
   and its own heading. What changed is that four of them start `hidden`, and a
   tab bar in front chooses which one is open.

   The section that holds the bar has no bottom padding and the open panel has
   no top padding: two 120px gaps back to back read as a break in the page, and
   the bar belongs to the panel under it. */
.demos-section { padding-block-end: 0; }

.demo-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs);
  margin-block-start: var(--space-md);
}

.demo-tab {
  min-block-size: 44px;
  padding-inline: var(--space-md);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface-lifted);
  color: var(--text-faint);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.demo-tab:hover { color: var(--text-strong); border-color: var(--line-accent); }

.demo-tab.is-on {
  background: var(--surface-accent-solid);
  border-color: var(--surface-accent-solid);
  color: var(--text-on-accent);
}

/* The open panel sits directly under its own tab bar. */
.demo-panel { padding-block-start: var(--space-lg); }


/* ── Feature grid ───────────────────────────────────────────────────────── */

.features-grid,
.why-bento,
.apps {
  display: grid;
  gap: var(--space-md);
}

.features-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.why-bento     { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.apps          { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.feature__icon-wrap,
.why-icon-badge {
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  margin-block-end: var(--space-sm);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface-lifted);
  color: var(--text-accent);
}

.feature__icon-wrap svg,
.why-icon-badge svg { inline-size: 22px; block-size: 22px; }

.feature-card h3,
.why-text h3 { font-size: var(--text-lg); margin-block-end: var(--space-2xs); }
.feature-card p,
.why-text p { font-size: var(--text-sm); color: var(--text-faint); }

.feature-tags { display: flex; flex-wrap: wrap; gap: var(--space-3xs); margin-block-start: var(--space-sm); }
.feature-tags span {
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-faint);
  background: var(--surface-sunk);
  font-size: var(--text-2xs);
  color: var(--text-faint);
}

.why-card { display: flex; gap: var(--space-sm); align-items: flex-start; }
.why-icon-badge { margin-block-end: 0; flex: none; }

/* ── The آية band ───────────────────────────────────────────────────────── */

.band {
  display: grid;
  justify-items: center;
  gap: var(--space-xs);
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  margin-block: var(--space-section);
  border-block: 1px solid var(--line-faint);
  background: radial-gradient(ellipse 70% 100% at 50% 50%, var(--surface-accent), transparent 72%);
}

.band-ornament { color: var(--text-accent); }
.band-ornament svg { inline-size: 26px; block-size: 26px; }
.band__ayah { font-size: var(--text-xl); color: var(--hue-green-deep); line-height: var(--leading-body); max-inline-size: 30ch; }
.band-sub { font-size: var(--text-sm); color: var(--text-faint); }

/* ── App cards ──────────────────────────────────────────────────────────── */

.app-card { position: relative; display: flex; flex-direction: column; gap: var(--space-sm); }
.app-card--turath { border-color: var(--line-faint); }

.app-card__badge {
  position: absolute;
  inset-block-start: var(--space-md);
  inset-inline-end: var(--space-md);
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-pill);
  background: var(--surface-accent-solid);
  color: var(--text-on-accent);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
}

.app-card__badge--turath { background: var(--surface-lifted); color: var(--text-accent); border: 1px solid var(--line); }

.app-card__head { display: flex; align-items: center; gap: var(--space-xs); }
.app-card__mark { inline-size: 52px; block-size: 52px; border-radius: var(--radius-md); border: 1px solid var(--line); }
.app-card__name { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-strong); }
.app-card__tag { font-size: var(--text-xs); color: var(--text-accent); }
.app-card__desc { font-size: var(--text-sm); color: var(--text-faint); }

.app-card__list { display: grid; gap: var(--space-2xs); list-style: none; }
.app-card__list li {
  position: relative;
  padding-inline-start: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--text-body);
}
.app-card__list li::before {
  content: '◆';
  position: absolute;
  inset-inline-start: 0;
  color: var(--text-accent);
  font-size: var(--text-2xs);
}

.app-card__cta { margin-block-start: auto; display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; }
.app-card__metrics { font-size: var(--text-2xs); color: var(--text-faint); }
.app-card__hint { font-size: var(--text-2xs); color: var(--text-faint); }

.soon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  border: 1px dashed var(--line);
  font-size: var(--text-xs);
  color: var(--text-faint);
}
.soon svg { inline-size: 16px; block-size: 16px; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.faq-section { padding-block: var(--space-section); }
.faq-list { display: grid; gap: var(--space-xs); max-inline-size: 860px; margin-inline: auto; }

.faq-item { overflow: hidden; transition: border-color var(--speed-fast) var(--ease-out); }
.faq-item[open] { border-color: var(--line); }

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  cursor: pointer;
  list-style: none;
}

.faq-question::-webkit-details-marker { display: none; }

.faq-chevron {
  flex: none;
  display: flex;
  color: var(--text-accent);
  transition: transform var(--speed-medium) var(--ease-out);
}

.faq-chevron svg { inline-size: 18px; block-size: 18px; }

/* Turns the same way it came, rather than snapping back through 360°. */
.faq-item[open] .faq-chevron { transform: rotate(-180deg); }

.faq-answer {
  padding: 0 var(--space-md) var(--space-md);
  font-size: var(--text-sm);
  color: var(--text-faint);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.site-footer { padding-block: var(--space-section) var(--space-xl); border-block-start: 1px solid var(--line-faint); }
.footer-shell { display: grid; gap: var(--space-lg); justify-items: center; text-align: center; }

.hadith-banner { padding: var(--space-lg); display: grid; gap: var(--space-2xs); justify-items: center; }
.hadith { font-size: var(--text-lg); color: var(--hue-green-deep); line-height: var(--leading-body); max-inline-size: 34ch; }
.hadith-source { font-size: var(--text-2xs); color: var(--text-faint); }

.footer-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: center; align-items: center; }
.sadaqa { font-size: var(--text-xs); color: var(--text-faint); }

.footer-divider { inline-size: 100%; block-size: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }

.footer-bottom { display: grid; gap: var(--space-2xs); font-size: var(--text-xs); color: var(--text-faint); }
.dev b { color: var(--text-strong); font-weight: var(--weight-bold); }
.legal { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: center; }
.legal a { color: var(--text-faint); border-block-end: 1px solid transparent; transition: color var(--speed-fast) var(--ease-out); }
.legal a:hover { color: var(--text-accent); border-block-end-color: var(--line); }

/* ── Toast ──────────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  inset-block-end: var(--space-md);
  inset-inline: var(--space-md);
  margin-inline: auto;
  max-inline-size: 420px;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--surface-inverse);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  color: var(--text-inverse);
  font-size: var(--text-sm);
  text-align: center;
  opacity: 0;
  transform: translateY(var(--space-xs));
  pointer-events: none;
  transition: opacity var(--speed-slow) var(--ease-out), transform var(--speed-slow) var(--ease-out);
  z-index: 60;
}

.toast.show { opacity: 1; transform: translateY(0); }

/* ── Reveal on scroll ───────────────────────────────────────────────────── */

/* --reveal-delay is written per element by site.js, from its position inside
   its own group, so a row of cards arrives one after another rather than as a
   single slab. The scale is deliberately tiny — enough to read as approaching,
   not enough to notice as a zoom. */
.reveal {
  opacity: 0;
  transform: translateY(var(--space-sm)) scale(0.99);
  transition: opacity var(--speed-reveal) var(--ease-out) var(--reveal-delay, 0ms),
              transform var(--speed-reveal) var(--ease-out) var(--reveal-delay, 0ms);
}

.reveal.in { opacity: 1; transform: none; }

/* The chips drift on their own. A reveal that also moved them would cancel the
   drift outright — an animation beats a transition on the same property — so
   they arrive by fading where they already are. */
.floating-chip.reveal { transform: none; }

/* ── Live indicator ─────────────────────────────────────────────────────── */

.eq-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  block-size: 15px;
  margin-inline-start: var(--space-2xs);
  vertical-align: middle;
}

.eq-bar {
  inline-size: 3px;
  border-radius: var(--radius-pill);
  background: var(--hue-green);
  animation: eq-bounce 1.15s var(--ease-in-out) infinite alternate;
}

.eq-bar:nth-child(1) { block-size: 6px;  animation-delay: 0.10s; }
.eq-bar:nth-child(2) { block-size: 14px; animation-delay: 0.35s; }
.eq-bar:nth-child(3) { block-size: 9px;  animation-delay: 0.20s; }
.eq-bar:nth-child(4) { block-size: 12px; animation-delay: 0.45s; }

/* ── Reading progress ───────────────────────────────────────────────────── */

/* Grows from the right, because that is the edge an Arabic page starts at. */
.scroll-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  z-index: 60;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  background: linear-gradient(90deg, var(--hue-gold), var(--hue-gold-lit));
  pointer-events: none;
}

/* ── The device ─────────────────────────────────────────────────────────── */

/* THE WHOLE RIGHT-HAND SIDE OF THE HERO HAD NO CSS. A phone mockup, a screen
   shot, a notch, a reflection and three floating chips — twenty-two class
   names in the markup with not one rule between them, so the hero's second
   column was an unstyled stack of divs and a full-width image. That is most of
   what «شكله باظ» was pointing at, underneath the missing brace. */

.device-wrap {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 100%;
  padding-block: var(--space-md);
  perspective: 1200px;
}

.device-ambient-glow {
  position: absolute;
  inset: 10% 0 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--surface-accent), transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  opacity: 0.7;
}

/* A phone, drawn rather than photographed: a bezel, a screen and a notch. */
.device {
  position: relative;
  inline-size: min(78%, 300px);
  aspect-ratio: 9 / 19.5;
  padding: var(--space-2xs);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: var(--surface-inverse);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: transform var(--speed-medium) var(--ease-out), box-shadow var(--speed-medium) var(--ease-out);
}

.device:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lg), var(--shadow-accent);
}

.device__notch {
  position: absolute;
  inset-block-start: var(--space-2xs);
  inset-inline: 0;
  margin-inline: auto;
  inline-size: 36%;
  block-size: 18px;
  border-end-start-radius: var(--radius-sm);
  border-end-end-radius: var(--radius-sm);
  background: var(--surface-inverse);
  z-index: 2;
}

.device__screen {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* The sheen across the glass. Decorative, and the first thing to go when
   somebody asks for less motion — it is the only part that implies gloss. */
.device__reflection {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  background: linear-gradient(120deg, var(--veil-faint) 0%, transparent 42%);
  pointer-events: none;
}

/* ── Floating chips ─────────────────────────────────────────────────────── */

.floating-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface-raised);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-md);
  max-inline-size: 210px;
  z-index: 5;
  transition: transform var(--speed-medium) var(--ease-out),
              border-color var(--speed-medium) var(--ease-out),
              box-shadow var(--speed-medium) var(--ease-out);
}

.floating-chip:hover {
  border-color: var(--hue-gold);
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}

.chip-top-right {
  inset-block-start: 12%;
  inset-inline-end: 0;
}

.chip-bottom-left {
  inset-block-end: 22%;
  inset-inline-start: 0;
}

.chip-bottom-right {
  inset-block-end: 6%;
  inset-inline-end: var(--space-lg);
}

.chip-icon { flex: none; display: flex; color: var(--text-accent); }
.chip-icon svg { inline-size: 19px; block-size: 19px; }
.chip-info { display: flex; flex-direction: column; line-height: var(--leading-tight); }
.chip-info b { font-size: var(--text-xs); color: var(--text-strong); font-weight: var(--weight-bold); }
.chip-info span { font-size: var(--text-2xs); color: var(--text-faint); }

/* ── Hero supporting lines ──────────────────────────────────────────────── */

.hero__more {
  font-size: var(--text-sm);
  color: var(--text-accent);
  border-block-end: 1px solid var(--line);
  padding-block-end: 2px;
  transition: color var(--speed-fast) var(--ease-out), border-color var(--speed-fast) var(--ease-out);
}

.hero__more:hover { color: var(--hue-gold-lit); border-block-end-color: var(--line-strong); }

.assurances {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: var(--text-2xs);
  color: var(--text-faint);
}

.assurance-item { display: inline-flex; align-items: center; gap: var(--space-3xs); }
.assurance-item svg { flex: none; inline-size: 14px; block-size: 14px; color: var(--text-accent); }

/* Three facts under the download button — the Android version, the release
   number and the download count. One line, one voice; they were three
   different sizes before. */
.platform,
.release,
.downloads { font-size: var(--text-2xs); color: var(--text-faint); }
.platform b { color: var(--text-body); font-weight: var(--weight-bold); }

/* The same three inside an app card, where they sit on a darker panel. */
.release--card,
.downloads--card { color: var(--text-faint); }

.nav-cta { display: flex; flex: none; align-items: center; gap: var(--space-2xs); }

/* نقاء's own card carries the gold edge; التراث's does not. */
.app-card--naqaa { border-color: var(--line); }


/* ── Live Interactive Digital Tasbeeh ───────────────────────────────────── */

.tasbeeh-section {
  padding-block: var(--space-section);
}

.tasbeeh-container {
  display: grid;
  place-items: center;
  max-inline-size: 780px;
  margin-inline: auto;
}

.tasbeeh-arch {
  position: relative;
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: clamp(var(--space-md), 4vw, var(--space-xl));
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
  text-align: center;
  overflow: hidden;
}

.tasbeeh-arch::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: linear-gradient(90deg, transparent, var(--hue-gold-soft), transparent);
}

.tasbeeh-dhikr-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs);
}

.dhikr-chip {
  padding: var(--space-3xs) var(--space-sm);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-faint);
  background: var(--surface-raised);
  color: var(--text-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  font-family: inherit;
  cursor: pointer;
  transition: transform var(--speed-fast) var(--ease-out),
              border-color var(--speed-fast) var(--ease-out),
              background-color var(--speed-fast) var(--ease-out);
}

.dhikr-chip:hover {
  border-color: var(--line-strong);
  color: var(--text-strong);
  transform: translateY(-1px);
}

.dhikr-chip.active {
  background: var(--surface-accent-solid);
  color: var(--text-on-accent);
  border-color: transparent;
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-sm);
}

.tasbeeh-active-dhikr {
  font-family: 'Amiri', serif;
  font-size: clamp(var(--text-lg), 3.2vw, var(--text-xl));
  color: var(--text-accent);
  line-height: var(--leading-snug);
  min-block-size: 2.2em;
  display: grid;
  place-items: center;
}

.tasbeeh-bead-wrap {
  position: relative;
  display: grid;
  place-items: center;
  margin-block: var(--space-2xs);
}

.tasbeeh-ring {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px dashed var(--line-accent);
  pointer-events: none;
}

.tasbeeh-bead-btn {
  position: relative;
  inline-size: 160px;
  block-size: 160px;
  border-radius: 50%;
  border: 3px solid var(--hue-gold);
  background: var(--surface-accent-solid);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  user-select: none;
  touch-action: manipulation;
  transition: transform 0.12s ease-out, box-shadow 0.15s ease-out, border-color 0.15s ease-out;
}

.tasbeeh-bead-btn:hover {
  transform: scale(1.03);
  box-shadow: var(--shadow-accent);
  border-color: var(--hue-gold-lit);
}

.tasbeeh-bead-btn:active {
  transform: scale(0.95);
}

.tasbeeh-bead-btn.pop {
  animation: bead-pop 0.18s ease-out;
}

.tasbeeh-count-number {
  font-family: 'Amiri', serif;
  font-size: clamp(38px, 6vw, 54px);
  font-weight: var(--weight-bold);
  color: var(--text-on-accent);
  line-height: 1;
}

.tasbeeh-count-label {
  font-size: var(--text-2xs);
  color: var(--text-on-accent);
  opacity: 0.85;
  margin-block-start: var(--space-3xs);
}

.tasbeeh-ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--hue-gold-soft);
  opacity: 0;
  pointer-events: none;
}

.tasbeeh-ripple.active {
  animation: ripple-wave 0.5s ease-out forwards;
}

.tasbeeh-progress-bar-wrap {
  inline-size: min(100%, 340px);
  block-size: 8px;
  background: var(--surface-sunk);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-faint);
  overflow: hidden;
}

.tasbeeh-progress-fill {
  block-size: 100%;
  inline-size: 0%;
  background: linear-gradient(90deg, var(--hue-emerald), var(--hue-gold-soft));
  border-radius: var(--radius-pill);
  transition: inline-size var(--speed-fast) var(--ease-out);
}

.tasbeeh-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: min(100%, 340px);
  font-size: var(--text-xs);
  color: var(--text-faint);
}

.tasbeeh-goal-text b {
  color: var(--text-accent);
}

.tasbeeh-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  background: transparent;
  border: none;
  color: var(--text-faint);
  font-size: var(--text-xs);
  font-family: inherit;
  cursor: pointer;
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-sm);
  transition: color var(--speed-fast) var(--ease-out);
}

.tasbeeh-reset-btn:hover {
  color: var(--text-accent);
}

.tasbeeh-reset-btn svg {
  inline-size: 14px;
  block-size: 14px;
}

.tasbeeh-celebration {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2xs) var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--surface-accent-solid);
  border: 1px solid var(--line-strong);
  color: var(--text-on-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-md);
}

/* ── Keyframe Animations ─────────────────────────────────────────────────── */

@keyframes ripple-wave {
  0% { transform: scale(0.85); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

@keyframes bead-pop {
  0% { transform: scale(1); }
  40% { transform: scale(0.94); }
  100% { transform: scale(1); }
}

@keyframes fade-in-up {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes eq-bounce {
  0%, 100% { height: 4px; }
  50% { height: 14px; }
}

/* ── Live Prayer Times Section ──────────────────────────────────────────── */

.prayer-section {
  padding-block: var(--space-section);
}

.prayer-container {
  position: relative;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  padding: clamp(var(--space-md), 4vw, var(--space-xl));
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  overflow: hidden;
}

.prayer-container::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: linear-gradient(90deg, transparent, var(--hue-green), transparent);
}

.prayer-city-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3xs);
}

.city-chip {
  padding: var(--space-3xs) var(--space-sm);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface-sunk);
  color: var(--text-body);
  font-size: var(--text-xs);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--speed-fast) var(--ease-out);
}

.city-chip:hover {
  color: var(--text-accent);
  border-color: var(--line-strong);
}

.city-chip.active {
  background: var(--surface-accent-solid);
  color: var(--text-on-accent);
  border-color: transparent;
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-sm);
}

.prayer-hero-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-faint);
  background: var(--surface-sunk);
}

.prayer-date-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.prayer-date-hijri {
  font-family: var(--font-quran);
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--text-accent);
  font-weight: var(--weight-bold);
}

.prayer-date-gregorian {
  font-size: var(--text-xs);
  color: var(--text-faint);
}

.prayer-countdown-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3xs);
}

.countdown-label {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--text-xs);
  color: var(--text-accent);
  font-weight: var(--weight-medium);
}

.beacon-dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--state-ok);
  box-shadow: 0 0 6px var(--hue-gold);
}

.countdown-timer {
  font-family: var(--font-quran);
  font-size: clamp(26px, 3.5vw, 36px);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  letter-spacing: 0.05em;
  direction: ltr;
}

.prayer-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-xs);
}

.prayer-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-md) var(--space-xs);
  border-radius: var(--radius-md);
  border: 1px solid var(--line-faint);
  background: var(--surface-raised);
  text-align: center;
  transition: all var(--speed-medium) var(--ease-out);
}

.prayer-card:hover {
  border-color: var(--line);
  transform: translateY(-2px);
}

.prayer-card.active {
  background: var(--surface-accent);
  border: 1px solid var(--hue-gold);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.prayer-card-icon {
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: var(--surface-accent);
  color: var(--text-accent);
}

.prayer-card.active .prayer-card-icon {
  background: var(--hue-gold);
  color: var(--hue-ink);
}

.prayer-card-icon svg {
  inline-size: 18px;
  block-size: 18px;
}

.prayer-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}

.prayer-time {
  font-family: var(--font-quran);
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}

.prayer-card.active .prayer-time {
  color: var(--text-accent);
}

.prayer-status-pill {
  font-size: var(--text-2xs);
  padding: 1px var(--space-3xs);
  border-radius: var(--radius-pill);
  background: var(--surface-gold);
  color: var(--text-gold);
  font-weight: var(--weight-bold);
}

/* ── Live Quran Radio Streamer Section ──────────────────────────────────── */

.radio-section {
  padding-block: var(--space-section);
}

.radio-console {
  position: relative;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  padding: clamp(var(--space-md), 4vw, var(--space-xl));
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-xl);
  align-items: center;
  overflow: hidden;
}

.radio-console::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: linear-gradient(90deg, transparent, var(--hue-green), transparent);
}

.radio-info-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.radio-info-side h3 {
  font-family: var(--font-quran);
  font-size: var(--text-xl);
  color: var(--text-strong);
}

.radio-info-side p {
  font-size: var(--text-md);
  color: var(--text-body);
  line-height: var(--leading-body);
}

.radio-stations-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  max-block-size: 380px;
  overflow-y: auto;
  padding-inline-end: var(--space-3xs);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.radio-stations-list::-webkit-scrollbar {
  inline-size: 5px;
}

.radio-stations-list::-webkit-scrollbar-track {
  background: transparent;
}

.radio-stations-list::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--radius-pill);
}

.radio-station-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-md);
  border: 1px solid var(--line-faint);
  background: var(--surface-sunk);
  color: var(--text-strong);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--speed-medium) var(--ease-out);
}

.radio-station-btn:hover {
  border-color: var(--line);
  background: var(--surface-accent);
  transform: translateX(-2px);
}

.radio-station-btn.active {
  border-color: var(--hue-gold);
  background: var(--surface-accent);
  box-shadow: var(--shadow-sm);
}

.station-meta-title {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.station-badge-live {
  font-size: var(--text-2xs);
  color: var(--state-ok);
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
}

.radio-player-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-sunk);
  box-shadow: none;
  text-align: center;
}

.radio-current-station-title {
  font-family: var(--font-quran);
  font-size: var(--text-lg);
  color: var(--text-strong);
  font-weight: var(--weight-bold);
}

.radio-live-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-pill);
  background: var(--state-ok-tint);
  border: 1px solid var(--line-strong);
  font-size: var(--text-2xs);
  color: var(--state-ok);
  font-weight: var(--weight-bold);
}

.radio-play-btn {
  inline-size: 76px;
  block-size: 76px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--surface-accent-solid);
  color: var(--text-on-accent);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--speed-medium) var(--ease-out), box-shadow var(--speed-medium) var(--ease-out);
}

.radio-play-btn:hover {
  transform: scale(1.03);
  box-shadow: var(--shadow-accent);
}

.radio-play-btn svg {
  inline-size: 30px;
  block-size: 30px;
}

.radio-wave-bars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  block-size: 24px;
}

.wave-bar {
  inline-size: 4px;
  block-size: 6px;
  border-radius: var(--radius-pill);
  background: var(--hue-green);
  transition: block-size 0.2s ease;
}

.radio-wave-bars.playing .wave-bar:nth-child(1) { animation: eq-bounce 0.8s ease-in-out infinite; }
.radio-wave-bars.playing .wave-bar:nth-child(2) { animation: eq-bounce 0.6s ease-in-out infinite 0.15s; }
.radio-wave-bars.playing .wave-bar:nth-child(3) { animation: eq-bounce 0.7s ease-in-out infinite 0.3s; }
.radio-wave-bars.playing .wave-bar:nth-child(4) { animation: eq-bounce 0.5s ease-in-out infinite 0.1s; }
.radio-wave-bars.playing .wave-bar:nth-child(5) { animation: eq-bounce 0.9s ease-in-out infinite 0.25s; }

.radio-controls-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  inline-size: 100%;
  max-inline-size: 260px;
}

.radio-volume-slider {
  flex: 1;
  accent-color: var(--hue-green);
  cursor: pointer;
}

/* ── Enhanced Tasbeeh additions ─────────────────────────────────────────── */

.tasbeeh-sound-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface-sunk);
  color: var(--text-body);
  font-size: var(--text-2xs);
  cursor: pointer;
  transition: all var(--speed-fast) var(--ease-out);
}

.tasbeeh-sound-btn.active {
  color: var(--text-accent);
  border-color: var(--line-strong);
  background: var(--surface-accent);
}

.tasbeeh-sound-btn svg {
  inline-size: 14px;
  block-size: 14px;
}

/* ── Floating Back to Top ───────────────────────────────────────────────── */

.back-to-top {
  position: fixed;
  inset-block-end: var(--space-md);
  inset-inline-start: var(--space-md);
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  backdrop-filter: blur(10px);
  color: var(--text-accent);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 40;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: all var(--speed-fast) var(--ease-out);
}

.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--surface-accent-solid);
  color: var(--text-on-accent);
  border-color: transparent;
  transform: translateY(-2px);
}

.back-to-top svg {
  inline-size: 20px;
  block-size: 20px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* Two breakpoints, and both are where the CONTENT needs one rather than where
   a device happens to be: the two-column layouts stop fitting at about 980,
   and the nav's links stop fitting at about 720. */


/* ─── Mushaf Silk Ribbon Bookmark ─── */
.mushaf-silk-ribbon {
  position: absolute;
  top: -6px;
  right: 48px;
  width: 26px;
  height: 120px;
  z-index: 25;
  cursor: pointer;
  filter: drop-shadow(2px 4px 6px var(--line-strong));
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease;
}
.mushaf-silk-ribbon:hover {
  transform: translateY(6px);
  filter: drop-shadow(2px 6px 10px var(--line-gold));
}
.mushaf-silk-ribbon.pinned {
  height: 145px;
}
.mushaf-ribbon-strand {
  width: 100%;
  height: 100%;
  background: var(--hue-ribbon);
  border-left: 1px dashed var(--hue-gold-muted);
  border-right: 1px dashed var(--hue-gold-muted);
  clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 14px), 50% 100%, 0% calc(100% - 14px));
  position: relative;
}
.mushaf-ribbon-stitch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 85%;
  background: linear-gradient(to bottom, var(--hue-gold-muted), transparent);
}
.mushaf-ribbon-tip {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hue-gold-lit);
  box-shadow: none;
}

/* ─── Radio Sleep Timer Widget ─── */
.radio-vol-group {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}
.radio-sleep-wrap {
  position: relative;
  margin-inline-start: var(--space-2xs);
}
.radio-sleep-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: var(--space-3xs) var(--space-xs);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  font-family: inherit;
  color: var(--text-body);
  cursor: pointer;
  transition: all 0.2s ease;
}
.radio-sleep-btn:hover {
  background: var(--surface-accent);
  border-color: var(--hue-gold);
  color: var(--text-strong);
}
.radio-sleep-btn.active {
  background: var(--surface-accent-solid);
  border-color: transparent;
  color: var(--text-on-accent);
  box-shadow: var(--shadow-sm);
}
.radio-sleep-menu {
  /* ANCHORED TO THE BUTTON'S EDGE, NOT CENTRED ON IT. Centred, this 140px panel
     hung half over the play button and the station name — the two things the
     card exists to show — because the button it belongs to sits at the bottom
     of the card and the menu opens upward. Pinned to the button's inline start
     it opens into the empty side instead of across the middle. */
  position: absolute;
  bottom: calc(100% + 8px);
  inset-inline-start: 0;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-width: 140px;
  box-shadow: var(--shadow-lg);
  z-index: 50;
}
.radio-sleep-option {
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-xs);
  font-size: var(--text-xs);
  font-family: inherit;
  color: var(--text-body);
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.radio-sleep-option:hover {
  background: var(--surface-sunk);
  color: var(--text-strong);
}
.radio-sleep-option.active {
  background: var(--surface-accent);
  color: var(--text-accent);
  font-weight: var(--weight-bold);
}

/* ─── Interactive Qibla Compass Finder ─── */
.qibla-finder-box {
  margin-block-start: var(--space-lg);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-lg);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-lg);
  align-items: center;
  box-shadow: var(--shadow-md);
}
.qibla-finder-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.qibla-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  background: var(--surface-accent);
  border: 1px solid var(--line-accent);
  border-radius: var(--radius-pill);
  padding: var(--space-3xs) var(--space-xs);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-accent);
  width: fit-content;
  margin-block-end: var(--space-2xs);
}
.qibla-finder-header h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  margin-block-end: var(--space-2xs);
}
.qibla-finder-header p {
  font-size: var(--text-sm);
  color: var(--text-faint);
  line-height: 1.6;
}
.qibla-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-sm);
}
.qibla-city-select-wrap {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
.qibla-city-select-wrap label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-body);
}
.qibla-city-select {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-xs);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--text-strong);
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.qibla-city-select:focus {
  border-color: var(--hue-gold);
}
.qibla-city-select option {
  background: var(--surface-raised);
  color: var(--text-strong);
}
.qibla-gps-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-xs);
  font-size: var(--text-xs);
  font-family: inherit;
  font-weight: var(--weight-medium);
  color: var(--text-body);
  cursor: pointer;
  transition: all 0.2s ease;
  height: 38px;
}
.qibla-gps-btn:hover {
  background: var(--surface-accent);
  border-color: var(--hue-gold);
  color: var(--text-strong);
}
.qibla-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs);
  background: var(--surface-sunk);
  border: 1px solid var(--line-faint);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
}
.qibla-metric-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  text-align: center;
}
.qibla-metric-label {
  font-size: var(--text-2xs);
  color: var(--text-faint);
}
.qibla-metric-val {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-accent);
}

/* Compass Visual */
.qibla-compass-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
.compass-dial {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: var(--surface-sunk);
  border: 3px solid var(--line-gold);
  box-shadow: var(--shadow-md);
}
.compass-marker {
  position: absolute;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-faint);
}
.compass-marker.north {
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--state-error);
}
.compass-marker.east {
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}
.compass-marker.south {
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
}
.compass-marker.west {
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}
.compass-kaaba-target {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform-origin: center center;
  transform: translate(-50%, -50%) rotate(136deg);
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.compass-kaaba-target .kaaba-icon {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-lg);
}
.compass-needle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 150px;
  transform-origin: center center;
  transform: translate(-50%, -50%) rotate(136deg);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.needle-north {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-block-end: 75px solid var(--state-error);
}
.needle-south {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-block-start: 75px solid var(--hue-ink-faint);
}
.needle-pivot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  background: var(--hue-gold);
  border-radius: 50%;
  border: 2px solid var(--hue-white);
  box-shadow: var(--shadow-sm);
  z-index: 5;
}

/* ─── Interactive Zakat Calculator Section ─── */

/* Narrower than the page. A form is read a field at a time, not a line at a
   time, and at the full 1140px the four inputs sit so far apart that the eye
   has to travel between a label and the box it belongs to. */
.zakat-shell {
  inline-size: 100%;
  /* Wider than it was. The old 920px was set when this was one column of
     cards; the two-column layout below needs the room, and 1080 still leaves
     the card narrower than the shell so the section does not read as the full
     width of the page. */
  max-inline-size: 1080px;
  margin-inline: auto;
}
.zakat-section {
  background: radial-gradient(ellipse at 50% 10%, var(--surface-accent) 0%, transparent 70%);
}
/* INPUTS ON ONE SIDE, THE ANSWER ON THE OTHER.
   A calculator whose result is below four cards of inputs makes you scroll
   away from the thing you are typing to see what it did. Here the answer is
   beside them and stays put; see the sticky rule on .zakat-summary-card. */
.zakat-container-card {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
}

/* TWO COLUMNS, STATED — NOT auto-fit.
   `repeat(auto-fit, minmax(260px, 1fr))` resolved to three columns on a
   desktop and there are four cards, so the section rendered as a tidy row of
   three with one orphan underneath it, every time, for as long as the page has
   existed. auto-fit answers «how many fit»; the question here is «how many
   look right», and for four cards that is two. */
.zakat-inputs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  align-content: start;
}
.zakat-field-card {
  background: var(--surface-sunk);
  border: 1px solid var(--line-faint);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-sm);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.zakat-field-card:focus-within {
  border-color: var(--line-accent);
  transform: translateY(-2px);
}
.zakat-field-head {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.zakat-field-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--state-ok-tint);
  color: var(--state-ok);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.zakat-field-icon svg {
  width: 20px;
  height: 20px;
}
.zakat-field-icon.gold {
  background: var(--state-warn-tint);
  color: var(--state-warn);
}
.zakat-field-icon.silver {
  background: var(--surface-sunk);
  color: var(--text-body);
}
.zakat-field-icon.trade {
  background: var(--state-info-tint);
  color: var(--state-info);
}
.zakat-field-title h4 {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  margin-block-end: 2px;
}
.zakat-field-title span {
  font-size: var(--text-2xs);
  color: var(--text-faint);
  line-height: 1.3;
}
.zakat-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  position: relative;
}
.zakat-input-row label {
  font-size: var(--text-xs);
  color: var(--text-body);
  min-width: 68px;
}
.zakat-num-input {
  flex: 1;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-xs);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--text-strong);
  outline: none;
  transition: border-color 0.2s ease;
}
.zakat-num-input:focus {
  border-color: var(--hue-green);
}
.zakat-currency {
  font-size: var(--text-xs);
  color: var(--text-faint);
  white-space: nowrap;
}
.zakat-input-subgrid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

/* Zakat Output Summary */
.zakat-summary-card {
  /* Sticks under the nav while the inputs scroll past it, so the figure moves
     as the numbers are typed. `align-items: start` on the grid above is what
     lets it be shorter than its column and therefore stick at all. */
  position: sticky;
  inset-block-start: calc(var(--nav-height) + var(--space-sm));
  background: var(--surface-accent);
  border: 1px solid var(--line-accent);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
}
.zakat-summary-main {
  display: grid;
  gap: var(--space-md);
}

.zakat-summary-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  margin-block-end: 0;
  padding-block-end: var(--space-sm);
  border-block-end: 1px solid var(--line);
}
.zakat-summary-tag {
  display: inline-flex;
  align-items: center;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: var(--space-3xs) var(--space-xs);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-body);
}
.zakat-summary-tag.reached {
  background: var(--state-ok-tint);
  border-color: var(--state-ok);
  color: var(--state-ok);
}
.zakat-summary-tag.not-reached {
  background: var(--state-error-tint);
  border-color: var(--state-error);
  color: var(--state-error);
}
.zakat-nisab-info {
  font-size: var(--text-xs);
  color: var(--text-faint);
}
.zakat-nisab-info strong {
  color: var(--text-accent);
}
/* STACKED, NOT SPREAD.
   This was `space-around` over two blocks of unequal height with a 50px rule
   floating between them: the two figures landed at different heights with 258
   pixels of nothing in the middle. They are one above the other now — which is
   also the order they are read in, since the second number is computed from
   the first. */
.zakat-summary-result-row {
  display: grid;
  gap: var(--space-sm);
  margin-block-end: 0;
}
.zakat-calc-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3xs);
  text-align: start;
}
/* The figure the calculator exists to produce.
   It was `--surface-accent` on a card that is ALSO `--surface-accent`, so the
   highlight was the same colour as the thing it was supposed to stand out
   from. On a tinted panel the way to raise something is to make it white. */
.zakat-calc-item.highlight {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--line-accent);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
}

.zakat-calc-item.highlight .calc-value-huge { color: var(--text-accent); }

/* A rule ACROSS the column now rather than a floating 50px bar between two
   things that were never aligned with it. */
.zakat-calc-divider {
  block-size: 1px;
  inline-size: 100%;
  background: var(--line);
}
.calc-label {
  font-size: var(--text-sm);
  color: var(--text-faint);
}
.calc-value {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}
.calc-value-huge {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--text-accent);
}
.zakat-legal-note {
  font-size: var(--text-xs);
  color: var(--text-faint);
  text-align: center;
  line-height: 1.5;
  margin-block-start: var(--space-xs);
}


/* The calculator stacks before anything else on the page does.
   Two columns need about a thousand pixels here: below that the inputs column
   is too narrow for «ديون عليك واجبة السداد:» beside its box, and a sticky
   answer panel on a narrow screen is a panel parked on top of the fields being
   filled in. */
@media (max-width: 1000px) {
  .zakat-container-card { grid-template-columns: minmax(0, 1fr); }
  .zakat-summary-card { position: static; }
}

@media (max-width: 620px) {
  .zakat-inputs-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Responsive ─────────────────────────────────────────────────────────────

   AT THE END, AND WIDEST FIRST, and both halves of that matter.

   At the end because a rule that comes later wins a tie, and these used to sit
   two thirds of the way down with four sections declared after them — the
   ribbon, the sleep timer, the qibla compass and the zakat calculator. Their
   phone layouts were matched, applied, and then quietly overwritten by the
   desktop rules further down the file. Nothing looked broken in the source; it
   only looked broken on a phone.

   Widest first because these are max-width queries, so every one of them is
   still true at a narrower width. Declared 560 before 720, a 500px screen gets
   both and the 720 block has the last word — which is the opposite of what the
   560 block was written to say.

   Breakpoints are where the CONTENT needs one: 980 is where the two-column
   layouts stop fitting side by side, 860 where the qibla and zakat rows do, 720
   is the phone, and 560 is a small phone.
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .hero,
  .spotlight-content,
  .radio-console {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .hero__text { align-items: center; text-align: center; }
  .hero__text p { margin-inline: auto; }
  .cta-row, .meta-row, .spotlight-action { justify-content: center; }
  .spotlight-visual { order: -1; }
  .tagline { max-inline-size: none; }
  .prayer-grid { grid-template-columns: repeat(3, 1fr); }
  .prayer-hero-row { grid-template-columns: 1fr; text-align: center; }
  .prayer-countdown-block { align-items: center; }
}

@media (max-width: 860px) {
  .qibla-finder-box {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .qibla-controls {
    justify-content: center;
  }
  .qibla-badge {
    margin-inline: auto;
  }
  .zakat-summary-result-row {
    flex-direction: column;
  }
  .zakat-calc-divider {
    width: 60%;
    height: 1px;
  }
}

@media (max-width: 720px) {
  /* The chips overlap the phone on a narrow screen, so they come out of the
     overlay and sit under it as a plain row. */
  .floating-chip { position: static; max-inline-size: none; }
  .device-wrap { gap: var(--space-2xs); }
  .device { inline-size: min(70%, 260px); }

  .nav-links { display: none; }
  .why-card { flex-direction: column; }
  .section-head { margin-block-end: var(--space-lg); }
  .hero-download-btn { inline-size: 100%; justify-content: center; }
  .prayer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── The feature list, on a phone ─────────────────────────────────────────
   MEASURED, NOT GUESSED. At 375px the twelve cards stack one to a row at 326px
   each: 3,839px of grid inside a 4,190px section, which is 5.2 phone screens of
   a page that was already 24. It is a LIST — an icon, a name, a sentence — and
   a list does not need a full screen per item.

   Turned on its side rather than squeezed into two columns. Two columns at this
   width leaves ~160px of text column, and a twenty-word Arabic sentence in
   160px is ten lines and a card taller than the one this replaces. Icon beside
   the text is the shape `.why-card` already uses on this same page.

   The tags go. They are three pills of detail under a sentence that already
   says it, and they are the row that wraps to three lines first. Nothing else
   is removed: every card keeps its icon, its name and its description. */
@media (max-width: 620px) {
  .features-grid { grid-template-columns: 1fr; gap: var(--space-xs); }

  .feature-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: var(--space-sm);
    align-items: start;
    padding: var(--space-sm);
  }

  /* Spanning both rows keeps the icon beside the whole card rather than beside
     the heading alone, so a two-line name does not push it out of line. */
  .feature-card .feature__icon-wrap {
    grid-row: 1 / span 2;
    inline-size: 44px;
    block-size: 44px;
    margin-block-end: 0;
  }

  .feature-card h3 {
    grid-column: 2;
    margin-block-end: var(--space-3xs);
    font-size: var(--text-md);
  }

  .feature-card p {
    grid-column: 2;
    margin: 0;
    font-size: var(--text-xs);
  }

  .feature-card .feature-tags { display: none; }
}

@media (max-width: 560px) {
  /* The eyebrow badge is one pill holding two claims. At this width the first
     one wraps to a second line and the divider is left hanging in the gap. The
     second claim goes rather than the first: «مجاني بالكامل» is already in the
     assurance row a few lines below, and in the download button's own subtitle,
     so removing it here costs the page nothing and stops the badge breaking. */
  .badge-divider,
  .badge-free { display: none; }
}

/* ── Anything a finger has to hit ─────────────────────────────────────────
   TWENTY-NINE CONTROLS UNDER 44px, counted on the real page at 375px: seven
   city chips at 34, six ذكر chips, five sleep-timer options, four mushaf tabs
   at 33, two mushaf arrows, and five more one at a time. 44px is the figure
   both Apple and Google publish, and it is not a style preference — it is the
   size of the contact patch a fingertip actually makes.

   ASKED TWO WAYS, BECAUSE ONE OF THEM LIES. `pointer: coarse` is the question
   actually being asked — a phone in landscape is 812px wide and still a phone,
   which a width query alone would miss. But it is not answered honestly
   everywhere: a device emulator reports `pointer: fine` while emulating a
   touchscreen, and some Android WebViews do the same. A width query is the
   cruder question and the one that always gets an answer, so both are asked and
   either one is enough. The cost of being wrong in this direction is a chip
   that is comfortably tappable on a narrow desktop window.

   `min-block-size` with centred content rather than extra padding: padding
   grows the box from whatever it happens to be, so a chip with a longer label
   ends up taller than its neighbour. A floor plus centring gives one height. */
@media (hover: none) and (pointer: coarse), (max-width: 620px) {
  .city-chip,
  .dhikr-chip,
  .radio-sleep-option,
  .mushaf-tab-btn,
  .mushaf-nav-btn,
  .qibla-gps-btn,
  .tasbeeh-reset-btn,
  .tasbeeh-sound-btn,
  .hero__more,
  .nav-brand,
  .nav-link {
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Round controls have to stay round: a floor on the height alone would make
     these into lozenges. */
  .mushaf-nav-btn,
  .tasbeeh-reset-btn,
  .tasbeeh-sound-btn {
    min-inline-size: 44px;
  }

  /* The brand is a link, not a button — it gets the height so the tap lands,
     and keeps its own alignment. */
  .nav-brand { justify-content: flex-start; }
}

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

/* ── The live qibla compass ─────────────────────────────────────────────────
   The dial turns with the phone (site.js); the line under the controls says
   which way to turn, and the compass shows when the Kaaba is straight ahead. */
.qibla-live-status {
  margin: var(--space-xs) 0 0;
  min-block-size: 1.6em;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-accent);
}

.compass-dial { transition: transform var(--speed-fast) linear; }

.qibla-compass-visual.is-aligned .compass-dial {
  box-shadow: 0 0 0 4px var(--line-accent), var(--shadow-accent);
}

@media (prefers-reduced-motion: reduce) {
  .compass-dial { transition: none; }
}