/* masjed.website website: the board under the dawn light (DESIGN.md), on the web.
   SF Pro on Apple devices (the system font); Inter Display / Inter and Cairo elsewhere, self-hosted. */

@font-face { font-family: "MP Display"; font-weight: 200; font-display: swap; src: url("/site/fonts/InterDisplay-ExtraLight.294b113506.woff2") format("woff2"); unicode-range: U+0000-024F, U+0259, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "MP Display"; font-weight: 300; font-display: swap; src: url("/site/fonts/InterDisplay-Light.9dba18b9d6.woff2") format("woff2"); unicode-range: U+0000-024F, U+0259, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "MP Display"; font-weight: 600; font-display: swap; src: url("/site/fonts/InterDisplay-SemiBold.5dec34032c.woff2") format("woff2"); unicode-range: U+0000-024F, U+0259, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "MP Display"; font-weight: 800; font-display: swap; src: url("/site/fonts/InterDisplay-ExtraBold.7dc753dbca.woff2") format("woff2"); unicode-range: U+0000-024F, U+0259, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "MP Text"; font-weight: 400; font-display: swap; src: url("/site/fonts/Inter-Regular.2f6a38a0f8.woff2") format("woff2"); unicode-range: U+0000-024F, U+0259, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "MP Text"; font-weight: 600; font-display: swap; src: url("/site/fonts/Inter-SemiBold.d7c2f19692.woff2") format("woff2"); unicode-range: U+0000-024F, U+0259, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "MP Arabic"; font-weight: 300; font-display: swap; src: url("/site/fonts/Cairo-Light.32ce81d1bc.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "MP Arabic"; font-weight: 400; font-display: swap; src: url("/site/fonts/Cairo-Regular.fbe7ecc6f1.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "MP Arabic"; font-weight: 600; font-display: swap; src: url("/site/fonts/Cairo-SemiBold.5469a1a634.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "MP Arabic"; font-weight: 800; font-display: swap; src: url("/site/fonts/Cairo-ExtraBold.cf966a9d66.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF; }

:root {
  color-scheme: light dark;
  /* The app's Palette.day (lib/core/design/tokens.dart). */
  --page: #E9EAEC;
  --tile: rgba(255, 255, 255, 0.51);
  --tile-solid: #F4F5F6;
  --ink: #212832;
  --ink-2: rgba(33, 40, 50, 0.69);
  --hairline: rgba(33, 40, 50, 0.10);
  --soft: rgba(33, 40, 50, 0.06);
  --lift-top: #212932;
  --lift-bottom: #000000;
  --on-lift: #F8F9FA;
  --active: #FFFFFF;
  --on-active: #040F25;
  --lime: #B9F90B;
  --on-lime: #000000;
  --danger: #CC3D37;
  --glow-warm: #D4FFA7;
  --glow-cool: #ACFFEF;
  --glow-strength: 1;
  --lift-shadow: 0 17px 10px rgba(0, 0, 0, 0.085);
  --display: -apple-system, BlinkMacSystemFont, "MP Display", "MP Arabic", sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "MP Text", "MP Arabic", sans-serif;
  --max: 1240px;
  --gutter: 20px;
  --edge: max(var(--gutter), calc((100% - var(--max)) / 2));
  --seam: 3px;
  --gap: 10px;
  --dir: 1;
}

@media (min-width: 900px) {
  :root { --gutter: 40px; --seam: 6px; --gap: 16px; }
}


@media (prefers-color-scheme: dark) {
  /* Palette.night: the navy page, the glow at half strength; the active card stays white. */
  :root {
    --page: #000C23;
    --tile: rgba(255, 255, 255, 0.08);
    --tile-solid: #0B1730;
    --ink: #E9EAEC;
    --ink-2: rgba(233, 234, 236, 0.72);
    --hairline: rgba(255, 255, 255, 0.12);
    --soft: rgba(233, 234, 236, 0.08);
    --lift-top: #F4F6F7;
    --lift-bottom: #C9CED2;
    --on-lift: #14181B;
    --glow-warm: #007083;
    --glow-cool: #009376;
    --glow-strength: 0.5;
    --lift-shadow: 0 17px 10px rgba(0, 0, 0, 0.4);
    --danger: #FF6B66;
  }
}

[dir="rtl"] { --dir: -1; }

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 16px;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--page);
  font: 400 1.0625rem/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

:lang(ar), :lang(fa) { line-height: 1.8; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--page); }

