/* مطلع — landing page.
 * The page borrows the icon's one idea: night turning to dawn inside a mihrab arch.
 * Rules this file keeps:
 *  · NO letter-spacing anywhere. Arabic is a connected script and letter-spacing breaks
 *    words into glyphs (see memory: reference_arabic_no_letter_spacing). Emphasis in Arabic
 *    comes from weight, size and colour.
 *  · The sky gradient (night → dusk → dawn) is the icon's own three stops, and it appears
 *    in exactly two places: the hero, and the dots on the day spine.
 *  · Accent = the app's system indigo (#5856D6 light / #7D7AFF-ish dark). Nothing else is
 *    tinted.
 *  · Logical properties only (inline-start/end), so the same sheet serves / (rtl) and /en/ (ltr). */

:root {
  --night: #1E1F5C;
  --dusk: #4B3F9A;
  --dawn: #E39A7A;
  --sun: #FFD9A8;

  --ground: #F3F2F8;
  --surface: #FFFFFF;
  --surface-2: #EAE8F3;
  --ink: #17173A;
  --ink-2: #4F4F72;
  --ink-3: #75759A;
  --line: rgba(23, 23, 58, .12);
  --tint: #5856D6;
  --tint-ink: #4644B8;
  --tint-soft: rgba(88, 86, 214, .1);
  --shadow: 0 1px 2px rgba(23, 23, 58, .06), 0 12px 32px rgba(23, 23, 58, .08);
  --bezel: #141418;

  --display: "Reem Kufi", "Vazirmatn", "Geeza Pro", sans-serif;
  --body: "Vazirmatn", -apple-system, "SF Arabic", "Geeza Pro", "Noto Sans Arabic", system-ui, sans-serif;
  --quran: "Amiri Quran", "Amiri", "Geeza Pro", serif;

  --wrap: 1120px;
  --gutter: 20px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0B0C24;
    --surface: #15163A;
    --surface-2: #1D1E48;
    --ink: #EEEDF8;
    --ink-2: #B4B3D4;
    --ink-3: #8F8EB6;
    --line: rgba(238, 237, 248, .12);
    --tint: #8C89FF;
    --tint-ink: #A9A7FF;
    --tint-soft: rgba(140, 137, 255, .14);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35);
    --bezel: #000;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0B0C24;
  --surface: #15163A;
  --surface-2: #1D1E48;
  --ink: #EEEDF8;
  --ink-2: #B4B3D4;
  --ink-3: #8F8EB6;
  --line: rgba(238, 237, 248, .12);
  --tint: #8C89FF;
  --tint-ink: #A9A7FF;
  --tint-soft: rgba(140, 137, 255, .14);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35);
  --bezel: #000;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
