/* The'Salat — Bayt: the bilingual editorial.
   ------------------------------------------------------------------
   Typography is the design. Poster-scale New York serif English in
   duet with monumental gold Arabic, set on warm paper with ruled
   lines and a wide asymmetric margin. One emerald accent, spent with
   intent. Screenshots are artifacts placed in the composition.
   Dark mode is "night paper": ink and paper swap roles, the gold
   stays. Fully self-contained: system fonts, inline SVG, no CDNs. */

:root {
  --paper: #f6f3ea;
  --paper-2: #efeadd;
  --ink: #17120c;
  --ink-2: #574e3d;
  --ink-3: #6d634b;
  --rule: rgba(23, 18, 12, 0.22);
  --rule-strong: #17120c;
  --emerald: #1d5a41;
  --emerald-soft: rgba(29, 90, 65, 0.09);
  --gold: #97781f;
  --gold-ghost: rgba(151, 120, 31, 0.22);
  --shadow: 0 24px 60px rgba(23, 18, 12, 0.18);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease: cubic-bezier(0.3, 0, 0.4, 1);

  /* Motion tokens (transitions.dev scale) */
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-medium: 350ms;
  --duration-slow: 400ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #16110a;
    --paper-2: #1d1710;
    --ink: #f0e9d8;
    --ink-2: #beb298;
    --ink-3: #8d8168;
    --rule: rgba(240, 233, 216, 0.24);
    --rule-strong: #f0e9d8;
    --emerald: #7fc4a2;
    --emerald-soft: rgba(127, 196, 162, 0.1);
    --gold: #d3b465;
    --gold-ghost: rgba(211, 180, 101, 0.19);
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  }
}

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

html { scroll-behavior: smooth; }
@supports (interpolate-size: allow-keywords) {
  html { interpolate-size: allow-keywords; }
}

body {
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.serif { font-family: "New York", "Iowan Old Style", Georgia, "Times New Roman", serif; }
.ar { font-family: "Geeza Pro", "Baghdad", "Al Bayan", "New York", serif; }

h1, h2, h3 { text-wrap: balance; }

a { color: var(--emerald); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a, button, summary { touch-action: manipulation; }
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-thickness: 2px; }
}

:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 3px;
}

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); position: relative; }

.skip {
  position: absolute; left: 16px; top: -48px; z-index: 100;
  background: var(--emerald); color: var(--paper);
  padding: 10px 18px; font-weight: 600; text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip:focus-visible { top: 0; }

/* ------------------------------------------------------------------
   Masthead */
nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease);
}
nav.scrolled { border-bottom-color: var(--rule); }
.nav-inner { display: flex; align-items: center; gap: 24px; height: 66px; }
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink); }
.brand .name { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.brand .ar { font-size: 17px; color: var(--gold); }
.nav-links { margin-left: auto; display: flex; gap: 20px; font-size: 14.5px; align-items: center; }
.nav-links a {
  color: var(--ink-2); text-decoration: none;
  position: relative; padding: 10px 0;
  transition: color var(--duration-quick) ease;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px;
  height: 1px; background: var(--emerald);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--duration-fast) var(--ease-smooth-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: var(--emerald); }
  .nav-links a:hover::after { transform: scaleX(1); }
}
.chip {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-2); border: 1px solid var(--rule); padding: 6px 12px; border-radius: 999px;
  white-space: nowrap;
}
.menu-btn {
  display: none; margin-left: auto;
  width: 42px; height: 42px;
  background: transparent; border: 1px solid var(--rule);
  color: var(--ink); font-size: 19px; line-height: 1; cursor: pointer;
  transition: transform 0.15s var(--ease-out);
}
.menu-btn:active { transform: scale(0.94); }

/* ------------------------------------------------------------------
   Editorial grammar */
.rule-x {
  height: 1px; background: var(--rule); border: 0;
  transform-origin: left center;
}
.reveal-rule { transform: scaleX(0); transition: transform 1.1s var(--ease-out); }
.reveal-rule.in { transform: scaleX(1); }

