@font-face { font-family: "Newsreader"; src: url("assets/Newsreader.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("assets/InstrumentSans.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "SurahNames"; src: url("assets/SurahNames.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "UthmanicHafs"; src: url("assets/UthmanicHafs.woff2") format("woff2"); font-display: swap; }

/* ---------------------------------------------------------------- tokens -- */
:root {
  --sc-canvas: #F7F4ED;
  --sc-surface: #EEEBE4;
  --sc-ink: #1A140A;
  --sc-ink-soft: #5E533D;
  --sc-accent: #8A5A26;
  --sc-accent-ink: #F7F4ED;
  --sc-font-display: "Newsreader", Georgia, serif;
  --sc-font-text: "Instrument Sans", system-ui, sans-serif;
  --sc-r-sm: 2px; --sc-r-md: 4px; --sc-r-lg: 14px; --sc-r-pill: 999px;
  --sc-shadow-color: 40 30% 12%;
  --cr-paper: #FBF9F3;
  --cr-night: #000000;
  --cr-night-surface: #0E0D0B;
  --cr-night-ink: #E8E2D5;
  --cr-night-soft: #B7AA93;
  --cr-gold: #C68A3C;
  --cr-gold-dark: #D29446;
  --cr-micro: #575343;
  --cr-hair: color-mix(in oklab, var(--sc-ink) 14%, var(--sc-canvas));
  --cr-e1: 0 1px 2px hsl(var(--sc-shadow-color) / .10), 0 6px 16px -8px hsl(var(--sc-shadow-color) / .16);
  --cr-e2: 0 2px 4px hsl(var(--sc-shadow-color) / .12), 0 18px 40px -16px hsl(var(--sc-shadow-color) / .26);
  --cr-e3: 0 40px 80px -30px hsl(var(--sc-shadow-color) / .45), 0 0 0 1px rgb(0 0 0 / .06);
  --cr-sheet-ring: 0 0 0 1px hsl(var(--sc-shadow-color) / .14);
  --cr-sheet-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 1px 2px hsl(var(--sc-shadow-color) / .10), 0 12px 24px -12px hsl(var(--sc-shadow-color) / .22), 0 40px 80px -28px hsl(var(--sc-shadow-color) / .38);
  --cr-thumb: var(--sc-ink);
  --cr-thumb-ink: var(--sc-canvas);
  --cr-sec: clamp(4rem, 9vh, 7rem);
  --shot-w: clamp(260px, 24vw, 330px);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  /* Fixed pill bottom edge (16 top + 56 tall) plus a 16px gap. */
  --cr-anchor: 88px;
}

/* Anchors land clear of the fixed header. */
section[id], #main { scroll-margin-top: var(--cr-anchor); }

html, body { overflow-x: clip; }
body { background: var(--sc-canvas); color: var(--sc-ink); font-family: var(--sc-font-text); font-stretch: 96%; }
figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.night {
  --sc-canvas: var(--cr-night);
  --sc-surface: var(--cr-night-surface);
  --sc-ink: var(--cr-night-ink);
  --sc-ink-soft: var(--cr-night-soft);
  --sc-accent: var(--cr-gold-dark);
  --sc-accent-ink: #0E0D0B;
  --cr-micro: var(--cr-night-soft);
  --cr-hair: color-mix(in oklab, var(--cr-night-ink) 20%, var(--cr-night));
  --cr-e1: 0 1px 2px rgb(0 0 0 / .5), 0 6px 16px -8px rgb(0 0 0 / .6);
  --cr-e2: 0 2px 4px rgb(0 0 0 / .5), 0 18px 40px -16px rgb(0 0 0 / .7);
  --cr-e3: 0 40px 80px -30px rgb(0 0 0 / .9), 0 0 0 1px rgb(255 255 255 / .07);
  --cr-sheet-ring: 0 0 0 1px rgb(255 255 255 / .10);
  --cr-sheet-shadow: 0 2px 4px rgb(0 0 0 / .5), 0 24px 48px -16px rgb(0 0 0 / .7), 0 60px 100px -30px rgb(0 0 0 / .9);
  --cr-thumb: var(--cr-night-ink);
  --cr-thumb-ink: #000000;
  color: var(--sc-ink);
}
.night .body, .night .small, .night .facts li, .night .legend__label { letter-spacing: 0.005em; }

/* ------------------------------------------------------------------ type -- */
.dsp {
  font-family: var(--sc-font-display);
  font-weight: 500;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0;
  color: var(--sc-ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.dsp--hero { font-size: clamp(2.6rem, 1.4rem + 3.6vw, 4.8rem); line-height: 1.0; font-variation-settings: "opsz" 72; }
.dsp--h2 { font-size: clamp(1.9rem, 1.15rem + 2.3vw, 3.2rem); line-height: 1.06; font-variation-settings: "opsz" 72; }
.lede {
  font-family: var(--sc-font-display);
  font-variation-settings: "opsz" 18;
  font-weight: 400;
  font-size: 1.22rem;
  line-height: 1.42;
  letter-spacing: -0.006em;
  color: var(--sc-ink);
  max-width: 42ch;
  text-wrap: pretty;
  margin: 0;
}
.body {
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 50ch;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
  margin: 0;
}
.night .body { line-height: 1.65; }
.micro {
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cr-micro);
  margin: 0;
}
.small { font-size: 0.8125rem; line-height: 1.55; color: var(--sc-ink-soft); margin: 0; text-wrap: pretty; }
.night .small { line-height: 1.6; }

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

.facts li {
  border-top: 1px solid var(--cr-hair);
  padding-block: var(--sc-3);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}
.facts li:last-child { border-bottom: 1px solid var(--cr-hair); }
.facts b { font-weight: 600; color: var(--sc-ink); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- chrome -- */
.skip {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  transform: translateY(-200%);
  background: var(--sc-ink); color: var(--sc-canvas);
  padding: 10px 16px; border-radius: var(--sc-r-md);
  font-size: 0.875rem; font-weight: 600; text-decoration: none;
  transition: transform 160ms var(--sc-ease-out);
}
.skip:focus-visible { transform: none; }

.nav {
  position: fixed; inset: 16px 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; justify-content: center;
  padding-inline: var(--sc-gutter);
  pointer-events: none;
}
.nav__pill {
  pointer-events: auto;
  width: min(100%, 52rem); height: 56px;
  display: flex; align-items: center; gap: var(--sc-6);
  padding: 0 8px 0 18px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--sc-canvas) 94%, transparent);
  border: 1px solid var(--cr-hair);
  box-shadow: var(--cr-e2);
  transition: background-color 180ms var(--sc-ease-out), color 180ms var(--sc-ease-out), border-color 180ms var(--sc-ease-out);
}
.nav--night .nav__pill {
  --sc-accent: var(--cr-gold-dark);
  background: color-mix(in oklab, #000000 90%, transparent);
  border-color: color-mix(in oklab, #E8E2D5 20%, transparent);
  color: var(--cr-night-ink);
}
/* padding-block, not height: the mark and wordmark keep their drawn size and
   the pill still centres them, but the hit box clears 44dp. */
/* Brand sizes follow assets/brand/lockup-system.html: the mark never renders
   below 48 px, and the wordmark is illegible under ~80 px. The old 34/84 pair sat
   under both floors and read as a blurred logo on 1x screens. */
.nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; padding-block: 4px; }
.nav__mark { width: 48px; height: 48px; }
.nav__word { width: 113px; height: 30px; }

.nav__links { display: flex; align-items: center; gap: var(--sc-5); margin-inline: auto; }
.nav__links a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.875rem; font-weight: 600;
  color: var(--sc-ink-soft); text-decoration: none;
  text-underline-offset: 6px;
  transition: color 150ms var(--sc-ease-out);
}
.nav--night .nav__links a { color: var(--cr-night-soft); }
.nav__links a:hover { color: var(--sc-ink); }
.nav--night .nav__links a:hover { color: var(--cr-night-ink); }
.nav__links a[aria-current="true"] { color: var(--sc-ink); text-decoration: underline; text-decoration-thickness: 1px; }
.nav--night .nav__links a[aria-current="true"] { color: var(--cr-night-ink); }

.nav__cta {
  flex: none;
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: 18px;
  border-radius: 999px;
  background: var(--sc-ink); color: var(--sc-canvas);
  font-size: 0.875rem; font-weight: 600; text-decoration: none;
  white-space: nowrap;
  transition: transform 150ms var(--sc-ease-out), background-color 180ms var(--sc-ease-out), color 180ms var(--sc-ease-out);
}
/* display:none, not visibility: the hidden label must stay out of the
   accessible name, so the link reads as exactly one of the two. */
.nav__cta-short { display: none; }
.nav--night .nav__cta { background: var(--cr-night-ink); color: #000000; }
@media (hover: hover) and (pointer: fine) { .nav__cta:hover { transform: scale(1.04); } }
.nav__cta:active { transform: translateY(1px); }

.nav__menu {
  display: none;
  width: 44px; height: 44px; flex: none;
  margin-left: auto;
  background: none; border: 0; padding: 0;
  border-radius: 999px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  cursor: pointer;
}
.nav__menu span { display: block; width: 20px; height: 1px; background: var(--sc-ink); }
.nav--night .nav__menu span { background: var(--cr-night-ink); }
.nav__fallback { display: none; }

.nav__sheet {
  position: fixed; inset: 0; z-index: 61;
  background: var(--sc-canvas);
  padding: 96px var(--sc-gutter) var(--sc-7);
  display: flex; flex-direction: column;
  pointer-events: auto;
  transform: translateX(100%);
  transition: transform 320ms var(--sc-ease-drawer);
}
.nav__sheet[hidden] { display: none; }
.nav--open .nav__sheet { transform: none; }
.nav__sheetlinks { display: flex; flex-direction: column; gap: var(--sc-5); }
.nav__sheetlinks a {
  font-family: var(--sc-font-display); font-weight: 500;
  font-variation-settings: "opsz" 72;
  font-size: 2rem; line-height: 1.1;
  color: var(--sc-ink); text-decoration: none;
  opacity: 0; transform: translateX(16px);
  transition: opacity 320ms var(--sc-ease-out), transform 320ms var(--sc-ease-out);
}
.nav--open .nav__sheetlinks a { opacity: 1; transform: none; }
.nav--open .nav__sheetlinks a:nth-child(1) { transition-delay: 60ms; }
.nav--open .nav__sheetlinks a:nth-child(2) { transition-delay: 120ms; }
.nav--open .nav__sheetlinks a:nth-child(3) { transition-delay: 180ms; }
.nav--open .nav__sheetlinks a:nth-child(4) { transition-delay: 240ms; }
.nav__sheetcta {
  margin-top: auto;
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; border-radius: 999px;
  background: var(--sc-ink); color: var(--sc-canvas);
  font-size: 1rem; font-weight: 600; text-decoration: none;
}
.nav__close {
  position: absolute; top: 18px; right: var(--sc-gutter);
  width: 44px; height: 44px;
  background: none; border: 0; padding: 0; cursor: pointer;
  border-radius: 999px;
}
.nav__close::before, .nav__close::after {
  content: ""; position: absolute; left: 12px; top: 21px;
  width: 20px; height: 1px; background: var(--sc-ink);
}
.nav__close::before { transform: rotate(45deg); }
.nav__close::after { transform: rotate(-45deg); }
.nav a:focus-visible, .nav button:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

/* Entrance. `.nav-js` is set by site.js immediately before it wires the nav,
   so a failure anywhere earlier in that file leaves the chrome — and the store
   link inside it — fully visible instead of stranded at opacity 0. */
.nav-js .nav__pill { opacity: 0; transform: translateY(-12px); }
.nav-js .nav__links a, .nav-js .nav__cta { opacity: 0; }
.nav-js .nav__cta { transform: translateX(12px); }
.nav--in .nav__pill { opacity: 1; transform: none; transition: opacity 420ms var(--sc-ease-out), transform 420ms var(--sc-ease-out), background-color 180ms var(--sc-ease-out), color 180ms var(--sc-ease-out), border-color 180ms var(--sc-ease-out); }
.nav--in .nav__links a { opacity: 1; transition: opacity 280ms var(--sc-ease-out), color 150ms var(--sc-ease-out); }
.nav--in .nav__links a:nth-child(1) { transition-delay: 120ms; }
.nav--in .nav__links a:nth-child(2) { transition-delay: 160ms; }
.nav--in .nav__links a:nth-child(3) { transition-delay: 200ms; }
.nav--in .nav__links a:nth-child(4) { transition-delay: 240ms; }
.nav--in .nav__cta { opacity: 1; transform: none; transition: opacity 280ms var(--sc-ease-out) 120ms, transform 280ms var(--sc-ease-out) 120ms, background-color 180ms var(--sc-ease-out), color 180ms var(--sc-ease-out); }
.nav--ready .nav__pill, .nav--ready .nav__links a, .nav--ready .nav__cta { opacity: 1; transform: none; }

/* --------------------------------------------------------------- grounds -- */
.ground {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, #FFFDF5 0%, #F7F4ED 55%, #E6DFCC 100%);
}
.ground.night { background: linear-gradient(180deg, #221A12 0%, #0E0D0B 45%, #000 100%); }
.ground__gl {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: .62;
}
.ground.night .ground__gl { opacity: .85; }
.ground > section { position: relative; z-index: 1; }
.ground > section > .wrap { position: relative; z-index: 1; }

.ghost {
  position: absolute; z-index: 0;
  font-family: "SurahNames", serif;
  font-size: clamp(9rem, 26vw, 22rem);
  line-height: 1;
  color: var(--sc-ink);
  opacity: .05;
  user-select: none; pointer-events: none;
  white-space: nowrap;
}
.night .ghost { opacity: .07; }
.ghost--hero { right: -6%; top: -4%; }
.ghost--listen { right: -4%; bottom: 6%; }
.ghost--memo { right: -3%; top: 4%; }
.ghost--tajweed { left: -4%; bottom: -2%; }
.ghost--find { left: 40%; bottom: -4%; }
.ghost--get { left: 50%; top: 6%; margin-left: -11rem; }

/* --------------------------------------------------------------- surfaces -- */
.shot {
  position: relative;
  width: var(--shot-w);
  border-radius: 14px;
  border: 1px solid var(--cr-hair);
  box-shadow: var(--cr-e2);
  overflow: clip;
  background: var(--sc-surface);
}
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot--tall { aspect-ratio: 9 / 13; }
/* The Index render is 720 x 1570 and its surah rows are on a 142.7px pitch with
   hairlines at y = 644.5, 787, 930, 1072.5, 1215 ... A 720 / 1215 box anchored
   at the top therefore ends exactly on the hairline under surah 20, so the
   crop never cuts a row through its glyphs. */
.shot--index { aspect-ratio: 720 / 1215; }

.still { position: relative; border-radius: 18px; overflow: clip; box-shadow: var(--cr-e3); background: var(--sc-surface); }
.still__photo, .still img { display: block; width: 100%; height: auto; }

/* A paper sheet: the app's page, cut clean, with a hairline and a soft lift.
   The capture supplies its own paper; the frame only adds the edge. */
.sheet {
  position: relative;
  border-radius: 10px;
  background: var(--cr-paper);
  box-shadow: var(--cr-sheet-shadow), var(--cr-sheet-ring);
  overflow: clip;
}
.sheet img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sheet--night { background: #000000; box-shadow: 0 2px 4px rgb(0 0 0 / .5), 0 24px 48px -16px rgb(0 0 0 / .7), 0 60px 100px -30px rgb(0 0 0 / .9), 0 0 0 1px rgb(255 255 255 / .12); }

/* Segmented control: the app's stadium pill, with a thumb that slides. */
.seg {
  position: relative;
  display: inline-flex; align-items: center; gap: 2px;
  align-self: flex-start; width: max-content; max-width: 100%;
  padding: 4px;
  border: 1px solid var(--cr-hair);
  border-radius: 999px;
  background: color-mix(in oklab, var(--sc-canvas) 86%, transparent);
  box-shadow: var(--cr-e1);
}
.seg[hidden] { display: inline-flex; visibility: hidden; }
.seg__thumb {
  position: absolute; top: 4px; left: 0; height: calc(100% - 8px); width: 0;
  border-radius: 999px;
  background: var(--cr-thumb);
  opacity: 0;
  transition: transform 360ms var(--ease-sheet), width 360ms var(--ease-sheet), opacity 120ms linear;
}
.seg--ready .seg__thumb { opacity: 1; }
.seg button {
  position: relative; z-index: 1;
  min-height: 44px; min-width: 44px; padding: 0 18px;
  border: 0; border-radius: 999px;
  background: transparent;
  color: var(--sc-ink-soft);
  font: 600 .875rem var(--sc-font-text);
  letter-spacing: 0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: color 240ms var(--sc-ease-out);
}
.seg button[aria-pressed="true"] { color: var(--cr-thumb-ink); }
.seg:not(.seg--ready) button[aria-pressed="true"] { background: var(--cr-thumb); }
.seg button:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .seg button:not([aria-pressed="true"]):hover { color: var(--sc-ink); } }

.linkbtn {
  min-height: 44px; padding: 0 6px;
  border: 0; background: none;
  color: var(--sc-ink); font: 600 .875rem var(--sc-font-text);
  text-decoration: underline; text-underline-offset: 4px;
  cursor: pointer;
}
.linkbtn:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.linkbtn[hidden] { display: none; }

/* Status lines stay for screen readers; only a failure is shown on screen. */
.feedback { display: flex; align-items: center; gap: 10px; }
.feedback .feedback__text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.feedback--error { min-height: 44px; margin-top: 8px; }
.feedback--error .feedback__text { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }

/* Google Play badge, drawn in the page's own type so it never falls back to
   Arial: black plate, the Play mark, an eyebrow and the name, all centred. */
.badge { display: inline-block; line-height: 0; border-radius: 8px; transition: transform 240ms var(--sc-ease-out), box-shadow 240ms var(--sc-ease-out); }
.badge img { display: block; width: auto; height: 62px; }
@media (hover: hover) and (pointer: fine) { .badge:hover { transform: translateY(-1px); } }
.badge:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

/* ------------------------------------------------------------------ hero -- */
.hero {
  min-height: 100svh;
  display: flex; align-items: center;
  padding-block: calc(var(--cr-sec) + 64px) var(--cr-sec);
}
.hero__grid { display: grid; grid-template-columns: 6fr 6fr; align-items: center; gap: var(--sc-8); }
.hero__copy { display: flex; flex-direction: column; gap: var(--sc-5); max-width: 34rem; }
.hero__get { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sc-3); margin-top: var(--sc-2); }
.hero__preview { position: relative; width: min(100%, 460px); justify-self: center; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
/* The stack is 86% wide and centred, so its lead edge sits at 7%. The control
   group is pulled to the same line rather than to the column's own edge. */
.hero__seg { align-self: flex-start; margin-left: 7%; }
.seg--float { align-self: flex-start; }

/* Two sheets of the same page, Day in front, Night behind and a little
   askew. Choosing a theme brings that sheet forward; the other slips back. */
.stack { position: relative; width: 86%; margin: 4% auto 0; aspect-ratio: 1272 / 1660; }
.stack__sheet { position: absolute; inset: 0; transition: transform 640ms var(--ease-sheet), box-shadow 640ms var(--ease-sheet); will-change: transform; }
.stack__day { z-index: 2; }
.stack__night { z-index: 1; transform: translate(7%, -5%) rotate(2.4deg) scale(.965); }
[data-theme="night"] .stack__day { z-index: 1; transform: translate(-7%, 5%) rotate(-2.4deg) scale(.965); }
[data-theme="night"] .stack__night { z-index: 2; transform: none; }

/* ----------------------------------------------------------------- modes -- */
.modes { padding-block: var(--sc-7) var(--cr-sec); }
.modes__grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--sc-8); align-items: center; }
.modes__copy { display: flex; flex-direction: column; gap: var(--sc-5); }
.modes__photo { width: min(100%, 400px); justify-self: end; }

/* ---------------------------------------------------------------- listen -- */
.listen { min-height: 190svh; }
.listen__stage {
  position: sticky; top: 72px;
  height: calc(100svh - 88px);
  display: flex; align-items: center;
}
.listen__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sc-7); align-items: center; }
.listen__copy { display: flex; flex-direction: column; gap: var(--sc-5); }
/* Two stacked bands, not two absolute boxes. The cards keep their staggered
   lead edges (translation to the right, recite to the left) but no longer share
   vertical space, so neither can cover the other's text. The two parallax rates
   (-0.28 and -0.08) differ by 0.2, and the engine's travel is rate * 100px, so
   the pair opens and closes by at most 10px either side of the static gap:
   a 32px row-gap leaves >=22px of clearance at every scroll position. */
.listen__media { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 32px; align-content: center; }
.listen__detail { justify-self: end; width: min(100%, 30rem); aspect-ratio: 1272 / 570; }
.recite {
  /* relative, not static: .recite__box is absolutely positioned against it. */
  position: relative;
  justify-self: start;
  width: clamp(24rem, 34vw, 30rem);
  background: color-mix(in oklab, var(--cr-night-surface) 92%, transparent);
  border: 1px solid color-mix(in oklab, var(--cr-gold) 22%, transparent);
  border-radius: 14px;
  box-shadow: var(--cr-e3), inset 0 1px 0 rgb(255 255 255 / .05);
  padding: var(--sc-6);
  z-index: 2;
}
.recite__ayah {
  font-family: "UthmanicHafs", serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 2.6vw, 2.5rem);
  line-height: 2.1;
  color: var(--cr-night-ink);
  text-align: right;
  margin: var(--sc-4) 0 var(--sc-4);
  /* The engine tracks body text; any non-zero letter-spacing makes Chrome
     drop Arabic ligatures, and "illa" lost its lam-alif. Zero it here. */
  letter-spacing: 0;
  font-feature-settings: "rlig" 1, "liga" 1, "calt" 1;
}
.recite__ayah .w { transition: color 220ms var(--sc-ease-out); }
.recite__ayah .w.is-active { color: #FFFFFF; }
.recite__ayah .mark { color: var(--cr-gold); }
.recite__box {
  position: absolute; left: 0; top: 0;
  border: 1.5px solid var(--cr-gold);
  border-radius: 6px;
  background: rgb(198 138 60 / .08);
  box-shadow: 0 0 0 4px rgb(198 138 60 / .08), 0 0 24px -4px rgb(198 138 60 / .45);
  pointer-events: none;
  opacity: 0;
  transition: transform 180ms var(--sc-ease-out), width 180ms var(--sc-ease-out), height 180ms var(--sc-ease-out), opacity 240ms var(--sc-ease-out);
}
.recite--set .recite__box { opacity: 1; }
.recite__rule { display: block; height: 1px; background: color-mix(in oklab, var(--cr-gold) 26%, transparent); }
.recite__rule i { display: block; height: 1px; background: var(--cr-gold); transform-origin: right center; transform: scaleX(0); }
.recite__note { margin-top: var(--sc-4); color: var(--cr-night-soft); }

/* --------------------------------------------------------- demonstrations -- */
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.demo-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sc-5); max-width: 31rem; }
.memo, .tajweed, .scripts { padding-block: var(--cr-sec); }
.preview { position: relative; width: min(100%, 440px); justify-self: center; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.preview__controls { display: flex; flex-wrap: wrap; gap: 14px 24px; }
.preview__controls[hidden] { display: flex; visibility: hidden; }
.preview__group { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
/* Same trick as .seg[hidden]: hold the space so showing the control does not
   shift the mockup under it. The eyebrow hides with its control. */
.preview__group[hidden] { display: flex; visibility: hidden; }
/* Item 2: the fluid frame changes height with the chosen render, so the box it
   sits in reserves the tallest state (set by site.js as --reserve) and the
   sheet is centred inside it. The section's height is then the same for all
   six Script x View combinations. */
.preview__reserve { display: flex; align-items: flex-start; width: 100%; min-height: var(--reserve, 0px); }
.preview__reserve > .preview__frame { width: 100%; }
.preview__frame { aspect-ratio: 1272 / 1660; }
.preview__frame--wide { aspect-ratio: 1272 / 840; }
.preview__frame--fluid { aspect-ratio: auto; transition: height 560ms var(--ease-sheet); }
.preview__frame--fluid .preview__img { height: auto; }
.preview__frame--fluid.is-fluid { height: 0; }
.preview__frame--fluid.is-fluid .preview__img { position: absolute; inset: 0; height: 100%; }
.preview__img.is-entering { position: absolute; inset: 0; opacity: 0; transition: opacity 380ms var(--sc-ease-out); }
.preview__img.is-entering.is-in { opacity: 1; }
.preview--tajweed { width: 100%; }
.demo-grid--tajweed { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
/* Memorize reads copy-first in the DOM (so tab and screen-reader order meet the
   heading before the controls). Desktop puts the mockup back on the left with
   explicit column placement rather than source order. */
.demo-grid--memo > .preview { grid-column: 1; grid-row: 1; }
.demo-grid--memo > .demo-copy { grid-column: 2; grid-row: 1; }


/* Three columns, shared by the header row and every rule row, so "Day" and
   "Night" sit directly over the swatches they name. */
.legend { width: 100%; --legend-col: 2.5rem; }
.legend li { display: grid; grid-template-columns: var(--legend-col) var(--legend-col) minmax(0, 1fr); align-items: center; gap: var(--sc-3); border-top: 1px solid var(--cr-hair); padding-block: 7px; }
.legend li:last-child { border-bottom: 1px solid var(--cr-hair); }
.legend__head { border-top: 0 !important; padding-block: 0 4px !important; }
.legend__col { font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cr-micro); text-align: center; }
.sw { width: 20px; height: 20px; border-radius: 999px; flex: none; justify-self: center; display: flex; align-items: center; justify-content: center; }
.sw::after { content: ""; width: 12px; height: 12px; border-radius: 3px; }
.sw--day { background: #F7F4ED; }
.sw--day::after { background: var(--day); }
.sw--night { background: #000000; box-shadow: inset 0 0 0 1px color-mix(in oklab, #E8E2D5 22%, transparent); }
.sw--night::after { background: var(--night); }
.legend__label { font-size: 0.9375rem; line-height: 1.4; color: var(--sc-ink-soft); }

/* ------------------------------------------------------------------ find -- */
.find { padding-block: var(--sc-7) var(--cr-sec); }
.find__grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--sc-7); align-items: center; }
.find__copy { display: flex; flex-direction: column; gap: var(--sc-4); }
.find__shot { justify-self: end; }
.find__shot img { object-position: center top; }

/* ------------------------------------------------------------------- get -- */
/* #get fills the viewport less the footer (site.js publishes the footer block's
   measured height as --cr-foot-h): the closing photograph needs the height, and
   the footer's black then arrives exactly at the bottom of the screen. */
.get { min-height: max(0px, calc(100svh - var(--cr-foot-h, 0px))); display: flex; align-items: center; padding-block: var(--cr-sec) 0; overflow: clip; }
.get__inner { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: var(--sc-5); }
.get .lede { max-width: 34ch; }
/* The closing photograph sits behind the copy on wide viewports. Its left third
   is near-black in the source, so the copy needs only a light scrim; the mask
   fades the figure out at the top and bottom into the ground's own gradient
   (no colour to match, and the footer join below stays #000 on #000). */
.get__photo { position: absolute; inset: 0; z-index: 0; margin: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 80%, transparent 100%); }
.get__photo picture, .get__photo img { display: block; width: 100%; height: 100%; }
.get__photo img { object-fit: cover; object-position: 64% 30%; }
.get__photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.42) 32%, rgba(0,0,0,0) 58%); }
/* The footer now sits after main, in its own ground. That ground carries the
   end colour of ground F (#000, the last stop of .ground.night's gradient) so
   the join is invisible and #get keeps its own gradient untouched. */
