/* ==========================================================================
   COLOURS — the app's own: cream paper, deep green, antique gold.

     --cream       the page field (#F8F7F4, the app's background)
     --sand        a second, deeper paper — the arch's inner niche, fields
     --green       the brand green: the arches, the primary button
     --green-deep  headings and the ink of the verse — green, not black
     --ink         body text
     --muted       secondary text
     --gold        antique gold, for ornament only: rules, the finial, the
                   arch's inner line. Too light to carry text on cream.
     --gold-text   the same gold darkened until it can: step numerals,
                   the surah reference
     --danger      form errors
   ========================================================================== */
:root {
  --cream:      #F8F7F4;
  --sand:       #EFEBE2;
  --green:      #1A5C3A;
  --green-deep: #103A25;
  --green-press:#144A2E;
  --ink:        #25302A;
  --muted:      #5C675F;
  --gold:       #B8955A;
  --gold-soft:  #D9C49A;
  --gold-text:  #86652E;
  --hairline:   #E2DCCF;
  --danger:     #A63A2B;

  --s-1: .5rem;
  --s-2: 1rem;
  --s-3: 1.75rem;
  --s-4: 2.75rem;
  --s-5: 4.5rem;
  --s-6: 7rem;

  /* Not from the scale, and deliberately so. Both stores require a minimum
     badge height (Apple 40px onscreen, Google 28px) and clear space of a
     quarter of that height on every side. 52px clears both minimums; the
     gap keeps each badge's clear space free of the other. The plain button
     uses the same height, so it never looks like the lesser option. */
  --cta-h:   3.25rem;
  --cta-gap: 1rem;

  --wrap: 70rem;
}

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* No letter-spacing anywhere on this page. Arabic is a connected script:
   tracking pulls joined letterforms apart and can break the joins. */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: 1.25rem;
}

/* ---- top bar ---------------------------------------------------------- */

.top {
  padding-top: calc(1.25rem + env(safe-area-inset-top));
}

.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* The language switch: named in its own language, so a reader who can't
   read this page can still find theirs. */
.lang {
  padding: .35rem .9rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--green);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.lang:hover { border-color: var(--gold); background: var(--sand); }

.lang:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--green-deep);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.brand img {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 22%;
  box-shadow: 0 1px 2px rgba(16, 58, 37, .18);
}

/* ---- hero ------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  padding-top: clamp(var(--s-3), 6vh, var(--s-5));
  padding-bottom: var(--s-5);
}

h1 {
  margin: 0;
  color: var(--green-deep);
  font-size: clamp(2.35rem, 10.5vw, 4.25rem);
  font-weight: 700;
  line-height: 1.3;
}

/* The two halves of the promise on their own lines: the gain first, then
   what it is for. */
h1 span { display: block; }

/* «آية قبل كل تطبيق» — the whole mechanism in four words. Set as a line
   of its own between the promise and the explanation, with a short gold
   rule leading into it like the start of a verse marker. */
.tagline {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: var(--s-3) 0 0;
  color: var(--green);
  font-size: clamp(1.3rem, 5.2vw, 1.65rem);
  font-weight: 600;
  line-height: 1.5;
}

.tagline::before {
  content: "";
  flex: none;
  width: 2.25rem;
  height: 2px;
  background: var(--gold);
}

.lede {
  margin: var(--s-2) 0 0;
  max-width: 30rem;
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.95;
}

/* ---- the buttons -------------------------------------------------------
   iPhone is the page's one action. Android, while it waits on its store, is
   a quiet line beneath that opens the email form. The day Android goes
   live or pre-registers, it becomes a badge beside Apple's at the same
   size — Google requires its badge be no smaller than Apple's.
   ---------------------------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cta-gap) 1.5rem;
  margin-top: var(--s-4);
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  height: var(--cta-h);
  border-radius: 14px;
  text-decoration: none;
  cursor: pointer;

  /* Suppress the OS tap flash — we draw our own press state below — and
     drop the double-tap-zoom wait so the press reads as immediate. */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  transition: background-color 140ms ease, transform 140ms ease;
}

.cta--plain {
  min-width: 13.5rem;
  padding: 0 1.6rem;
  background: var(--green);
  border: 1px solid var(--green);
  box-shadow: 0 10px 24px -12px rgba(16, 58, 37, .55);
  color: var(--cream);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}

/* A small gold lozenge before the label: the arch's finial, carried onto
   the one button that matters. */
.cta--plain::before {
  content: "";
  width: .42rem;
  height: .42rem;
  flex: none;
  transform: rotate(45deg);
  background: var(--gold-soft);
}