.meta {
  font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 700;
}
.meta .sep { color: var(--gold); margin: 0 6px; }

/* Monumental ghost Arabic behind a section. Drifts slower than the page
   (JS writes the `translate` property) so it reads as a deeper layer. */
.ghost {
  position: absolute; z-index: 0;
  font-size: clamp(150px, 22vw, 320px);
  line-height: 1.1;
  color: var(--gold-ghost);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  will-change: translate;
}

section, header.hero { position: relative; overflow: hidden; }

/* Line-rise reveal for display type */
.rise { display: block; overflow: hidden; }
.rise > span { display: block; transform: translateY(110%); transition: transform 0.9s var(--ease-out); }
.in .rise > span { transform: none; }
.in .rise:nth-of-type(2) > span { transition-delay: 0.08s; }
.in .rise:nth-of-type(3) > span { transition-delay: 0.16s; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.stagger > * { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(2) { transition-delay: 0.07s; }
.stagger.in > *:nth-child(3) { transition-delay: 0.14s; }
.stagger.in > *:nth-child(4) { transition-delay: 0.21s; }
.stagger.in > *:nth-child(5) { transition-delay: 0.28s; }
.stagger.in > *:nth-child(6) { transition-delay: 0.35s; }
.stagger.done > * { transition-delay: 0s; }

/* ------------------------------------------------------------------
   Hero */
header.hero { padding: clamp(30px, 4vw, 48px) 0 clamp(40px, 5vw, 64px); }
.hero .ghost { top: -0.18em; right: -0.06em; }
.hero .meta-row { margin-top: 10px; display: flex; align-items: center; gap: 16px; }
.hero .meta-row .rule-x { flex: 1; }
h1.display {
  margin-top: clamp(20px, 3vw, 34px);
  font-size: clamp(44px, 7vw, 92px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.025em;
}
h1.display em { font-style: italic; color: var(--emerald); letter-spacing: -0.02em; padding-right: 0.06em; }
.hero .after-rule { margin-top: clamp(20px, 2.6vw, 32px); }
.hero-foot {
  margin-top: clamp(22px, 3vw, 34px);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.standfirst { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.6; color: var(--ink-2); max-width: 44ch; }
.standfirst strong { color: var(--ink); font-weight: 600; }
.hero-ctas { margin-top: 26px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* Promise strip: its own slim band under the hero, not part of the hero stack */
.promise { padding: 0 0 clamp(28px, 4vw, 40px); }
.promise .free-line {
  border-top: 1px solid var(--rule);
  padding-top: 18px;
  font-size: 14px; color: var(--ink-2);
  display: flex; gap: 8px 22px; flex-wrap: wrap;
}
.free-line span { display: inline-flex; align-items: center; gap: 6px; }
.free-line svg { width: 13px; height: 13px; stroke: var(--gold); }

.hero-shot { position: relative; min-height: 320px; }
.hero-shot .phone {
  position: absolute; right: clamp(-36px, -2vw, 0px); top: -104px;
  transform: rotate(6deg);
  --pw: min(336px, 27vw);
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px;
  background: var(--emerald); color: var(--paper);
  font-weight: 600; font-size: 16px; text-decoration: none;
  transition: transform var(--duration-quick) var(--ease-out), filter var(--duration-quick) ease;
}
@media (prefers-color-scheme: dark) {
  .btn { color: #0d2419; }
}
.btn .chev { width: 14px; height: 14px; stroke: currentColor; transition: transform var(--duration-fast) var(--ease-smooth-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { filter: brightness(1.08); }
  .btn:hover .chev { transform: translateX(3px); }
}
.btn:active { transform: scale(0.97); }
.store-badge {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 10px 18px; border-radius: 14px;
  background: var(--ink); color: var(--paper);
}
.store-badge svg { width: 26px; height: 26px; fill: currentColor; }
.store-badge .bt { text-align: left; line-height: 1.15; }
.store-badge .bt small { display: block; font-size: 10.5px; letter-spacing: 0.03em; opacity: 0.75; }
.store-badge .bt b { font-size: 19px; font-weight: 600; font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
.store-badge[aria-disabled="true"] { opacity: 0.75; cursor: default; }
/* The badge is a live link now that the app has shipped. */
a.store-badge {
  text-decoration: none;
  transition: transform var(--duration-quick) var(--ease-out), opacity var(--duration-quick) ease;
}
@media (hover: hover) and (pointer: fine) {
  a.store-badge:hover { opacity: 0.85; }
}
a.store-badge:active { transform: scale(0.97); }

/* ------------------------------------------------------------------
   Editorial spreads */
.spread { padding: clamp(64px, 8vw, 104px) 0; }
.spread .top-rule { margin-bottom: clamp(40px, 6vw, 64px); }
.spread .grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
  position: relative; z-index: 1;
}
.spread.flip .grid > .shot { order: -1; }
.spread h2 {
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.spread h2 em { font-style: italic; color: var(--emerald); }
.spread .lede { margin-top: 20px; font-size: 18.5px; color: var(--ink-2); max-width: 46ch; }
.spread ul.points { margin-top: 26px; list-style: none; max-width: 52ch; }
.spread ul.points li {
  padding: 13px 0; border-top: 1px solid var(--rule);
  color: var(--ink-2); font-size: 16.5px; line-height: 1.55;
}
.spread ul.points li:last-child { border-bottom: 1px solid var(--rule); }
.spread ul.points strong { color: var(--ink); font-weight: 600; }
.spread .shot { justify-self: center; position: relative; }
.spread .shot .phone { will-change: transform; }
.spread .shot figcaption {
  margin-top: 14px; font-size: 13.5px; color: var(--ink-3);
  text-align: center; max-width: 34ch; margin-inline: auto;
}

/* ghost placement per spread: anchored over the phone column, clear of copy */
#nearby .ghost { top: 0.05em; right: -0.06em; }
#day .ghost { bottom: -0.12em; left: -0.06em; }
#widget .ghost { top: 0.02em; right: -0.06em; }
#reminders .ghost { bottom: -0.12em; left: -0.06em; }

/* Centered teaching spread */
.spread.center-spread { text-align: center; }
.spread.center-spread .ghost { top: -0.1em; left: 50%; transform: translateX(-50%); }
.spread.center-spread h2 { font-size: clamp(38px, 5.4vw, 72px); max-width: 14ch; margin-inline: auto; }
.spread.center-spread .lede { margin-inline: auto; max-width: 54ch; }
.spread.center-spread .shot { margin-top: 44px; position: relative; z-index: 1; }
.spread.center-spread .phone { --pw: min(300px, 74vw); }

/* ------------------------------------------------------------------
   iPhone frame — iPhone Pro Max geometry (6.9" screens are 1320x2868;
   outer shell lands at the real 77.6x163mm proportions). The ::before
   layer draws the physical side controls just proud of the shell:
   Action button and volume up/down on the left, side button on the
   right, each with a vertical metal sheen. */
.phone {
  --pw: min(320px, 76vw);
  width: var(--pw);
  position: relative;
  border-radius: calc(var(--pw) * 0.172);
  padding: calc(var(--pw) * 0.042);
  background: linear-gradient(165deg, #33383c, #15181a 36%, #0b0d0e 84%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0 2px rgba(255, 255, 255, 0.05),
    inset 0 0 0 5px rgba(0, 0, 0, 0.6);
  display: inline-block;
}
.phone::before {
  content: "";
  position: absolute; inset: calc(var(--pw) * -0.007);
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background:
    /* action button (left, high) */
    linear-gradient(180deg, #3b4043, #202426 15%, #14171a 85%, #060708) left 0 top 18% / calc(var(--pw) * 0.018) 4.2% no-repeat,
    /* volume up / down (left) */
    linear-gradient(180deg, #3b4043, #202426 15%, #14171a 85%, #060708) left 0 top 27.5% / calc(var(--pw) * 0.018) 7% no-repeat,
    linear-gradient(180deg, #3b4043, #202426 15%, #14171a 85%, #060708) left 0 top 37% / calc(var(--pw) * 0.018) 7% no-repeat,
    /* side button (right) */
    linear-gradient(180deg, #3b4043, #202426 15%, #14171a 85%, #060708) right 0 top 29% / calc(var(--pw) * 0.018) 10.5% no-repeat;
}
.phone::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.08) 47%, transparent 55%);
}
.phone img, .phone video {
  display: block; width: 100%;
  aspect-ratio: 1320 / 2868; object-fit: cover;
  border-radius: calc(var(--pw) * 0.13);
}

/* ------------------------------------------------------------------
   Themes */
#themes { padding: clamp(64px, 8vw, 104px) 0; text-align: center; }
#themes h2 { font-size: clamp(34px, 4.6vw, 60px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
#themes .lede { margin: 18px auto 0; font-size: 18.5px; color: var(--ink-2); max-width: 56ch; }
.themes-strip {
  margin-top: 48px;
  display: flex; justify-content: center; align-items: flex-end; gap: clamp(14px, 3vw, 34px);
  flex-wrap: wrap;
}
.themes-strip .phone { --pw: min(250px, 70vw); }
.themes-strip .t { text-align: center; }
.themes-strip .t.mid { transform: translateY(-22px); }
.themes-strip figcaption { margin-top: 12px; font-size: 14px; color: var(--ink-2); font-style: italic; }
.theme-roll { margin: 36px auto 0; max-width: 66ch; font-size: 15.5px; color: var(--ink-2); line-height: 1.8; }
.theme-roll b { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------
   How the times stay right — the trust ledger, ruled like the details */
#trust { padding: clamp(64px, 8vw, 104px) 0; }
#trust .ghost { bottom: -0.14em; left: -0.06em; }
#trust > .wrap { position: relative; z-index: 1; }
#trust .lede { margin-top: 20px; font-size: 18.5px; color: var(--ink-2); max-width: 66ch;
  text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }

/* ------------------------------------------------------------------
   Why The'Salat — two ruled columns */
#mission { padding: clamp(64px, 8vw, 104px) 0; }
#mission .lede { margin-top: 20px; font-size: 18.5px; color: var(--ink-2); max-width: 66ch;
  text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }
.versus {
  margin-top: 48px;
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 2px solid var(--rule-strong);
}
.versus .col { padding: 30px clamp(18px, 3vw, 40px) 8px 0; }
.versus .col + .col { border-left: 1px solid var(--rule); padding-left: clamp(18px, 3vw, 40px); padding-right: 0; }
.versus h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 18px; }
.versus .col.other h3 { color: var(--ink-3); }
.versus .col.salat h3 { color: var(--emerald); }
.versus ul { list-style: none; }
.versus li {
  padding: 12px 0 12px 30px; position: relative;
  color: var(--ink-2); font-size: 16px; line-height: 1.55;
  border-top: 1px solid var(--rule);
}
.versus li::before {
  position: absolute; left: 0; top: 13px;
  font-size: 14px; font-weight: 700;
}
.versus .col.other li::before { content: "✕"; color: var(--ink-3); }
.versus .col.salat li::before { content: "✓"; color: var(--emerald); }
.versus .col.salat li strong { color: var(--ink); }
#mission .coda { margin-top: 44px; font-size: 18.5px; color: var(--ink-2); max-width: 66ch;
  text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }
#mission .coda .ar { color: var(--gold); }

/* ------------------------------------------------------------------
   Details — ruled editorial list */
#features { padding: clamp(64px, 8vw, 104px) 0; }
#features h2 { font-size: clamp(34px, 4.6vw, 60px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
.details-list {
  margin-top: 40px;
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: clamp(32px, 6vw, 88px);
}
.detail { padding: 22px 0; border-top: 1px solid var(--rule); }
.detail h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.detail h3::before { content: "◆"; color: var(--gold); font-size: 10px; vertical-align: 3px; margin-right: 10px; }
.detail p { margin-top: 7px; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }

/* ------------------------------------------------------------------
   FAQ */
#faq { padding: clamp(64px, 8vw, 104px) 0; }
#faq h2 { font-size: clamp(34px, 4.6vw, 60px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
.faq { margin-top: 36px; max-width: 780px; }
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 0;
  font-size: 18px; font-weight: 600; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  transition: color var(--duration-quick) ease;
}
@media (hover: hover) and (pointer: fine) {
  .faq summary:hover { color: var(--emerald); }
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; color: var(--gold); font-size: 26px; font-weight: 300; line-height: 1;
  transition: transform var(--duration-fast) var(--ease-smooth-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
/* Close (to base state) reads the base duration: faster than the open */
.faq details::details-content {
  block-size: 0; overflow: clip;
  transition: block-size var(--duration-fast) var(--ease-smooth-out), content-visibility var(--duration-fast) allow-discrete;
}
.faq details[open]::details-content {
  block-size: auto;
  transition-duration: var(--duration-medium);
}
.faq details p { color: var(--ink-2); font-size: 16px; padding: 0 0 22px; margin: 0; max-width: 68ch;
  text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }

/* ------------------------------------------------------------------
   For masjids — the one drenched moment */
#masjids { padding: clamp(64px, 8vw, 104px) 0 0; }
.band {
  position: relative; overflow: hidden;
  background: #1d5a41; color: #f6f3ea;
  padding: clamp(56px, 8vw, 96px) 0;
}
.band .ghost { color: rgba(246, 243, 234, 0.07); top: -0.15em; right: -0.05em; }
.band .inner { position: relative; z-index: 1; max-width: 720px; }
.band h2 { font-size: clamp(34px, 4.6vw, 58px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.04; }
.band p { margin-top: 20px; font-size: 18px; line-height: 1.65; color: rgba(246, 243, 234, 0.85); max-width: 56ch; }
.band .btn { margin-top: 30px; background: #e9d18b; color: #241c07; }
.band .btn:hover { filter: brightness(1.04); }

/* ------------------------------------------------------------------
   Footer */
footer { padding: clamp(48px, 6vw, 72px) 0 64px; }
footer .rule-x.heavy { height: 2px; background: var(--rule-strong); margin-bottom: 40px; }
.foot-dua { text-align: center; font-size: 24px; color: var(--gold); }
.foot-dua .tr {
  display: block; margin-top: 8px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3);
}
.foot { margin-top: 40px; display: flex; gap: 24px; flex-wrap: wrap; align-items: center; font-size: 14.5px; color: var(--ink-3); }
.foot .links { margin-left: auto; display: flex; gap: 20px; }
.foot a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule); transition: color var(--duration-quick) ease, border-color var(--duration-quick) ease; }
@media (hover: hover) and (pointer: fine) {
  .foot a:hover { color: var(--emerald); border-bottom-color: var(--emerald); }
}

/* ------------------------------------------------------------------
   Legal / support pages */
.doc { max-width: 760px; margin: 0 auto; padding: 56px 24px 90px; }
.doc h1 { font-size: clamp(34px, 4.5vw, 48px); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; }
.doc .date { color: var(--ink-3); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.doc > .date + * { margin-top: 30px; }
.doc h2 { font-size: 23px; margin: 40px 0 12px; padding-top: 18px; border-top: 1px solid var(--rule); }
.doc p, .doc li { color: var(--ink-2); text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }
.doc ul, .doc ol { padding-left: 22px; margin: 12px 0; }
.doc ol li::marker { color: var(--gold); font-variant-numeric: tabular-nums; }
.doc li { margin: 8px 0; }
.doc strong, .doc em { color: var(--ink); }

/* ------------------------------------------------------------------
   /download — the one shareable link that hands people to the App Store.
   Almost nobody reads this page; it is gone in a blink. It still gets the
   paper and the serif, because the blink is the only thing some visitors
   will ever have seen of the site. */
.redirect {
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 40px 24px; text-align: center;
}
.redirect .mark {
  width: 88px; height: 88px; border-radius: 21px;
  box-shadow: var(--shadow);
  margin-bottom: 26px;
}
.redirect h1 { font-size: clamp(34px, 5vw, 46px); font-weight: 600; letter-spacing: -0.025em; }
.redirect .line {
  margin-top: 14px; margin-bottom: 30px;
  color: var(--ink-2); font-size: 17.5px; line-height: 1.6;
  max-width: 34ch;
}
.redirect .btn.is-waiting { background: var(--ink-3); cursor: default; }
.redirect .btn.is-waiting .chev { display: none; }
.redirect .back { margin-top: 30px; font-size: 14.5px; }
.redirect .back a { color: var(--ink-3); }

/* Demo page */
#motion { padding: clamp(56px, 7vw, 90px) 0; text-align: center; }
#motion h2 { font-size: clamp(34px, 4.6vw, 60px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
#motion .lede { margin: 18px auto 0; font-size: 18.5px; color: var(--ink-2); max-width: 58ch; }
#motion .phone { --pw: min(290px, 72vw); margin-top: 40px; }
.motion-ctl {
  margin-top: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 999px;
  background: transparent; border: 1px solid var(--rule);
  color: var(--ink-2); font-size: 14px; cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.15s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .motion-ctl:hover { border-color: var(--emerald); color: var(--emerald); }
}
.motion-ctl:active { transform: scale(0.96); }

/* ------------------------------------------------------------------
   Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .stagger > * { opacity: 1; transform: none; transition: none; }
  .rise > span { transform: none; transition: none; }
  .reveal-rule { transform: none; transition: none; }
  .faq details::details-content { transition: none; }
  .btn, .menu-btn, .motion-ctl, .btn .chev, .nav-links a::after { transition: none; }
  .btn:active, .menu-btn:active, .motion-ctl:active { transform: none; }
}

/* ------------------------------------------------------------------
   Responsive */
@media (max-width: 980px) {
  .hero-shot .phone { --pw: min(240px, 28vw); }
}
@media (max-width: 900px) {
  h1.display { max-width: none; }
  .hero-foot { grid-template-columns: 1fr; }
  .hero-shot { min-height: 0; margin-top: 10px; }
  .hero-shot .phone { position: static; transform: rotate(3deg); --pw: min(260px, 62vw); }
  .spread .grid { grid-template-columns: 1fr; }
  .spread .grid > .shot, .spread.flip .grid > .shot { order: -1; }
  .spread .shot .phone { --pw: min(280px, 64vw); }
  .versus { grid-template-columns: 1fr; }
  .versus .col + .col { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); margin-top: 8px; padding-top: 22px; }
  .details-list { grid-template-columns: 1fr; }
  .themes-strip .t.mid { transform: none; }
  .ghost { font-size: clamp(120px, 30vw, 200px); }
}
/* The nav collapses well before the rest of the layout does. Measured: the
   brand plus the eight links need 1065px, and below that the row does not
   wrap, it squeezes, so "The app" and "Why The'Salat" break across two lines
   inside their own boxes. 1080 keeps a margin over that. Re-measure if a link
   is ever added or renamed. */
@media (max-width: 1080px) {
  .menu-btn { display: grid; place-items: center; }
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start;
    gap: 18px; padding: 20px 24px 26px;
    background: color-mix(in srgb, var(--paper) 96%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--rule);
  }
  nav.open .nav-links { display: flex; }
  .nav-links a { font-size: 17px; }
}
@media (max-width: 700px) {
  .themes-strip {
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 8px 6px 20px; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .themes-strip::-webkit-scrollbar { display: none; }
  .themes-strip .t { flex: 0 0 auto; scroll-snap-align: center; }
  .themes-strip .phone { width: 58vw; }
  .free-line { gap: 10px 14px; font-size: 13px; }
  .foot { justify-content: center; text-align: center; }
  .foot .links { margin-left: 0; }
}