h1, h2, h3 { margin: 0; font-family: var(--display); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

h1 {
  font-weight: 800;
  font-size: clamp(2.5rem, 1.35rem + 4.6vw, 5.25rem);
  line-height: 1.02;
}

h2 {
  font-weight: 800;
  font-size: clamp(2rem, 1.35rem + 2.5vw, 3.375rem);
  line-height: 1.06;
}

:lang(ar) :is(h1, h2), :lang(fa) :is(h1, h2) { line-height: 1.3; }

/* Prayer names on the board: Semibold capitals. Arabic and Persian have no capitals and never get
   letter spacing (it would cut joined letters apart). */
.label, .cap {
  font: 600 0.8125rem/1.2 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
:lang(ar) :is(.label, .cap), :lang(fa) :is(.label, .cap) {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9375rem;
}

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

.skip {
  position: absolute; inset-inline-start: 12px; top: -100px; z-index: 20;
  padding: 10px 16px; background: var(--ink); color: var(--page); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ------------------------------------------------------------------ tiles, pills, blocks */

.tile {
  background: var(--tile);
}

.lifted {
  background: linear-gradient(var(--lift-top), var(--lift-bottom));
  color: var(--on-lift);
  box-shadow: var(--lift-shadow);
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid var(--on-lime);
  border-radius: 999px;
  background: var(--lime);
  color: var(--on-lime);
  font: 600 1.0625rem/1.1 var(--display);
  text-decoration: none;
  text-align: center;
  transition: filter 160ms ease-out, transform 160ms ease-out;
}
.pill:hover { filter: brightness(0.96); }
.pill:active { transform: translateY(1px); }
.pill:focus-visible { outline-color: var(--ink); }

.block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  background: var(--soft);
  color: var(--ink);
  font: 600 1.0625rem/1.1 var(--display);
  text-decoration: none;
  transition: background-color 160ms ease-out;
}
.block:hover { background: var(--hairline); }
.block:active { background: var(--soft); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
}

.soon { color: var(--ink-2); font-size: 0.9375rem; }

/* The app's store beside the browser's lime pill: the same pill drawn in ink, a step quieter than the live action. */
.store {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font: 600 1.0625rem/1.1 var(--display);
  text-decoration: none;
  text-align: center;
  transition: background-color 160ms ease-out, transform 160ms ease-out;
}
.store:hover { background: var(--soft); }
.store:active { transform: translateY(1px); }

/* ------------------------------------------------------------------ the bar */

.bar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px var(--edge);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 800 1.25rem/1 var(--display);
  text-decoration: none;
}
.brand img { width: 32px; height: 32px; }


.bar-end { display: flex; align-items: center; gap: 10px; }

.quiet, .lang summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  font: 600 0.9375rem/1 var(--display);
  text-decoration: none;
  cursor: pointer;
}
.quiet:hover, .lang summary:hover { background: var(--soft); }

.lang { position: relative; }
.lang summary { list-style: none; gap: 8px; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor; /* a down arrow in both directions */
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 160ms ease-out;
}
.lang[open] summary::after { transform: translateY(3px) rotate(-135deg); }

.lang ul {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  display: grid;
  gap: var(--seam);
  min-width: 190px;
  margin: 0;
  padding: 0;
  list-style: none;
  box-shadow: var(--lift-shadow);
}
.lang li a {
  display: block;
  padding: 12px 16px;
  background: var(--tile-solid);
  font-weight: 600;
  text-decoration: none;
}
.lang li a:hover { background: var(--page); }
.lang li a[aria-current] {
  background: linear-gradient(var(--lift-top), var(--lift-bottom));
  color: var(--on-lift);
}

@media (max-width: 520px) {
  .bar .quiet { display: none; }
}

/* ------------------------------------------------------------------ glow */