/* .ground.night is two classes, so the flat colour needs both to beat the
   gradient; and the gap above the footer is padding, not margin — as a margin
   it collapsed straight through this box and drew a cream band across the
   black tail. */
.ground.night.ground--foot { background: var(--cr-night); padding-top: var(--sc-6); }
.foot {
  display: flex; flex-direction: column; align-items: center; gap: var(--sc-3);
  width: 100%; max-width: var(--sc-maxw); margin-inline: auto;
  padding-inline: var(--sc-gutter); padding-bottom: var(--cr-sec);
}
/* The footer carries the official horizontal lockup at 240 px, above its 200 px
   minimum display width. */
.foot__mark { display: flex; align-items: center; margin: 0; }
.foot__mark img { width: 240px; height: 72px; }
.foot .small { max-width: 46ch; text-align: center; }

/* ---------------------------------------------------------------- mobile -- */
@media (max-width: 860px) {
  .nav { top: 10px; }
  /* pill bottom edge (10 top + 56 tall) plus a 16px gap. */
  :root { --cr-anchor: 82px; --shot-w: min(330px, 76vw); }
  .nav__links { display: none; }
  /* The store link stays on screen next to the menu button instead of being
     buried one tap deep in the sheet. */
  .nav__cta { margin-left: auto; padding-inline: 16px; min-width: 44px; }
  .nav__cta-long { display: none; }
  .nav__cta-short { display: inline; }
  .nav__menu { display: flex; margin-left: 2px; }
  .nav__pill { padding-right: 6px; gap: var(--sc-4); }
  .nav:not(.nav--in):not(.nav--ready) .nav__menu { display: none; }
  .nav:not(.nav--in):not(.nav--ready) .nav__fallback { display: block; position: absolute; top: 6px; right: calc(var(--sc-gutter) + 12px); pointer-events: auto; }
  .nav__fallback summary { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: .8125rem; cursor: pointer; }
  .nav__fallback nav { position: absolute; right: 0; top: 52px; display: flex; flex-direction: column; min-width: 160px; padding: 8px; border: 1px solid var(--cr-hair); border-radius: 12px; background: var(--sc-canvas); box-shadow: var(--cr-e2); }
  .nav__fallback a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; color: var(--sc-ink); font-size: .8125rem; }

  .hero { min-height: auto; padding-block: 100px var(--sc-7); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--sc-6); }
  .hero__copy { gap: 18px; }
  .dsp--hero { font-size: clamp(2.6rem, 11vw, 3.8rem); }
  .hero__preview { width: min(100%, 420px); }
  .hero__seg { margin-left: 8%; }
  .stack { width: 84%; }
  .ghost { font-size: clamp(7rem, 40vw, 14rem); }
  .ghost--hero { right: -14%; top: 40%; }

  .modes { padding-block: var(--sc-6) var(--sc-7); }
  .modes__grid { grid-template-columns: 1fr; gap: var(--sc-6); }
  .modes__photo { justify-self: center; width: min(100%, 360px); }

  /* No sticky stage down here, so nothing needs the reserved scroll length. */
  .listen { min-height: 0; }
  .listen__stage { position: static; height: auto; padding-block: var(--cr-sec); }
  .listen__grid { grid-template-columns: 1fr; gap: var(--sc-6); }
  .listen__media { min-height: 0; display: flex; flex-direction: column; gap: var(--sc-5); }
  .listen__detail { width: 100%; order: 2; }
  .recite { order: 1; width: 100%; padding: 20px; }
  .recite__ayah { font-size: clamp(1.8rem, 6.5vw, 2.5rem); }

  .demo-grid, .demo-grid--tajweed { grid-template-columns: minmax(0, 1fr); gap: var(--sc-6); }
  .demo-copy { max-width: 34rem; }
  .memo, .tajweed, .scripts { padding-block: var(--sc-8); }

  /* Memorize, small screens: heading and explanation, then the controls and the
     mockup, then the supporting list. `display: contents` lets the copy block's
     own children take their place in the single column without a second
     wrapper, so the DOM order (copy first) still matches what is on screen. */
  .demo-grid--memo { row-gap: 0; }
  .demo-grid--memo > .preview { grid-column: auto; grid-row: auto; order: 4; margin-top: var(--sc-6); }
  .demo-grid--memo > .demo-copy { display: contents; }
  .demo-grid--memo .demo-copy > * { max-width: 34rem; }
  .demo-grid--memo .demo-copy > .micro { order: 1; }
  .demo-grid--memo .demo-copy > .dsp { order: 2; margin-top: var(--sc-5); }
  .demo-grid--memo .demo-copy > .body { order: 3; margin-top: var(--sc-5); }
  .demo-grid--memo .demo-copy > .facts { order: 5; margin-top: var(--sc-6); }

  .legend { columns: 2; column-gap: var(--sc-4); }
  .legend li { break-inside: avoid; }
  /* The header row spans the whole multi-column box, so "Day"/"Night" is not
     stranded over the left column only. */
  .legend__head { column-span: all; }
  .seg button { padding-inline: 14px; }

  .find__grid { grid-template-columns: 1fr; gap: var(--sc-5); }
  .find__shot { justify-self: center; }
  .ghost--get { margin-left: -7rem; }
  .get { min-height: 0; padding-block: var(--sc-8) 0; flex-direction: column; align-items: stretch; }
  .get__inner { align-items: center; text-align: center; }
  /* Below 860 the photograph leaves the background and follows the badge as a
     full-bleed 3:4 crop, fading in from the ground and out to the footer's black. */
  .get__photo { position: relative; inset: auto; order: 2; margin-top: var(--sc-7);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); }
  .get__photo img { height: auto; aspect-ratio: 3 / 4; object-position: 50% 50%; }
  .get__photo::after { background: none; }
}