/* ---- press state ----------------------------------------------------
   Driven by a class, not :active. Anchors don't take :active reliably on
   iOS without a touch listener, and :active would never reach the <img>
   inside a badge.

   The scale applies to badges too. Apple's guidelines say not to modify or
   animate the badge; a momentary press is interface feedback, not
   decoration, and a badge that alone among the page's controls didn't
   respond would read as broken to someone who has no idea it's a licensed
   asset. Decided deliberately — see README §3. The artwork itself is never
   recoloured, cropped or redrawn.

   Zero duration going in, 140ms coming out: a press should answer now, a
   release can relax.
   -------------------------------------------------------------------- */
.cta.is-pressed {
  transform: scale(.98);
  transition-duration: 0ms;
}

.cta--plain.is-pressed { background: var(--green-press); }

@media (hover: hover) {
  .cta--plain:hover { background: var(--green-press); }
}

/* Official store badge. Height-matched, aspect ratio untouched. Google's
   artwork ships with its clear space baked into the file, so that badge is
   scaled up by the ratio of file height to artwork height and the surplus
   pulled back with a negative margin — otherwise it renders visibly smaller
   than Apple's, which would also breach Google's "same size or larger"
   rule. --badge-bleed is set per file once the real asset is in place. */
.cta--badge {
  padding: 0;
  background: none;
  border: 0;
  --badge-bleed: 0px;
}

.cta--badge img {
  display: block;
  height: calc(var(--cta-h) + var(--badge-bleed) * 2);
  width: auto;
  margin: calc(var(--badge-bleed) * -1);
}

.cta:focus-visible,
.quiet:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

/* Android while it waits: not a second button competing with the first,
   but a plain question with an answer. Same element, so the config's modes
   still drive it; it only looks quiet while it is on "soon". */
html[data-android="soon"] #cta-android {
  gap: .35rem;
  min-width: 0;
  height: auto;
  padding: .25rem 0;
  background: none;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  color: var(--green);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

html[data-android="soon"] #cta-android::before { display: none; }

html[data-android="soon"] #cta-android.is-pressed { background: none; transform: none; opacity: .7; }

@media (hover: hover) {
  html[data-android="soon"] #cta-android:hover { background: none; color: var(--green-deep); }
}

/* The button that opened the form keeps a quiet tick, so the choice is
   visible even with the form scrolled out of view. */
.cta.is-chosen::after {
  content: "✓";
  margin-inline-start: .15rem;
}

/* ---- email form -----------------------------------------------------
   Collapsed to nothing until someone asks for it. The 0fr → 1fr grid row
   is what lets it animate to its own height instead of appearing all at
   once. Removed outright once no platform needs it.
   -------------------------------------------------------------------- */

.notify {
  width: 100%;
  max-width: 28rem;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-4px);
  transition: grid-template-rows 240ms ease, opacity 240ms ease, transform 240ms ease;
}

.notify > div {
  overflow: hidden;
  min-height: 0;
  padding-top: var(--s-3);
  /* Room for the field's focus ring, which the clip would otherwise cut. */
  padding-inline: 3px;
  margin-inline: -3px;
}

.notify.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: none;
}

html[data-form="off"] .notify { display: none; }

.intro {
  margin: 0 0 var(--s-2);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.9;
}

/* ---- which platform the reminder is for -------------------------------
   Every "soon" button opens the same form, so while more than one
   platform waits, the choice has to be visible inside it. The pressed chip
   is what will be stored as the row's source; with one platform left
   waiting there is nothing to choose, and the chooser hides. */
.platforms {
  display: flex;
  gap: .5rem;
  margin: 0 0 var(--s-2);
}

.chip {
  padding: .35rem .95rem;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}

.chip[aria-pressed="true"] {
  border-color: var(--green);
  color: var(--green);
  background: var(--sand);
}

.chip:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.form {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.field {
  flex: 1 1 14rem;
  min-width: 0;
  height: var(--cta-h);
  padding: 0 1rem;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;   /* 16px — stops iOS zooming on focus */
  font-weight: 400;
  direction: ltr;
  text-align: left;
}

.field::placeholder { color: #8E978F; }

.field:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green);
}

.field[aria-invalid="true"] { border-color: var(--danger); }

.form .cta--plain { flex: 0 0 auto; min-width: 7.5rem; }
@media (max-width: 30rem) {
  .form .cta--plain { flex-basis: 100%; }
}
.form .cta--plain::before { display: none; }
.cta--plain[disabled] { opacity: .55; cursor: default; }