/* Drawn by site.js with the app's own glow (core/design/ground.dart). Without script: a plain fade. */
.glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* At night the glow lies at half strength over the navy page, as in the app. */
  opacity: var(--glow-strength);
  background: linear-gradient(calc(90deg * var(--dir)), var(--glow-warm), var(--glow-cool));
  -webkit-mask-image: linear-gradient(to bottom, transparent 58%, #000 82%);
  mask-image: linear-gradient(to bottom, transparent 58%, #000 82%);
}
.glow.drawn { background: none; -webkit-mask-image: none; mask-image: none; }

/* Glows that run on under the next section fade out there instead of ending in a line. */
.hero > .glow { top: 0; bottom: auto; height: calc(100% + 320px); }
.mosque > .glow { inset: auto 0 -260px 0; height: calc(78% + 260px); }
.hero > .glow.drawn, .mosque > .glow.drawn {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 380px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 380px), transparent);
}
/* The page itself ends in the dawn light, as every screen of the app does. */
.page-glow { inset: auto 0 0 0; height: min(980px, 110vh); }

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

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 40px;
  padding: clamp(16px, 3vw, 40px) var(--edge) clamp(40px, 6vw, 72px);
}

.hero h1 { max-width: 13ch; }
.hero-text { display: grid; gap: 26px; align-content: end; }
.lede {
  max-width: 36ch;
  font: 300 clamp(1.125rem, 1rem + 0.45vw, 1.375rem)/1.5 var(--display);
}
:lang(ar) .lede, :lang(fa) .lede { font-weight: 400; line-height: 1.8; }
.hero .actions { margin-top: 10px; }

.pair {
  position: relative;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.36fr) minmax(0, 1fr);
  column-gap: clamp(20px, 2.6vw, 40px);
  row-gap: 30px;
  align-items: end;
}

.screen { display: grid; gap: 18px; min-width: 0; }
.screen img {
  width: 100%;
  box-shadow: 0 0 0 1px var(--hairline), var(--lift-shadow);
  background: var(--tile-solid);
}
.screen .cap { color: var(--ink); }

.pair figcaption {
  grid-column: 1 / -1;
  font: 300 clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem)/1.4 var(--display);
  text-align: center;
}
:lang(ar) .pair figcaption, :lang(fa) .pair figcaption { font-weight: 400; }

.bridge {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  visibility: hidden;
}
.bridge.ready { visibility: visible; }
.bridge path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.bridge circle { fill: var(--page); stroke: var(--ink); stroke-width: 1.5; }

@media (min-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 3.6fr) minmax(0, 8.4fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(40px, 4vw, 72px);
    row-gap: 48px;
    min-height: min(calc(100svh - 72px), 920px);
  }
  .hero h1 { grid-column: 1 / -1; max-width: 21ch; }
  .hero-text { align-self: end; padding-bottom: 58px; }
}
@media (min-width: 960px) and (max-width: 1099px) {
  .pair { grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); }
}

/* Phones: the screen above, your phone under it, the bridge falls between them. */
@media (max-width: 699px) {
  .pair { grid-template-columns: minmax(0, 1fr); }
  .pair .tv { grid-row: 1; }
  .pair .phone { grid-row: 2; width: 54%; }
  .pair .tv .cap { max-width: 40%; } /* stays clear of the bridge falling from the pill */
  .pair figcaption { text-align: start; }
}

/* The converging pair: the one authored motion of the page. Both screens are visible from the first
   frame; they only travel the last few pixels to stand side by side, then the bridge draws. */
