@font-face{font-family:'Amiri';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/amiri-arabic-400-normal.9abf8a10b4.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:'Amiri';font-style:normal;font-display:swap;font-weight:700;src:url(/assets/fonts/amiri-arabic-700-normal.c775d9f8c3.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:'Amiri';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/amiri-latin-400-normal.d600850a2b.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Amiri';font-style:normal;font-display:swap;font-weight:700;src:url(/assets/fonts/amiri-latin-700-normal.f53eb332ac.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Amiri';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/amiri-latin-ext-400-normal.199be132b6.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Amiri';font-style:normal;font-display:swap;font-weight:700;src:url(/assets/fonts/amiri-latin-ext-700-normal.caca5182eb.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.6010e7fd0d.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.90aef64fea.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:700;src:url(/assets/fonts/ibm-plex-sans-arabic-arabic-700-normal.04c730b429.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/ibm-plex-sans-arabic-latin-400-normal.9ed8dcb02e.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/fonts/ibm-plex-sans-arabic-latin-500-normal.be6a3b2e37.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:700;src:url(/assets/fonts/ibm-plex-sans-arabic-latin-700-normal.ae2d59f91e.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/ibm-plex-sans-arabic-latin-ext-400-normal.1935fa1a33.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/fonts/ibm-plex-sans-arabic-latin-ext-500-normal.ae5c1a58c1.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:700;src:url(/assets/fonts/ibm-plex-sans-arabic-latin-ext-700-normal.ab0b958427.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--pattern:url(/assets/pattern.cb6b31107a.svg)}
/* rofqa.net — the app's own colours (lib/app/theme/app_theme.dart): light, or
   its dark scheme when the device asks, unless the visitor picked one with the
   header's button (data-theme on <html>, set by src/site.js). The @font-face
   rules are prepended by build.mjs, which knows the fonts' hashed names. */

:root {
  color-scheme: light dark;
  --emerald: #0D6B4D;
  --deep: #074C39;
  --gold: #C99A46;
  --ivory: #FFFBF3;
  --ink: #17211D;

  --bg: var(--ivory);
  --surface: #FFFDF8;
  --surface-2: #F7F3E9;
  --text: var(--ink);
  --muted: #4F5E57;
  --line: #E7DFCC;
  --accent: var(--emerald);
  --gold-text: #8A6320;
  --hero-from: var(--emerald);
  --hero-to: var(--deep);
  --on-hero: var(--ivory);
  --on-hero-muted: #D6E6DD;
  --shadow: 0 1px 2px rgb(7 76 57 / 6%), 0 8px 24px rgb(7 76 57 / 8%);

  --font-body: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-title: 'Amiri', 'Times New Roman', serif;
  --radius: 18px;
  --page: 1080px;
  --gutter: 16px;
}

/* The dark scheme, twice: when the device is dark and no light was picked,
   and when dark was picked. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #081712;
    --surface: #0E211A;
    --surface-2: #142A22;
    --text: #E5EDE8;
    --muted: #A8B8AF;
    --line: #24392F;
    --accent: #75D4AE;
    --gold-text: #E8BD6B;
    --hero-from: #0B3D2E;
    --hero-to: #06100D;
    --on-hero: #F3EEE2;
    --on-hero-muted: #B9CAC1;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 25%);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #081712;
  --surface: #0E211A;
  --surface-2: #142A22;
  --text: #E5EDE8;
  --muted: #A8B8AF;
  --line: #24392F;
  --accent: #75D4AE;
  --gold-text: #E8BD6B;
  --hero-from: #0B3D2E;
  --hero-to: #06100D;
  --on-hero: #F3EEE2;
  --on-hero-muted: #B9CAC1;
  --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 25%);
}
:root[data-theme="light"] { color-scheme: light; }

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.85 var(--font-body);
  overflow-wrap: break-word;
}

html[lang="en"] body { line-height: 1.7; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { line-height: 1.35; margin: 0 0 .5em; }
h1, h2 { font-family: var(--font-title); font-weight: 700; }
h1 { font-size: clamp(2.1rem, 7vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 4.6vw, 2.2rem); color: var(--text); }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }

.wrap { width: min(100% - 2 * var(--gutter), var(--page)); margin-inline: auto; }
.narrow { width: min(100% - 2 * var(--gutter), 760px); margin-inline: auto; }

.skip {
  position: absolute; inset-inline-start: var(--gutter); top: -100px;
  background: var(--surface); color: var(--text); padding: .5em 1em; border-radius: 8px; z-index: 10;
}
.skip:focus { top: 12px; }

/* Header */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 64px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none;
  font-family: var(--font-title); font-weight: 700; font-size: 1.7rem; line-height: 1;
}
.brand .star { width: 22px; height: 22px; color: var(--gold); flex: none; }
.brand small {
  font-family: var(--font-body); font-weight: 500; font-size: .8rem; letter-spacing: .25em;
  color: var(--muted); padding-top: .3em;
}
.lang {
  font-size: .95rem; font-weight: 500; text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px; padding: .3em 1em;
  color: var(--text); background: var(--surface);
}
.lang:hover { border-color: var(--gold); }
.header-actions { display: flex; align-items: center; gap: 8px; }

/* Light or dark: a moon in light, a sun in dark. Shown once src/site.js has
   wired it, so a page without script never offers a dead button. */
.theme-toggle {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--gold-text);
  cursor: pointer;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { border-color: var(--gold); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: none; }
}