/* A real person never sees or tabs into this. */
.sr-only, .trap {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.msg {
  margin: var(--s-2) 0 0;
  font-size: .9375rem;
  line-height: 1.8;
}
.msg:empty { display: none; }
.msg[data-tone="error"] { color: var(--danger); }

.done {
  margin: 0;
  color: var(--green);
  font-weight: 600;
  line-height: 1.9;
}

/* ---- the arch and the phone -------------------------------------------
   The page's one bold element. A mihrab arch in the brand green — a true
   semicircular crown, a hairline of antique gold running inside it like
   the moulding of a niche, a gold lamp at the crown — and standing in it,
   the phone, showing the moment the app exists for: a verse, before the
   app you were about to open.

   It stays a silhouette with a crown. The day it becomes a full-width band
   it stops being an arch and turns into a coloured header.
   ---------------------------------------------------------------------- */

.stage {
  position: relative;
  justify-self: center;
  width: min(80vw, 23rem);
  padding-bottom: 4rem;
}

.arch {
  position: relative;
  aspect-ratio: 10 / 13;
  /* Radii larger than the box are scaled down to fit, so the top corners
     settle at exactly half the width: a true semicircle at any size. */
  border-radius: 100vw 100vw 0 0;
  background:
    radial-gradient(90% 55% at 50% 12%, #2B7A50 0%, rgba(43, 122, 80, 0) 70%),
    linear-gradient(180deg, var(--green) 0%, #164F32 100%);
}

.arch::before {
  content: "";
  position: absolute;
  inset: .9rem .9rem 0;
  border: 1px solid rgba(217, 196, 154, .55);
  border-bottom: 0;
  border-radius: 100vw 100vw 0 0;
  pointer-events: none;
}

/* The lamp in the niche. */
.lamp {
  position: absolute;
  top: 2.1rem;
  left: 50%;
  width: .6rem;
  height: .6rem;
  margin-left: -.3rem;
  transform: rotate(45deg);
  background: var(--gold-soft);
  box-shadow: 0 0 18px 4px rgba(217, 196, 154, .35);
}

/* The floor the arch stands on: a gold rule wider than the arch, so the
   niche sits on something instead of floating. */
.stage::after {
  content: "";
  position: absolute;
  bottom: 4rem;
  left: -8%;
  right: -8%;
  height: 1px;
  background: linear-gradient(90deg, rgba(184, 149, 90, 0), var(--gold) 20%, var(--gold) 80%, rgba(184, 149, 90, 0));
}

.phone {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 64%;
  transform: translateX(-50%);
  aspect-ratio: 9 / 18.5;
  padding: .55rem;
  border-radius: 2.4rem;
  background: #1B1F1C;
  box-shadow:
    0 0 0 1px #3A403B inset,
    0 30px 50px -22px rgba(16, 38, 26, .65),
    0 10px 20px -12px rgba(16, 38, 26, .4);
  z-index: 1;
}

.screen {
  position: relative;
  height: 100%;
  border-radius: 1.9rem;
  overflow: hidden;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.4rem .8rem .9rem;
  text-align: center;
}

/* The dynamic island. */
.screen::before {
  content: "";
  position: absolute;
  top: .55rem;
  left: 50%;
  width: 30%;
  height: 1.05rem;
  margin-left: -15%;
  border-radius: 999px;
  background: #1B1F1C;
}

.screen-for {
  margin: 0;
  color: var(--muted);
  font-size: .6875rem;
  line-height: 1.6;
}

/* A small arch inside the phone frames the verse: the app's own niche. */
.screen-niche {
  flex: 1;
  width: 100%;
  margin-top: .75rem;
  padding: 1.6rem .6rem .6rem;
  border: 1px solid var(--gold-soft);
  border-bottom: 0;
  border-radius: 100vw 100vw 0 0;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--cream) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ayah {
  margin: 0;
  color: var(--green-deep);
  font-family: "Amiri", "Noto Naskh Arabic", "Traditional Arabic", serif;
  font-size: clamp(.9rem, 3.9vw, 1.15rem);
  line-height: 2.05;
  text-wrap: balance;
}

.ayah-ref {
  margin: .6rem 0 0;
  color: var(--gold-text);
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.4;
}

.screen-btn {
  width: 100%;
  margin-top: .9rem;
  padding: .55rem 0;
  border-radius: .7rem;
  background: var(--green);
  color: var(--cream);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
}

/* The one piece of unprompted motion on the page: the verse arrives on
   the phone the way it arrives in the app — a beat after the screen. */
@keyframes arrive {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.screen-niche, .screen-btn { animation: arrive 700ms 350ms both cubic-bezier(.2, .7, .2, 1); }
.screen-btn { animation-delay: 650ms; }

/* ---- how it works -------------------------------------------------------
   A real sequence, so it is numbered — in Arabic-Indic numerals, each set
   in a small gold arch.
   ---------------------------------------------------------------------- */

.how {
  padding-block: var(--s-5);
  border-top: 1px solid var(--hairline);
}

h2 {
  margin: 0;
  color: var(--green-deep);
  font-size: clamp(1.6rem, 6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.4;
}

.steps {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
}

.step {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0 1.1rem;
  align-items: start;
  align-content: start;   /* a longer neighbour must not push the heading down */
}

.num {
  grid-row: span 2;
  width: 3rem;
  height: 3.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: .45rem;
  border: 1px solid var(--gold);
  border-bottom-width: 2px;
  border-radius: 100vw 100vw 0 0;
  color: var(--gold-text);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}

.step h3 {
  margin: 0;
  color: var(--green-deep);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.6;
}

.step p {
  margin: .3rem 0 0;
  max-width: 22rem;
  color: var(--muted);
  line-height: 1.9;
}

/* ---- closing -------------------------------------------------------------
   The second arch: the whole ask, standing in a niche of its own. It keeps
   its crown at every width; wide screens make it wider, never a band.
   ---------------------------------------------------------------------- */

.close {
  padding-bottom: var(--s-5);
}

.close-arch {
  position: relative;
  max-width: 40rem;
  margin: 0 auto;
  padding: clamp(5.5rem, 22vw, 8rem) 1.5rem var(--s-5);
  border-radius: 100vw 100vw 0 0;
  background:
    radial-gradient(80% 45% at 50% 0%, #2B7A50 0%, rgba(43, 122, 80, 0) 70%),
    var(--green);
  color: var(--cream);
  text-align: center;
}

.close-arch::before {
  content: "";
  position: absolute;
  inset: .9rem .9rem 0;
  border: 1px solid rgba(217, 196, 154, .5);
  border-bottom: 0;
  border-radius: 100vw 100vw 0 0;
  pointer-events: none;
}

.close-arch .lamp { top: 2.4rem; }

.close-arch h2 {
  color: var(--cream);
  font-size: clamp(1.9rem, 8vw, 2.75rem);
}

.close-arch p {
  margin: var(--s-1) auto 0;
  max-width: 24rem;
  color: #D6DDD6;
  line-height: 1.9;
}

.close-arch .actions { justify-content: center; }

/* On green, the button turns to cream with green ink. */
.close-arch .cta--plain {
  position: relative;
  background: var(--cream);
  border-color: var(--cream);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .45);
  color: var(--green-deep);
}
.close-arch .cta--plain::before { background: var(--gold); }
.close-arch .cta--plain.is-pressed { background: var(--sand); }
@media (hover: hover) {
  .close-arch .cta--plain:hover { background: var(--sand); }
}
.close-arch .cta:focus-visible { outline-color: var(--cream); }

/* ---- footer --------------------------------------------------------- */

footer {
  padding-block: var(--s-3) calc(var(--s-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: .875rem;
  line-height: 2;
}

footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
}

footer nav { display: flex; gap: 1.5rem; }

footer a {
  color: var(--muted);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
footer a:hover { color: var(--green); }

/* ---- English (/en) ----------------------------------------------------
   Same page, Latin type: IBM Plex Sans, the Latin half of the brand face.
   Latin sits tighter than Arabic, which needs room above and below the
   line for its dots and marks, so the leading comes down. The verse on the
   phone stays in Arabic and keeps its own leading.
   ---------------------------------------------------------------------- */

html[lang="en"] body {
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  line-height: 1.65;
}

html[lang="en"] h1 { font-size: clamp(2.1rem, 8.8vw, 3.4rem); line-height: 1.12; }
html[lang="en"] h1 span { text-wrap: balance; }
html[lang="en"] h2 { line-height: 1.25; }
html[lang="en"] .lede,
html[lang="en"] .step p,
html[lang="en"] .close-arch p,
html[lang="en"] .intro { line-height: 1.65; }
html[lang="en"] .step h3 { line-height: 1.4; }
html[lang="en"] .tagline { margin-top: var(--s-2); }
html[lang="en"] .num { font-size: 1.25rem; }

/* ---- wider screens ------------------------------------------------------ */

@media (min-width: 48rem) {
  .wrap { padding-inline: 2rem; }

  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
  .step { grid-template-columns: 1fr; }
  .num { grid-row: auto; margin-bottom: var(--s-2); }
  .step p { max-width: none; }
}

@media (min-width: 60rem) {
  /* Text on the right, where an Arabic reader starts; the arch on the left. */
  .hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: center;
    gap: var(--s-5);
    padding-top: var(--s-5);
    padding-bottom: var(--s-6);
  }
  .stage { width: 25rem; }
  .how { padding-block: var(--s-6); }
  .close { padding-bottom: var(--s-6); }
  .close-arch { padding-top: 9rem; }
}

/* Last, so it actually overrides the rules above. The press keeps its
   colour change — feedback survives, movement doesn't. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .cta.is-pressed { transform: none; }
}