@media (prefers-reduced-motion: no-preference) {
  .pair .phone { animation: from-start 1100ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .pair .tv { animation: from-end 1100ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .bridge.ready path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 900ms 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
  .bridge.ready circle { transform-box: fill-box; transform-origin: center; animation: dot 500ms 600ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .bridge.ready circle:last-of-type { animation-delay: 1400ms; }
  .bridge.settled path, .bridge.settled circle { animation: none; stroke-dashoffset: 0; }
}
@keyframes from-start { from { transform: translateX(calc(-36px * var(--dir))); opacity: 0; } }
@keyframes from-end { from { transform: translateX(calc(36px * var(--dir))); opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes dot { from { transform: scale(0); } }

@media (max-width: 699px) and (prefers-reduced-motion: no-preference) {
  @keyframes from-start { from { transform: translateY(24px); opacity: 0; } }
  @keyframes from-end { from { transform: translateY(-12px); opacity: 0; } }
}

/* ------------------------------------------------------------------ sections */

main > section { position: relative; }
main > section:not(.hero) { padding: clamp(64px, 9vw, 128px) var(--edge) 0; }

.head { display: grid; gap: 18px; max-width: 44rem; margin-bottom: clamp(36px, 5vw, 60px); }
.head p { font: 300 clamp(1.125rem, 1rem + 0.4vw, 1.3125rem)/1.5 var(--display); max-width: 40ch; }
:lang(ar) .head p, :lang(fa) .head p { font-weight: 400; line-height: 1.8; }

/* How it works: three tiles standing in a row; yours is lifted. */
.how h2 { margin-bottom: clamp(28px, 4vw, 44px); }
.steps {
  display: grid;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps .tile, .steps .lifted {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 26px 28px 30px;
}
.steps .now { display: grid; gap: 22px; }
.steps .now .pill { justify-self: end; }
.steps .n {
  font: 200 3.5rem/1 var(--display);
  font-variant-numeric: tabular-nums;
}
.steps h3 { font-weight: 800; font-size: 1.375rem; line-height: 1.2; }
.steps p { max-width: 34ch; }
@media (min-width: 800px) {
  /* As on the board: the row stands on the baseline, the current card rises above it, wider, and
     its lime pill takes the card's place in the row. */
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; padding-top: 120px; }
  .steps .tile { min-height: 236px; }
  .steps .now { gap: 26px; justify-items: center; margin-top: -120px; }
  .steps .now .pill { justify-self: center; margin-bottom: 26px; }
  .steps .lifted { width: calc(100% + 16px); min-height: 236px; position: relative; z-index: 1; }
}

/* On your phone: four screens side by side; on phones a row you swipe. */
.shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, 78%);
  gap: var(--gap);
  margin: 0 calc(-1 * var(--edge));
  padding: 0 var(--edge) 6px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  scrollbar-width: thin;
}
.shots > li { scroll-snap-align: start; }
.shots:focus-visible { outline-offset: 6px; }
.shot { display: grid; align-content: start; gap: 20px; padding: 22px 22px 28px; }
.shot img { width: 100%; box-shadow: 0 0 0 1px var(--hairline); }
.shot p { font-size: 1rem; line-height: 1.5; }
:lang(ar) .shot p, :lang(fa) .shot p { line-height: 1.75; }
@media (min-width: 640px) { .shots { grid-auto-columns: minmax(260px, 44%); } }
@media (min-width: 1040px) {
  .shots {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    overflow: visible;
  }
}

/* A Quran that listens: what it does as tiles, the check lifted like the board's current card, and the page in
   hide mode beside them. */
.recite-body { display: grid; gap: 40px; align-items: start; }
.recite-list { display: grid; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.recite-list > li { display: grid; align-content: start; gap: 8px; padding: 22px 24px 26px; }
.recite-list h3 { font-weight: 800; font-size: 1.25rem; line-height: 1.3; }
.recite-list p { max-width: 54ch; }
.tag {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 2px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font: 600 0.75rem/1.4 var(--display);
  vertical-align: 0.2em;
  white-space: nowrap;
}
.recite-shot { margin: 0; justify-self: center; width: min(100%, 340px); }
.recite-shot img { width: 100%; box-shadow: 0 0 0 1px var(--hairline), var(--lift-shadow); }
@media (min-width: 900px) {
  .recite-body { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 6vw, 96px); }
  .recite-shot { justify-self: start; }
}

/* For your mosque: the board itself, large, on its own glow. */
.mosque { position: relative; isolation: isolate; }
.board { margin: 0; }
.board img { width: 100%; box-shadow: 0 0 0 1px var(--hairline), var(--lift-shadow); }
.mosque-more {
  display: grid;
  gap: 32px;
  margin-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(48px, 7vw, 96px);
}
.rows {
  display: grid;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rows li {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 18px 22px;
  background: var(--tile);
  font-weight: 600;
  line-height: 1.35;
}
.setup { display: grid; gap: 18px; align-content: start; justify-items: start; }
.setup p { max-width: 36ch; }
.setup .note { color: var(--ink-2); font-size: 0.9375rem; }
@media (min-width: 700px) { .rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .mosque-more { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 48px; }
  .setup { padding-top: 26px; }
}

/* Made for everyone */
.every {
  display: grid;
  gap: 40px;
  align-items: center;
}
.other-theme { margin: 0; justify-self: center; width: min(100%, 340px); }
.other-theme img { width: 100%; box-shadow: 0 0 0 1px var(--hairline), var(--lift-shadow); }
.every-text h2 { margin-bottom: 26px; }
.langs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: baseline;
  font: 800 clamp(1.6rem, 1.15rem + 1.4vw, 2.25rem)/1.25 var(--display);
}
.langs li, .langlist a { line-height: 1.25; }
.langs-note { margin-top: 10px; color: var(--ink-2); }
.facts { display: grid; gap: var(--gap); margin: 34px 0 0; }
.facts .tile { padding: 22px 24px; }
.facts dt { font-weight: 800; font-family: var(--display); font-size: 1.125rem; }
.facts dd { margin: 4px 0 0; }
@media (min-width: 900px) {
  .every { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); }
  .other-theme { grid-column: 1; grid-row: 1; justify-self: end; }
  .every-text { grid-column: 2; }
}

/* Free and Plus: three plans as tiles, Plus AI lifted like the board's current card. */
.plans { display: grid; gap: 28px; }
.plans-head p { max-width: 46ch; margin-top: 12px; color: var(--ink-2); }
.plans-cta { margin: 0; }
.plan-list { display: grid; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.plan-list > li { display: grid; align-content: start; gap: 10px; padding: 26px 28px 30px; }
.plan-list h3 { font-weight: 800; font-size: 1.375rem; line-height: 1.2; }
.plan-list .price { font: 800 1.125rem/1.3 var(--display); }
.plans-note { max-width: 70ch; color: var(--ink-2); font-size: 0.9375rem; }
@media (min-width: 800px) {
  .plan-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Your privacy: three plain promises, in the board's Heavy voice, with seams between them. */
.private { display: grid; gap: 32px; }
.promises ul {
  display: grid;
  gap: var(--seam);
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.promises li {
  padding: 22px 0 24px;
  border-top: 1px solid var(--hairline);
  font: 800 clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem)/1.2 var(--display);
}
@media (min-width: 900px) {
  .private { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
}

.more { font-weight: 600; text-decoration: none; }
.more::after { content: " →"; }
[dir="rtl"] .more::after { content: " ←"; }
.more:hover { text-decoration: underline; }

/* The close: the dawn light rises under the last call. */
main > section.final {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: 30px;
  padding-bottom: clamp(120px, 16vw, 220px);
  margin-top: clamp(24px, 4vw, 48px);
  text-align: center;
}
.final h2 { max-width: 15ch; }
:lang(ar) .final h2, :lang(fa) .final h2 { max-width: 20ch; }
.final .actions { justify-content: center; }
.final .tip { max-width: 44ch; margin: 0; color: var(--ink-2); font-size: 0.9375rem; }

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

.foot {
  display: grid;
  gap: 24px;
  padding: 40px var(--edge) 56px;
  border-top: 1px solid var(--hairline);
  font-size: 0.9375rem;
}
.foot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.langlist, .legal { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.langlist a, .legal a { display: inline-block; padding: 6px 0; font-weight: 600; text-decoration: none; }
.langlist a:hover, .legal a:hover { text-decoration: underline; }
.langlist a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; }
.credits, .copy { color: var(--ink-2); }
.credits a { color: inherit; }

/* ------------------------------------------------------------------ privacy page */

.doc-main {
  position: relative;
  isolation: isolate;
  padding: clamp(16px, 4vw, 48px) var(--edge) clamp(120px, 14vw, 200px);
}
.prose { max-width: 46rem; }
.prose h1 { font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); }
.prose .updated { margin: 12px 0 28px; color: var(--ink-2); }
.prose .intro { font: 300 clamp(1.125rem, 1rem + 0.4vw, 1.3125rem)/1.55 var(--display); margin-bottom: 28px; }
:lang(ar) .prose .intro, :lang(fa) .prose .intro { font-weight: 400; line-height: 1.8; }
.prose section {
  display: grid;
  gap: 14px;
  margin-top: var(--gap);
  padding: 26px 28px 28px;
  background: var(--tile);
}
.prose h2 { font-size: 1.375rem; line-height: 1.25; }
.prose ul, .prose ol { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 8px; }
.prose .back { margin-top: 32px; font-weight: 600; }

/* ------------------------------------------------------------------ a mosque's page (/m/<publicId>) */

/* One column of at most 36rem in the middle. Not a max-width on the page itself: its sides (--edge) grow with
   the window, and on a wide screen they took all of its 36rem and squeezed the page into a thin strip. */
.follow { display: grid; grid-template-columns: minmax(0, 36rem); justify-content: center; gap: 22px; }
/* Not the landing page's sections: the page's own rhythm. */
main.follow > section { padding: 0; }
.follow [hidden] { display: none !important; }
.follow-head { display: grid; gap: 8px; }
.follow h1 { font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem); overflow-wrap: anywhere; }
.follow-place { color: var(--ink-2); font: 300 1.1875rem/1.4 var(--display); }
.follow-today { display: grid; gap: var(--seam); }
.follow-date { margin-bottom: 10px; font-weight: 600; }
.follow-times { display: grid; gap: var(--seam); margin: 0; padding: 0; list-style: none; }
/* The rows are measured in --u, a sixteenth of a rem (1px at the default size). On a list narrower than 390px
   (small phones) it shrinks with the list, so every part of a row gets smaller in step, as the app's home does
   on phones under 390 points, and the prayer of now never runs into its time. The small words stop at 11px.
   A name that still has no room (German "Sonnenaufgang" on the smallest phones) takes a second line. */
.follow-times li { --u: 0.0625rem; }
@supports (width: 1cqi) {
  .follow-times { container-type: inline-size; }
  .follow-times li { --u: min(0.0625rem, 100cqi / 390); }
}
.follow-times li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0 calc(14 * var(--u));
  min-height: 58px;
  padding: 0 calc(20 * var(--u));
}
.follow-times .cap { font-size: max(11px, 13 * var(--u)); overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
:lang(ar) .follow-times .cap, :lang(fa) .follow-times .cap { font-size: max(11px, 15 * var(--u)); }
.follow-times .off { font: 500 max(11px, 13 * var(--u))/1 var(--display); }
.follow-times .t { font: 200 calc(28 * var(--u))/1 var(--display); }
/* The prayer whose time it is: the app's white card, reaching a little past the others on both sides,
   its lime timer at its end counting down to the next athan. */
.follow-times li.active {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  min-height: 72px;
  margin-inline: calc(-8 * var(--u));
  padding-inline: calc(28 * var(--u)) 0;
  background: var(--active);
  color: var(--on-active);
  box-shadow: var(--lift-shadow);
}
.follow-times .active .cap { font-weight: 900; font-size: calc(18 * var(--u)); }
.follow-times .active .t { font-weight: 300; font-size: calc(32 * var(--u)); }
.follow-times .timer {
  align-self: stretch;
  display: grid;
  place-items: center;
  min-width: calc(96 * var(--u));
  margin-inline-start: calc(6 * var(--u));
  padding: 0 calc(16 * var(--u));
  background: var(--lime);
  color: var(--on-lime);
  font: 900 calc(22 * var(--u))/1 var(--display);
  font-variant-numeric: tabular-nums;
}
.follow-jumuah { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0; padding: 14px 20px; }
.follow-cta { display: grid; gap: 14px; margin-top: 6px; }
.follow-cta .pill { width: 100%; min-height: 56px; font-size: 1.125rem; }
.follow-report { font-size: 0.9375rem; }
.follow-report a { color: var(--ink-2); }
.follow-problem { display: grid; gap: 16px; justify-items: start; }
.follow-problem h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.follow-problem button { border: 0; cursor: pointer; }
.follow-noscript { color: var(--ink-2); }

/* ------------------------------------------------------------------ a new password (/<lang>/reset-password) */

/* The app's text field: the tile's fill, an ink edge when it has the focus (DESIGN.md). */
.reset-form { display: grid; gap: 10px; margin-top: 18px; }
.reset-form label { font-weight: 600; }
.field { position: relative; }
.field input {
  display: block;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding-block: 0;
  padding-inline: 18px 60px;
  border: 1px solid var(--hairline);
  border-radius: 0;
  background: var(--tile);
  color: var(--ink);
  font: 400 1.125rem/1.2 var(--text);
  -webkit-appearance: none;
  appearance: none;
}
.field input:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.field input[aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.field-toggle {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  display: grid;
  place-items: center;
  width: 56px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  cursor: pointer;
}
.field-toggle:hover { color: var(--ink); }
.field-toggle:focus-visible { outline-offset: -6px; }
.field-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.field-toggle[aria-pressed="true"] .eye, .field-toggle[aria-pressed="false"] .eye-off { display: none; }
.field-rule { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }
.field-error { margin: 0; color: var(--danger); font-size: 0.9375rem; font-weight: 600; }
.reset-form .pill { width: 100%; min-height: 56px; margin-top: 8px; font-size: 1.125rem; cursor: pointer; }
.reset-form .pill:disabled { cursor: progress; filter: saturate(0.6); }

@media print {
  body { background: #fff; color: #000; }
  .bar, .glow, .skip, .foot nav { display: none; }
  .tile, .prose section { background: none; }
}