/* Hero, with a mihrab frame */
.hero {
  background: radial-gradient(120% 90% at 50% 0%, var(--hero-from), var(--hero-to));
  color: var(--on-hero);
  padding: 40px 0 56px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
/* A faint lattice of eight-pointed stars behind the hero. */
.hero::before {
  content: ''; position: absolute; inset: -96px; z-index: -1;
  background: var(--pattern) 0 0 / 96px 96px;
  opacity: .08; pointer-events: none;
}
.mihrab {
  position: relative;
  max-width: 640px; margin-inline: auto;
  padding: 72px 24px 36px;
  border-radius: 320px 320px 0 0 / 220px 220px 0 0;
  text-align: center;
}
/* The frame: an outer gold line and a fainter one inside it. */
.mihrab::before, .mihrab::after {
  content: ''; position: absolute; border-bottom: 0;
  border-radius: inherit; pointer-events: none;
}
.mihrab::after { inset: 0; border: 2px solid var(--gold); border-bottom: 0; }
.mihrab::before { inset: 9px 9px 0; border: 1px solid rgb(201 154 70 / 45%); border-bottom: 0; }
.mihrab > * { position: relative; }
.mihrab .star { width: 30px; height: 30px; color: var(--gold); margin: 0 auto 8px; }
.hero h1 { color: #E8C27A; margin-bottom: .1em; }
.hero h1.wordmark { font-size: clamp(4rem, 18vw, 7.5rem); line-height: 1.2; }
.hero .latin { letter-spacing: .4em; font-weight: 500; font-size: .95rem; color: var(--on-hero-muted); margin-bottom: 18px; }
.hero .tagline { font-size: clamp(1.15rem, 3.6vw, 1.4rem); font-weight: 500; margin-bottom: .4em; }
.hero p { color: var(--on-hero-muted); }
.hero .lead { color: var(--on-hero); max-width: 34em; margin-inline: auto; }
.app-icon {
  width: 128px; height: 128px; margin: 0 auto 18px;
  border-radius: 28px;
  box-shadow: 0 0 0 2px var(--gold), 0 14px 34px rgb(0 0 0 / 35%);
}

/* Store buttons */
.stores {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px 10px; margin-top: 22px;
}
.stores .play img { height: 66px; width: auto; }
.stores .soon {
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 46px; padding: 0 18px;
  border: 1px solid rgb(201 154 70 / 55%); border-radius: 10px;
  color: var(--on-hero-muted); font-size: .95rem; font-weight: 500;
  cursor: default;
}
.stores .soon b { color: var(--on-hero); font-weight: 700; }
.stores.on-page .soon { color: var(--muted); border-color: var(--line); }
.stores.on-page .soon b { color: var(--text); }
.stores.on-page { justify-content: flex-start; }

/* The web version, under the store buttons. */
.web-app { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 18px 0 0; }
.web-app .button.web {
  display: inline-flex; align-items: center; gap: .5em; margin: 0;
  background: transparent; color: var(--on-hero);
  border: 1px solid var(--gold); padding: .5em 1.3em;
}
.web-app .button.web svg { width: 20px; height: 20px; color: #E8C27A; }
.web-app .button.web:hover { background: rgb(201 154 70 / 14%); }
.web-app small { color: var(--on-hero-muted); font-size: .85rem; max-width: 30em; }

/* Sections */
.section { padding: 56px 0; }
.section + .section { padding-top: 0; }
.section-title { text-align: center; margin-bottom: 28px; }
.section-title::after {
  content: ''; display: block; width: 64px; height: 2px; margin: 12px auto 0;
  background: var(--gold);
}

.grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .grid.two, .grid.three { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid.three { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
  box-shadow: var(--shadow);
}
.card h3 { display: flex; align-items: center; gap: 10px; color: var(--text); }
.card h3 .star { width: 18px; height: 18px; color: var(--gold); flex: none; }
.card ul { margin: 0; padding-inline-start: 1.1em; }
.card li { margin: .35em 0; }
.card li::marker { color: var(--gold); }
.card p:last-child { margin-bottom: 0; }

/* The app on the home page */
.app-card {
  display: grid; gap: 18px; align-items: center;
  grid-template-columns: 88px 1fr;
}
.app-card > img { width: 88px; height: 88px; border-radius: 20px; box-shadow: 0 0 0 1px var(--gold); }
.app-card h3 { font-family: var(--font-title); font-size: 1.6rem; margin-bottom: .15em; }
.app-card p { color: var(--muted); margin-bottom: .6em; }
.app-card .actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.app-card .actions .stores { margin-top: 0; }
@media (min-width: 640px) {
  .app-card { grid-template-columns: 112px 1fr; }
  .app-card > img { width: 112px; height: 112px; border-radius: 26px; }
  .app-card .actions { grid-column: 2; }
}
.more { font-weight: 500; }

.principle h3 { color: var(--gold-text); }

/* Privacy panel */
.panel {
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 26px 22px;
}
.panel h2 { text-align: center; }
.panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 760px) { .panel ul { grid-template-columns: repeat(3, 1fr); } }
.panel li {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; text-align: center; font-weight: 500;
}
.languages { text-align: center; color: var(--muted); margin-top: 18px; }

/* Screenshots (shown once there are some) */
.shots { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.shots img { width: 220px; flex: none; border-radius: 16px; border: 1px solid var(--line); scroll-snap-align: start; }

/* FAQ */
.faq { display: grid; gap: 10px; }
.faq details {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 0 18px;
}
.faq details[open] { border-color: var(--gold); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 0; font-weight: 700;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; line-height: 1;
  border: 1px solid var(--gold); color: var(--gold-text); font-weight: 500;
}
.faq details[open] summary::after { content: '−'; }
.faq details p { padding-bottom: 14px; margin: 0; color: var(--muted); }

/* Documents: privacy, terms, deletion */
.doc { padding: 40px 0 64px; }
.doc header { border-bottom: 3px solid var(--gold); margin-bottom: 26px; padding-bottom: 10px; }
.doc header h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); }
.doc header p { color: var(--muted); margin: 0; }
.doc h2 { font-size: 1.5rem; margin-top: 1.6em; color: var(--accent); }
.doc h3 { margin-top: 1.4em; }
.doc ul, .doc ol { padding-inline-start: 1.3em; }
.doc li { margin: .4em 0; }
.doc li::marker { color: var(--gold-text); }
.note {
  background: var(--surface-2); border-inline-start: 4px solid var(--gold);
  border-radius: 10px; padding: 12px 16px; margin: 1em 0;
}
.draft {
  display: inline-block; font-size: .85rem; font-weight: 700; letter-spacing: .02em;
  color: var(--gold-text); border: 1px solid var(--gold); border-radius: 999px; padding: .1em .9em;
  margin-bottom: 10px;
}
.path {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; padding: 0 !important;
  counter-reset: step;
}
.path li {
  margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: .35em .8em; font-weight: 500;
}
.path li:last-child { border-color: var(--gold); color: var(--gold-text); font-weight: 700; }
.path .sep { border: 0; background: none; padding: 0; color: var(--gold-text); font-weight: 400; }
.button {
  display: inline-block; margin-top: .4em;
  background: var(--accent); color: var(--bg); text-decoration: none; font-weight: 700;
  border-radius: 999px; padding: .55em 1.4em;
}
.button:hover { filter: brightness(1.08); }
.two-cols { display: grid; gap: 16px; }
@media (min-width: 700px) { .two-cols { grid-template-columns: 1fr 1fr; } }
.two-cols .card h2 { font-size: 1.35rem; margin-top: 0; }

/* Not found */
.not-found { text-align: center; padding: 72px 0; }
.not-found .star { width: 40px; height: 40px; color: var(--gold); margin: 0 auto 12px; }
.not-found h1 { font-size: clamp(1.8rem, 6vw, 2.4rem); }
.not-found + .not-found { padding-top: 0; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  padding: 28px 0 36px;
  font-size: .95rem;
  color: var(--muted);
}
.site-footer .wrap { display: grid; gap: 14px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.site-footer nav a { color: var(--text); text-decoration: none; font-weight: 500; }
.site-footer nav a:hover { color: var(--accent); text-decoration: underline; }
.site-footer .app-name { font-family: var(--font-title); font-weight: 700; font-size: 1.25rem; color: var(--text); }
.site-footer .contact a { color: var(--accent); font-weight: 500; }
.site-footer .social { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.site-footer .copy { font-size: .85rem; }

/* Library: chips between sections, cards, adhkar, tables, seasons. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.chips a {
  text-decoration: none; color: var(--text); font-size: .95rem; font-weight: 500;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .3em .95em;
}
.chips a:hover, .chips a[aria-current="page"] { border-color: var(--gold); color: var(--gold-text); }
.library-card { display: block; text-decoration: none; color: var(--text); }
.library-card h3, .doc .library-card h2 {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 .3em; font-size: 1.2rem; color: var(--text);
}
.library-card p { color: var(--muted); }
.library-card .meta, .library-card .more { color: var(--accent); font-weight: 500; font-size: .95rem; }
.library-grid { margin-bottom: 8px; }

.doc .adhkar { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.doc .dhikr { margin: 0; padding: 20px 20px 14px; }
.doc .dhikr h2 { margin: 0 0 .5em; font-family: var(--font-body); font-size: 1.15rem; color: var(--gold-text); }
.dhikr-text { font-family: var(--font-title); font-size: 1.45rem; line-height: 2.05; margin-bottom: .6em; }
.dhikr-meaning { color: var(--muted); }
.dhikr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .92rem; margin-bottom: .6em; }
.dhikr-meta .count {
  color: var(--gold-text); font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: .05em .8em;
}
.dhikr-meta .source { color: var(--muted); }
.virtue { font-size: .97rem; }
.virtue b { color: var(--accent); }
.evidence { border-top: 1px dashed var(--line); padding-top: 6px; margin-bottom: 4px; }
.evidence summary { cursor: pointer; color: var(--accent); font-weight: 500; }
.evidence p { color: var(--muted); font-size: .95rem; margin: .5em 0 0; }

.table-wrap {
  overflow-x: auto; margin: 10px 0 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table-wrap th, .table-wrap td { padding: .55em .8em; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line); }
.table-wrap th { background: var(--surface-2); font-weight: 700; white-space: nowrap; }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.table-wrap td small { color: var(--muted); white-space: nowrap; }
.plan h2 small { font-family: var(--font-body); font-size: .7em; font-weight: 500; color: var(--muted); }
.doc .seasons { list-style: none; padding: 0; display: grid; gap: 8px; }
.doc .seasons li {
  display: flex; flex-direction: column; margin: 0; padding: .6em .9em;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.seasons li span { color: var(--muted); font-size: .95rem; }

/* The invitation to the app that closes a library page. */
.cta {
  display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: start;
  margin-top: 36px; padding: 22px 20px;
  background: var(--surface-2); border: 2px solid var(--gold); border-radius: var(--radius);
}
.cta img { width: 72px; height: 72px; border-radius: 18px; }
.doc .cta h2 { margin: 0 0 .3em; font-size: 1.3rem; color: var(--text); }
.cta p { color: var(--muted); }
.cta .stores { margin-top: 6px; }
.web-link { display: inline-flex; align-items: center; gap: .45em; font-weight: 500; margin-top: 6px; }
.web-link svg { width: 18px; height: 18px; }

.site-footer .site-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .92rem; }
.site-footer .site-links a { color: var(--muted); text-decoration: none; }
.site-footer .site-links a:hover { color: var(--accent); text-decoration: underline; }

/* ── Motion ─────────────────────────────────────────────────────────────
   CSS only, as the pages have no script. Everything moves only for those
   whose device does not ask for reduced motion; for the others, and in
   browsers without a feature, the page simply stands still. */

@media print { .door { display: none !important; } }

/* Hover: cards lift, their star turns, buttons answer the pointer. */
.card { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-color .35s; }
.card h3 .star { transition: rotate .7s cubic-bezier(.2, .7, .2, 1); }
.stores .play img, .button, .lang { transition: transform .25s, filter .25s, border-color .25s; }
.faq details { transition: border-color .3s; }
.faq summary::after { transition: rotate .35s; }
.faq details[open] summary::after { rotate: 180deg; }
@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    border-color: rgb(201 154 70 / 55%);
    box-shadow: 0 2px 4px rgb(7 76 57 / 6%), 0 18px 40px rgb(7 76 57 / 14%);
  }
  .card:hover h3 .star { rotate: 45deg; }
  .stores .play:hover img { transform: translateY(-2px) scale(1.03); }
  .button:hover { transform: translateY(-1px); }
}

@media (prefers-reduced-motion: no-preference) {
  /* The door: its frame is drawn as the visitor walks slowly up to it, it
     swings open onto light, and the walk quickens through the doorway until
     the light fills the screen and gives way to the page (about 3s). */
  .door[hidden] {
    display: grid; place-items: center;
    position: fixed; inset: 0; z-index: 100;
    pointer-events: none; overflow: hidden; contain: layout paint;
    background: radial-gradient(120% 90% at 50% 45%, #0B5A42, #052E22 70%, #031D15);
    animation: door-away .6s cubic-bezier(.4, 0, .2, 1) 2.45s forwards;
  }
  .door::before {
    content: ''; position: absolute; inset: 0;
    background: var(--pattern) center / 96px 96px; opacity: .07;
    will-change: transform, opacity;
    animation: door-depth 2.9s cubic-bezier(.5, 0, .9, .5) forwards;
  }
  .door-scene {
    position: relative;
    width: min(62vw, 42vh, 330px); aspect-ratio: 2 / 3;
    perspective: 1300px;
    transform-origin: 50% 52%;
    will-change: transform;
    animation: door-walk 2.9s linear forwards;
  }
  .door-light, .leaf-art, .door-frame { display: block; width: 100%; height: 100%; }
  .door-light { position: absolute; inset: 0; opacity: .3; will-change: opacity; animation: door-light 1.1s ease-out .4s forwards; }
  .leaf { position: absolute; top: 0; bottom: 0; width: 50%; will-change: transform; }
  .leaf-left { left: 0; transform-origin: left center; animation: leaf-left 1.15s cubic-bezier(.6, .05, .3, 1) .45s forwards; }
  .leaf-right { right: 0; transform-origin: right center; animation: leaf-right 1.15s cubic-bezier(.6, .05, .3, 1) .45s forwards; }
  .leaf-right .leaf-art { transform: scaleX(-1); }
  .door-frame { position: absolute; inset: 0; overflow: visible; will-change: transform; }
  .door-frame .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .8s cubic-bezier(.4, 0, .2, 1) .05s forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes leaf-left { to { transform: rotateY(84deg); } }
  @keyframes leaf-right { to { transform: rotateY(-84deg); } }
  @keyframes door-light { to { opacity: 1; } }
  /* An unhurried approach while the leaves swing open, then a quickening
     walk through the doorway until its light fills the screen. Sampled
     finely from a smooth curve, so the pace never jumps. */
  @keyframes door-walk {
    0% { transform: scale(1.000); }
    2.5% { transform: scale(1.007); }
    5% { transform: scale(1.014); }
    7.5% { transform: scale(1.021); }
    10% { transform: scale(1.028); }
    12.5% { transform: scale(1.035); }
    15% { transform: scale(1.043); }
    17.5% { transform: scale(1.051); }
    20% { transform: scale(1.060); }
    22.5% { transform: scale(1.070); }
    25% { transform: scale(1.080); }
    27.5% { transform: scale(1.091); }
    30% { transform: scale(1.103); }
    32.5% { transform: scale(1.116); }
    35% { transform: scale(1.129); }
    37.5% { transform: scale(1.144); }
    40% { transform: scale(1.160); }
    42.5% { transform: scale(1.177); }
    45% { transform: scale(1.197); }
    47.5% { transform: scale(1.218); }
    50% { transform: scale(1.242); }
    52.5% { transform: scale(1.269); }
    55% { transform: scale(1.300); }
    57.5% { transform: scale(1.337); }
    60% { transform: scale(1.382); }
    62.5% { transform: scale(1.436); }
    65% { transform: scale(1.500); }
    67.5% { transform: scale(1.580); }
    70% { transform: scale(1.683); }
    72.5% { transform: scale(1.806); }
    75% { transform: scale(1.950); }
    77.5% { transform: scale(2.125); }
    80% { transform: scale(2.341); }
    82.5% { transform: scale(2.600); }
    85% { transform: scale(2.900); }
    87.5% { transform: scale(3.252); }
    90% { transform: scale(3.677); }
    92.5% { transform: scale(4.186); }
    95% { transform: scale(4.813); }
    97.5% { transform: scale(5.591); }
    100% { transform: scale(6.500); }
  }
  @keyframes door-depth { to { transform: scale(1.6); opacity: 0; } }
  @keyframes door-away { to { opacity: 0; visibility: hidden; } }
  /* The door opens the first page of a visit only (src/site.js). */
  .door-seen .door[hidden] { display: none; }
  .door-seen .has-door { --intro: .1s; }

  /* Each page comes in as the door opens onto it. */
  :root { --intro: .1s; }
  .has-door { --intro: 2.75s; }
  .doc > header, .not-found { animation: rise .9s cubic-bezier(.2, .7, .2, 1) var(--intro) both; }
  .doc > :not(header) { animation: fade-in .9s ease calc(var(--intro) + .3s) both; }
  @keyframes fade-in { from { opacity: 0; } }
  .hero::before { animation: drift 48s linear infinite; }
  @keyframes drift { to { transform: translate(96px, 96px); } }
  .mihrab::before, .mihrab::after { animation: frame-rise 1.3s cubic-bezier(.2, .7, .2, 1) var(--intro) both; }
  .mihrab::before { animation-delay: calc(var(--intro) + .15s); }
  @keyframes frame-rise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
  .mihrab > * { animation: rise .9s cubic-bezier(.2, .7, .2, 1) calc(var(--intro) + .3s + var(--i, 0) * .12s) both; }
  .mihrab > :nth-child(2) { --i: 1; }
  .mihrab > :nth-child(3) { --i: 2; }
  .mihrab > :nth-child(4) { --i: 3; }
  .mihrab > :nth-child(5) { --i: 4; }
  .mihrab > :nth-child(6) { --i: 5; }
  @keyframes rise { from { opacity: 0; translate: 0 22px; } }
  .mihrab > .star {
    animation: star-in 1.1s cubic-bezier(.2, .7, .2, 1) var(--intro) both,
      star-spin 60s linear calc(var(--intro) + 1.1s) infinite;
  }
  @keyframes star-in { from { opacity: 0; transform: scale(.3) rotate(-180deg); } }
  @keyframes star-spin { to { rotate: 360deg; } }
  .mihrab > .app-icon {
    animation: icon-in 1s cubic-bezier(.2, .7, .2, 1) calc(var(--intro) + .2s) both,
      float 6s ease-in-out calc(var(--intro) + 1.2s) infinite;
  }
  @keyframes icon-in { from { opacity: 0; scale: .7; } }
  @keyframes float { 50% { translate: 0 -6px; } }

  /* A light passes over the gold title now and then: a paler copy of the
     title (data-shine) shows through a moving mask. Text colours, not a
     gradient clipped to the letters, which forced dark modes such as
     Samsung Internet's darken to brown. */
  .hero h1[data-shine] { position: relative; }
  .hero h1[data-shine]::after {
    content: attr(data-shine);
    content: attr(data-shine) / '';
    position: absolute; inset: 0;
    color: #FFF3D2; pointer-events: none;
    -webkit-mask-image: linear-gradient(110deg, transparent 38%, #000 50%, transparent 62%);
    mask-image: linear-gradient(110deg, transparent 38%, #000 50%, transparent 62%);
    -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: 100% 0; mask-position: 100% 0;
    animation: shimmer 8s ease-in-out calc(var(--intro) + 1.2s) infinite;
  }
  @keyframes shimmer {
    0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
    28%, 100% { -webkit-mask-position: 0 0; mask-position: 0 0; }
  }

  /* Sections rise into view as they are scrolled to, where supported. */
  @supports (animation-timeline: view()) {
    .section-title, .card, .panel, .faq details, .shots img {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
    @keyframes reveal { from { opacity: 0; translate: 0 36px; } }
    .section-title::after {
      animation: line-grow linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 40%;
    }
    @keyframes line-grow { from { scale: 0 1; } }
  }

  /* Questions open smoothly, where supported. */
  @supports selector(::details-content) {
    :root { interpolate-size: allow-keywords; }
    .faq details::details-content {
      block-size: 0; overflow-y: clip;
      transition: block-size .4s cubic-bezier(.2, .7, .2, 1), content-visibility .4s allow-discrete;
    }
    .faq details[open]::details-content { block-size: auto; }
  }
}