/* Below 480 the two-up legend forces "Madd Munfasil (2/4/6)" onto three lines. */
@media (max-width: 480px) {
  .legend { columns: 1; }
  .legend__head { column-span: none; }
}

@media (min-width: 861px) and (max-height: 760px) {
  .hero { padding-block: calc(var(--cr-sec) + 48px) var(--cr-sec); }
  .dsp--hero { font-size: clamp(1.9rem, 6svh, 3.6rem); }
  .hero__preview { max-width: 400px; }
  .listen__stage { top: 64px; }
}

/* Without the script — or when ScrollCraft.mount threw, which drops `.js` in the
   inline guard in index.html — every entrance is already complete. */
html:not(.js) [data-sc-in], html:not(.js) [data-sc-stagger] > *, html:not(.js) [data-sc-cue] { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .stack__sheet, .seg__thumb, .preview__img.is-entering, .preview__frame--fluid, .recite__box, .recite__ayah .w { transition: none !important; }
  /* The drawer and its links were the one place reduction did not reach: a
     0.32s translate plus a 60-240ms stagger. Both go; the sheet still hides
     with [hidden], so it appears and leaves at once. */
  .nav__sheet, .nav__sheetlinks a, .nav__pill, .nav__cta, .badge, .skip { transition: none !important; }
  .nav--open .nav__sheetlinks a, .nav--in .nav__links a, .nav--in .nav__cta { transition-delay: 0s !important; }
  .nav__sheetlinks a { transform: none !important; }
  .nav__cta:hover, .nav__cta:active, .badge:hover { transform: none !important; }
}