picture { display: contents; } /* the AVIF/JPEG wrapper must not become a layout box */
a { color: var(--tint-ink); text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--tint); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.35; text-wrap: balance; margin: 0; }
p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* ------------------------------------------------------------ top bar */
.bar {
  position: absolute; inset-inline: 0; top: 0; z-index: 5;
  padding-top: env(safe-area-inset-top, 0px);
}
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-family: var(--display); font-size: 22px; font-weight: 600; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.bar nav { display: flex; align-items: center; gap: 22px; font-size: 15px; }
.bar nav a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.bar nav a:hover { color: #fff; }
.bar nav .lang { border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px; padding: 2px 10px; }
@media (max-width: 760px) { .bar nav a:not(.lang) { display: none; } }

/* ------------------------------------------------------------ hero: the sky */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, var(--night) 0%, #2A2870 38%, var(--dusk) 66%, #9A6F97 86%, var(--dawn) 100%);
  padding-block: calc(68px + env(safe-area-inset-top, 0px) + 40px) 0;
}
.hero::before { /* a few stars, only in the night part of the sky */
  content: ""; position: absolute; inset: 0 0 55% 0; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 48%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 46% 14%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 36%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 81% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 52%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 7% 60%, #fff 50%, transparent 51%);
}
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: end; }
.hero-copy { padding-block-end: 120px; align-self: center; }
.ayah { font-family: var(--quran); font-size: 22px; line-height: 2; color: var(--sun); margin-block-end: 18px; }
.ayah small { font-family: var(--body); font-size: 13px; color: rgba(255, 255, 255, .6); margin-inline-start: 8px; }
.hero h1 { font-size: clamp(34px, 5.2vw, 58px); line-height: 1.3; font-weight: 700; }
.hero h1 .name { display: block; font-size: 1.45em; line-height: 1.15; color: #fff; }
.hero .sub { margin-block-start: 14px; font-size: 19px; color: rgba(255, 255, 255, .9); font-weight: 500; }
.hero .lead { margin-block-start: 14px; max-width: 34em; color: rgba(255, 255, 255, .78); font-size: 17px; }
.cta { margin-block-start: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.soon {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: var(--night); border-radius: 12px; padding: 10px 18px 10px 16px;
  font-weight: 700; font-size: 17px;
}
.soon svg { width: 20px; height: 20px; flex: none; }
.cta .note { font-size: 14px; color: rgba(255, 255, 255, .72); max-width: 26em; line-height: 1.6; }
.store-live img { height: 52px; width: auto; }

/* the mihrab: the icon's arch, drawn at hero scale, with the phone standing in it */
.mihrab { position: relative; justify-self: center; width: min(430px, 100%); aspect-ratio: 430 / 600; }
.mihrab svg.arch { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mihrab .sunrise {
  position: absolute; inset-inline: 0; margin-inline: auto; bottom: -70px; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, var(--sun) 0 34%, rgba(255, 217, 168, .35) 36%, rgba(255, 217, 168, 0) 70%);
  animation: rise 2.4s cubic-bezier(.22, .8, .2, 1) both;
}
@keyframes rise { from { transform: translateY(40px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .mihrab .sunrise { animation: none; } }
.mihrab .phone { position: absolute; inset-inline: 0; margin-inline: auto; bottom: -1px; --pw: 60%; border-end-start-radius: 0; border-end-end-radius: 0; }
.mihrab .phone .screen { aspect-ratio: 1206 / 1950; object-fit: cover; object-position: top; border-end-start-radius: 0; border-end-end-radius: 0; }

/* ------------------------------------------------------------ phone frame */
.phone {
  width: var(--pw, 260px); max-width: 100%;
  background: var(--bezel); padding: 2.6%; border-radius: 13% / 6%;
  box-shadow: 0 30px 60px -20px rgba(15, 15, 50, .45), 0 0 0 1px rgba(255, 255, 255, .06) inset;
}
.phone .screen { width: 100%; height: auto; aspect-ratio: 1206 / 2622; border-radius: 11% / 5.2%; object-fit: cover; background: #ddd; }
/* a phone that shows the middle of its screen (the occasions card, not the clock) */
.phone.focus .screen { aspect-ratio: 1206 / 2000; object-position: 50% 45%; }
/* "peek": the phone is cut by the bottom of its box and fades there. Every spine phone
 * uses it, which also hides the older tab bar in three captures (see README). */
.peek { position: relative; height: var(--peek-h, 470px); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
.peek .phone { margin-inline: auto; }

/* ------------------------------------------------------------ facts strip */
.facts { border-bottom: 1px solid var(--line); background: var(--surface); }
.facts ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.facts li { padding-block: 22px; padding-inline: 20px; border-inline-start: 1px solid var(--line); display: grid; gap: 2px; }
.facts li:first-child { border-inline-start: 0; padding-inline-start: 0; }
.facts b { font-family: var(--display); font-weight: 600; font-size: 19px; }
.facts span { color: var(--ink-2); font-size: 14px; line-height: 1.6; }
@media (max-width: 860px) {
  .facts ul { grid-template-columns: 1fr 1fr; }
  .facts li { padding-inline: 0; border-inline-start: 0; border-top: 1px solid var(--line); }
  .facts li:nth-child(-n+2) { border-top: 0; }
  .facts li:nth-child(even) { padding-inline-start: 16px; border-inline-start: 1px solid var(--line); }
}

/* ------------------------------------------------------------ sections */
section { padding-block: 88px; }
.head { max-width: 40em; margin-block-end: 44px; display: grid; gap: 10px; }
.kicker { color: var(--tint-ink); font-weight: 600; font-size: 15px; }
.head h2 { font-size: clamp(28px, 3.6vw, 40px); }
.head p { color: var(--ink-2); }

/* ------------------------------------------------------------ the day spine */
.day { position: relative; }
.stops { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; position: relative; }
.stops::before { /* the spine itself, tinted from night through day and back to night */
  content: ""; position: absolute; inset-block: 10px 10px; inset-inline-start: 11px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--night), var(--dawn) 20%, var(--sun) 40%, #7FA8E0 60%, var(--dusk) 80%, var(--night));
  opacity: .7;
}
.stop { position: relative; margin-inline-start: 32px; padding-inline-start: 32px; display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: center;
  background: var(--surface); border-radius: 22px; padding-block: 32px 0; padding-inline-end: 32px; box-shadow: var(--shadow); }
.stop::before { /* the hour dot; sits on the spine, outside the card */
  content: ""; position: absolute; top: 40px; inset-inline-start: -29px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--dot); box-shadow: 0 0 0 4px var(--ground);
}
.stop .txt { padding-block-end: 32px; display: grid; gap: 12px; align-content: start; }
.when { font-family: var(--display); font-size: 15px; font-weight: 600; color: var(--ink-3); }
.stop h3 { font-size: 26px; }
.stop p { color: var(--ink-2); max-width: 34em; }
.stop ul { margin: 0; padding-inline-start: 1.1em; color: var(--ink-2); display: grid; gap: 4px; }
.stop ul li::marker { color: var(--tint); }
.stop .peek { --peek-h: 400px; align-self: end; }
.stop .peek .phone { --pw: 250px; }
.stop.duo .peek { width: 300px; }
.stop.duo .peek .phone { position: absolute; top: 0; }
.stop.duo .peek .phone:first-child { inset-inline-end: 0; --pw: 220px; }
.stop.duo .peek .phone:last-child { inset-inline-start: 0; top: 60px; --pw: 190px; }
.stop.bare { grid-template-columns: 1fr; padding-block-end: 0; }
.stop.bare .txt { padding-block-end: 32px; }

@media (max-width: 760px) {
  .stop { grid-template-columns: 1fr; gap: 24px; padding-inline: 22px; padding-block-start: 26px; margin-inline-start: 26px; }
  .stop::before { inset-inline-start: -23px; top: 32px; }
  .stops::before { inset-inline-start: 5px; }
  .stop .txt { padding-block-end: 0; }
  .stop .peek { --peek-h: 330px; }
  .stop .peek .phone { --pw: 220px; }
  .stop.duo .peek { width: 100%; max-width: 300px; margin-inline: auto; }
  .stop.bare .txt { padding-block-end: 26px; }
}

/* ------------------------------------------------------------ all day: bento */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.tile { background: var(--surface); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; display: grid; align-content: start; }
.tile .txt { padding: 28px 28px 0; display: grid; gap: 10px; }
.tile h3 { font-size: 24px; }
.tile p { color: var(--ink-2); }
.tile.quran { grid-column: span 6; grid-template-columns: .9fr 1.1fr; align-items: end; }
.tile.quran .txt { padding-block-end: 28px; align-self: center; }
.tile.live { grid-column: span 2; }
.tile.screens { grid-column: span 4; }
.tile.watch { grid-column: span 6; grid-template-columns: 1.2fr .8fr; align-items: center; }
.tile.watch .txt { padding-block-end: 28px; }
.trio { display: flex; justify-content: center; gap: 16px; padding: 28px 24px 0; }
.trio .peek { --peek-h: 360px; flex: 1 1 0; min-width: 0; }
.trio .phone { --pw: 100%; max-width: 200px; }
.trio .peek:nth-child(2) { margin-block-start: -18px; }
.tile.live .peek { --peek-h: 360px; margin-block-start: 24px; }
.tile.live .phone { --pw: 230px; }
.wall { /* the widget sheet's own violet, so the renders sit on the ground they were made on */
  margin: 24px 24px 0; border-radius: 16px 16px 0 0; padding: 18px 18px 0;
  background: linear-gradient(160deg, #7C74CF, #5A4FB7 55%, #3E3790);
  display: grid; grid-template-columns: 1fr 1.7fr; gap: 14px; align-items: start;
}
.wall img { border-radius: 10px; }
.wall .row { grid-column: 1 / -1; }
.wall .night { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wall .day-i { display: none; } :root:not([data-theme="light"]) .wall .night { display: block; } }
:root[data-theme="dark"] .wall .day-i { display: none; }
:root[data-theme="dark"] .wall .night { display: block; }
.watches { display: flex; justify-content: center; gap: 18px; padding: 28px; }
.watches figure { margin: 0; display: grid; gap: 8px; justify-items: center; }
.watches img { width: 170px; height: auto; border-radius: 42px; background: #000; padding: 10px; box-shadow: 0 0 0 5px #1b1b20, var(--shadow); }
.watches figcaption { font-size: 14px; color: var(--ink-3); }
.small { font-size: 14px; color: var(--ink-3); line-height: 1.6; }

@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr; }
  .tile.quran, .tile.live, .tile.screens, .tile.watch { grid-column: auto; grid-template-columns: 1fr; }
  .tile .txt { padding: 24px 22px 0; }
  .tile.quran .txt, .tile.watch .txt { padding-block-end: 0; }
  .trio { gap: 10px; padding-inline: 16px; }
  .trio .peek { --peek-h: 300px; }
  .wall { grid-template-columns: 1fr; margin-inline: 16px; }
  .watches img { width: 140px; border-radius: 34px; }
}

/* ------------------------------------------------------------ privacy */
.privacy { background: var(--night); color: #fff; }
.privacy .kicker { color: var(--sun); }
.privacy .head p { color: rgba(255, 255, 255, .75); }
.promises { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.promises li { border-top: 2px solid rgba(255, 217, 168, .5); padding-block-start: 18px; display: grid; gap: 8px; }
.promises b { font-family: var(--display); font-size: 30px; font-weight: 600; }
.promises span { color: rgba(255, 255, 255, .75); }
.privacy .more { margin-block-start: 36px; color: rgba(255, 255, 255, .75); max-width: 44em; }
.privacy a { color: var(--sun); }
@media (max-width: 760px) { .promises { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ thanks (tips) */
.thanks-card { background: var(--surface); border-radius: 22px; box-shadow: var(--shadow); padding: 36px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; }
.thanks-card h2 { font-size: clamp(26px, 3.2vw, 36px); }
.thanks-card .txt { display: grid; gap: 12px; align-content: start; }
.thanks-card p { color: var(--ink-2); }
.ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: start; }
.ways li { background: var(--surface-2); border-radius: 14px; padding: 16px 18px; display: grid; gap: 2px; }
.ways b { font-weight: 700; }
.ways span { color: var(--ink-2); font-size: 15px; line-height: 1.6; }
@media (max-width: 760px) { .thanks-card { grid-template-columns: 1fr; padding: 24px 22px; } }

/* ------------------------------------------------------------ FAQ */
.faq { background: var(--surface); }
.qa-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
/* .feat looks like a FAQ row but is not one, so gen-faq.py leaves it out of the JSON-LD */
.qa, .feat { padding-block: 22px; border-top: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.qa h3, .feat h3 { font-family: var(--body); font-size: 19px; font-weight: 700; line-height: 1.5; }
.qa p, .feat p { color: var(--ink-2); }
@media (max-width: 860px) { .qa-list { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ support */
.support-card { display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: center; border: 1px solid var(--line); border-radius: 22px; padding: 32px 36px; }
.support-card h2 { font-size: clamp(26px, 3.2vw, 36px); }
.support-card p { color: var(--ink-2); margin-block-start: 8px; }
.mail { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mail code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 18px; direction: ltr; unicode-bidi: isolate; user-select: all;
  background: var(--surface-2); border-radius: 10px; padding: 10px 14px; color: var(--ink); }
.btn { font: inherit; font-size: 15px; font-weight: 600; border: 0; border-radius: 10px; padding: 10px 16px; cursor: pointer;
  background: var(--tint); color: #fff; }
.btn:hover { filter: brightness(1.08); }
@media (max-width: 760px) { .support-card { grid-template-columns: 1fr; padding: 24px 22px; } .mail code { font-size: 16px; } }

/* ------------------------------------------------------------ footer */
footer { border-top: 1px solid var(--line); padding-block: 36px 48px; font-size: 15px; color: var(--ink-3); }
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
footer .who { display: flex; align-items: center; gap: 10px; }
footer .who img { width: 28px; height: 28px; border-radius: 7px; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
footer a { color: var(--ink-2); }
footer .later { color: var(--ink-3); }

/* ------------------------------------------------------------ hero at phone width */
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 28px; }
  .hero-copy { padding-block-end: 0; }
  .mihrab { width: min(340px, 92%); }
  .mihrab .sunrise { width: 200px; height: 200px; bottom: -60px; }
  section { padding-block: 64px; }
  .head { margin-block-end: 32px; }
}

[dir="ltr"] .hero h1 .name [lang="ar"] { font-size: .5em; opacity: .7; margin-inline-start: .3em; }

/* ------------------------------------------------------------ plain document pages (privacy) */
.doc-top { background: var(--night); color: #fff; padding-block: calc(68px + env(safe-area-inset-top, 0px) + 28px) 44px; }
.doc-top h1 { font-size: clamp(30px, 4.4vw, 44px); }
.doc-top p { color: rgba(255, 255, 255, .75); margin-block-start: 8px; }
.doc { max-width: 760px; margin-inline: auto; padding-inline: var(--gutter); padding-block: 48px 72px; }
.doc h2 { font-size: 26px; margin-block: 40px 12px; }
.doc p, .doc li { color: var(--ink-2); }
.doc ul { padding-inline-start: 1.2em; display: grid; gap: 6px; margin: 0; }
.doc strong { color: var(--ink); }
.doc .table { overflow-x: auto; margin-block: 12px; }
.doc table { border-collapse: collapse; width: 100%; font-size: 15px; }
.doc th, .doc td { text-align: start; border-bottom: 1px solid var(--line); padding: 10px 12px; vertical-align: top; color: var(--ink-2); }
.doc th { color: var(--ink); font-weight: 700; }
[dir="ltr"] .hero h1 .name, [dir="ltr"] .brand { font-family: var(--display); }
.privacy .more + .more { margin-block-start: 14px; }