/* ------------------------------------------------- launch switch -- */
/* <html data-launch="soon"> before the listing is live, "live" after. */
html[data-launch="soon"] .badge,
html[data-launch="soon"] .nav__cta--live,
html[data-launch="soon"] .nav__sheetcta--live { display: none; }
html[data-launch="live"] .soon,
html[data-launch="live"] .notify,
html[data-launch="live"] .nav__cta--soon,
html[data-launch="live"] .nav__sheetcta--soon { display: none; }

.soon { margin: 0 0 10px; }
.soon__pill { display: inline-block; font-family: var(--sc-font-text); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-accent); border: 1px solid color-mix(in oklab, var(--sc-accent) 40%, transparent); border-radius: var(--sc-r-pill); padding: 8px 14px; }
.night .soon__pill { color: var(--cr-gold-dark); border-color: color-mix(in oklab, var(--cr-gold-dark) 45%, transparent); }

.notify { width: min(100%, 520px); margin: 18px auto 0; text-align: left; }
.notify__lede { font-family: var(--sc-font-display); font-size: 1.05rem; line-height: 1.45; margin: 0 0 12px; color: inherit; }
.notify__row { display: flex; gap: 8px; flex-wrap: wrap; }
.notify__input { flex: 1 1 220px; min-width: 0; font: 500 1rem/1.2 var(--sc-font-text); padding: 13px 14px; border-radius: 10px; border: 1px solid color-mix(in oklab, currentColor 28%, transparent); background: color-mix(in oklab, var(--cr-paper) 92%, transparent); color: var(--sc-ink); }
.night .notify__input { background: color-mix(in oklab, var(--cr-night-surface) 88%, transparent); color: var(--cr-night-ink); }
.notify__input:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.notify__button { flex: 0 0 auto; font: 600 0.95rem/1 var(--sc-font-text); letter-spacing: 0.02em; padding: 14px 20px; border-radius: 10px; border: 0; background: var(--sc-accent); color: var(--sc-accent-ink); cursor: pointer; transition: transform 240ms var(--sc-ease-out); }
.night .notify__button { background: var(--cr-gold-dark); color: #1A140A; }
@media (hover: hover) and (pointer: fine) { .notify__button:hover { transform: translateY(-1px); } }
.notify__button:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.notify__hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.notify__status { min-height: 1.4em; margin: 10px 0 0; }
.notify[data-state="sent"] .notify__row { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 4px 0; }
.foot__links a { font-family: var(--sc-font-text); font-size: 0.85rem; letter-spacing: 0.02em; color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in oklab, currentColor 30%, transparent); padding-bottom: 1px; }
.foot__links a:hover, .foot__links a:focus-visible { border-bottom-color: currentColor; outline: none; }