/*
  DeenScribe website styles.

  Every colour, radius and button below mirrors the iOS app so the site and the
  app read as one brand. Sources in the app:
    - Brand blues and gold ........ DeenScribe/Theme/DesignSystem.swift (BrandIdentity, Color.gold)
    - Canvas, tiles, hairlines .... DesignSystem.swift (FeedPalette, CardSurface)
    - Buttons and pills ........... DesignSystem.swift (BrandButtonStyle, SoftButtonStyle, PillButtonStyle)
    - Blue hero panel ............. DeenScribe/App/StartupSignInView.swift (heroPanel, heroBackground)
    - Verse and hadith cards ...... DeenScribe/Detail/MushafCardStyle.swift and Figma direction A,
                                    "Mushaf"
    - Glossary on the Support page  the Figma glossary page ("5 · Glossary")
    - Lecture tile ................ DeenScribe/Library/LectureTileView.swift
  The interface uses the system font (SF Pro on Apple devices) and the serif
  headlines use the system serif (New York on Apple devices), exactly as the
  app does. Amiri Quran (verses), Amiri (hadith) and Vazirmatn (Persian) are
  self-hosted subsets (see website/tools/build_fonts.py); no font or file is
  loaded from anyone else.
*/

/* ---------- Fonts (self-hosted, OFL; licences beside the files) ----------
   WOFF2 files, made by tools/build_fonts.py.
   Each face covers the spaces too, so words are spaced by the font itself. */

@font-face {
  font-family: "Amiri Quran Web";
  src: url("../fonts/amiri-quran-subset.woff2?v=4") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020, U+00A0, U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+25CC;
}

/* Hadith Arabic (the app's AppFonts.arabicHadith). Its range takes in the Latin
   punctuation inside the hadith library's text (" : ( ) .), so it matches the letters. */
@font-face {
  font-family: "Amiri Web";
  src: url("../fonts/amiri-subset.woff2?v=4") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-0022, U+0027-0029, U+002C-002E, U+003A-003B, U+003F, U+00A0, U+00AB, U+00BB, U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+25CC;
}

@font-face {
  font-family: "Vazirmatn Web";
  src: url("../fonts/vazirmatn-subset.woff2?v=4") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-0022, U+0027-0029, U+002C-002E, U+003A-003B, U+003F, U+00A0, U+00AB, U+00B7, U+00BB, U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: light dark;

  /* Brand mark colours: fixed, never follow light/dark (BrandIdentity). */
  --blue-light: #5b9cf7;
  --blue: #2d73e2;
  --blue-deep: #122d6b;
  --blue-abyss: #0b1c45;
  --gold: #d8a851;
  --gold-light: #f2ce84;
  --gold-ink: #735214;

  /* Light surfaces (FeedPalette, light). */
  --canvas: #fdfdfe;
  --panel: #f5f6f8;
  --tile: #ffffff;
  --tile-raised: #f4f6fa;
  --card: rgba(255, 255, 255, 0.94);
  --hairline: rgba(13, 15, 18, 0.08);
  --hairline-strong: rgba(13, 15, 18, 0.14);
  --card-stroke: rgba(13, 15, 18, 0.07);
  --shadow-card: 0 3px 12px rgba(0, 0, 0, 0.035), 0 1px 2px rgba(0, 0, 0, 0.025);
  --shadow-raised: 0 10px 24px rgba(16, 24, 40, 0.10);
  --hero-shadow: 0 14px 28px rgba(18, 45, 107, 0.22);

  --text: #0d0f12;
  --text-2: #5a5f66;
  --text-3: #7d838a;
  --ink: #122d6b;            /* Color.brandInk(in: .light) */
  --accent: #2d73e2;
  --focus: #2d73e2;
  --wash: rgba(45, 115, 226, 0.08);
  --wash-strong: rgba(45, 115, 226, 0.14);
  --wash-stroke: rgba(45, 115, 226, 0.16);
  --chip-fill: rgba(13, 15, 18, 0.04);
  --badge-fill: rgba(13, 15, 18, 0.06);
  --badge-stroke: rgba(13, 15, 18, 0.10);
  --gold-wash: rgba(216, 168, 81, 0.10);
  --gold-stroke: rgba(216, 168, 81, 0.30);

  /* Qur'an and hadith cards: the "A · Mushaf tokens" from Figma direction A, as in
     MushafPalette (DeenScribe/Detail/MushafCardStyle.swift). --m-quran-paper is
     surface/quran-paper, --m-gold-ink is accent/gold-ink, and so on. Gold marks
     verified text only (Tanzil, the hadith library, a hadith the user verified);
     AI-sourced text and AI translation tags use the neutral stamp ink. */
  --m-quran-paper: #fbf7ee;
  --m-hadith-paper: #fffdf9;
  --m-cartouche: #f6edd9;
  --m-control: #efece5;
  --m-time-chip: #e4ecfa;
  --m-approx-chip: #eceae4;
  --m-review: #f8e9c8;
  --m-verified: #e7f4ec;
  --m-gold-rule: #c79a45;
  --m-hairline: #e5dfd2;
  --m-gold: #d8a851;
  --m-gold-ink: #85601d;
  --m-brand: #2d73e2;
  --m-brand-ink: #1f5dc4;
  --m-on-brand: #ffffff;
  --m-quran-arabic: #172036;
  --m-hadith-arabic: #1f2024;
  --m-translation: #464a57;
  --m-primary: #1b1e24;
  --m-secondary: #626772;
  --m-review-ink: #7a5414;
  --m-stamp: #565b78;
  --m-verified-ink: #1b7347;
  --m-verified-seal: #23955b;
  --m-shadow: 0 1px 2px rgba(23, 32, 54, 0.05), 0 8px 20px -6px rgba(23, 32, 54, 0.07);

  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-serif, "New York", "Iowan Old Style", Charter, Georgia, "Times New Roman", serif;
  --font-quran: "Amiri Quran Web", "Amiri Quran", "Geeza Pro", "Noto Naskh Arabic", serif;
  --font-hadith: "Amiri Web", Amiri, "Geeza Pro", "Noto Naskh Arabic", serif;
  --font-farsi: "Vazirmatn Web", Vazirmatn, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --radius-xs: 7px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius: 16px;
  --radius-tile: 18px;
  --radius-lg: 24px;
  --radius-xl: 28px;

  --gutter: 20px;
  --max: 1160px;
  --header-h: 64px;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark surfaces (FeedPalette, dark). */
    --canvas: #111516;
    --panel: #161a1b;
    --tile: #1b2022;
    --tile-raised: #23292c;
    --card: #1b2022;
    --hairline: rgba(255, 255, 255, 0.12);
    --hairline-strong: rgba(255, 255, 255, 0.18);
    --card-stroke: rgba(255, 255, 255, 0.08);
    --shadow-card: 0 3px 12px rgba(0, 0, 0, 0.12);
    --shadow-raised: 0 10px 24px rgba(0, 0, 0, 0.36);
    --hero-shadow: 0 14px 28px rgba(18, 45, 107, 0.45);

    --text: #f2f4f5;
    --text-2: #a4aaaf;
    --text-3: #868c91;
    --ink: #5b9cf7;          /* Color.brandInk(in: .dark) */
    --accent: #5b9cf7;
    --focus: #5b9cf7;
    --wash: rgba(45, 115, 226, 0.14);
    --wash-strong: rgba(45, 115, 226, 0.22);
    --wash-stroke: rgba(91, 156, 247, 0.24);
    --chip-fill: rgba(255, 255, 255, 0.08);
    --badge-fill: rgba(255, 255, 255, 0.06);
    --badge-stroke: rgba(255, 255, 255, 0.10);
    --gold-wash: rgba(216, 168, 81, 0.10);
    --gold-stroke: rgba(216, 168, 81, 0.24);

    /* "A · Mushaf tokens", Dark. The Qur'an paper is palette/night-ink. Dark mode
       separates the cards by colour, so they have no shadow. */
    --m-quran-paper: #141d31;
    --m-hadith-paper: #1b2022;
    --m-cartouche: #1e2537;
    --m-control: #283039;
    --m-time-chip: #1f3150;
    --m-approx-chip: #2a3036;
    --m-review: #3a2f1a;
    --m-verified: #173327;
    --m-gold-rule: #c29a50;
    --m-hairline: #30373c;
    --m-gold: #d8a851;
    --m-gold-ink: #e3be73;
    --m-brand: #5b9cf7;
    --m-brand-ink: #8cbbff;
    --m-on-brand: #0f1a2c;
    --m-quran-arabic: #f4ecdc;
    --m-hadith-arabic: #ece7dd;
    --m-translation: #c7c2b7;
    --m-primary: #f2f3f5;
    --m-secondary: #a3a8b0;
    --m-review-ink: #f2ce84;
    --m-stamp: #a6abc8;
    --m-verified-ink: #74d3a0;
    --m-verified-seal: #5cc98e;
    --m-shadow: none;
  }
}

@media (min-width: 720px) {
  :root { --gutter: 32px; }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--canvas);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
}

/* The app's dark canvas carries a faint brand wash from the top-leading corner. */
@media (prefers-color-scheme: dark) {
  body {
    background-image: linear-gradient(135deg, rgba(45, 115, 226, 0.06), transparent 42rem);
    background-repeat: no-repeat;
  }
}

img,
svg { display: block; max-width: 100%; }

a { color: var(--ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}
/* On the blue hero and closing panels a blue ring is hard to see (about 2:1);
   white keeps it well above the 3:1 that WCAG 1.4.11 asks for. */
.hero-panel :focus-visible, .cta-panel :focus-visible { outline-color: #fff; }

::selection { background: rgba(45, 115, 226, 0.22); }

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

.skip-link {
  position: absolute;
  left: 12px; top: -100px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--blue-deep);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

.icon { width: 1.25em; height: 1.25em; flex: none; }
.icon-sm { width: 1em; height: 1em; flex: none; }

[lang="ar"], [lang="fa"] { unicode-bidi: isolate; }

/* Persian text uses Vazirmatn, as the app does for Persian reading text.
   Only the regular weight ships, so allow the browser to embolden titles. */
[lang="fa"] { font-family: var(--font-farsi); font-synthesis-weight: auto; }

/* ---------- Type ---------- */

.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.55rem, 1.55rem + 3.6vw, 4.4rem);
  line-height: 1.03;
  letter-spacing: -0.026em;
}

.h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.95rem, 1.35rem + 2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

.lead {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
  color: var(--text-2);
}

/* SectionHeaderLabel: icon + small caps label. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}
.eyebrow .icon { width: 15px; height: 15px; color: var(--ink); }

.muted { color: var(--text-2); }
.small { font-size: 0.9375rem; }
.caption { font-size: 0.8125rem; line-height: 1.45; color: var(--text-2); }

/* ---------- Buttons and pills ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, opacity 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.985); }

/* BrandButtonStyle */
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--blue-deep), rgba(18, 45, 107, 0.9));
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 3px 7px rgba(18, 45, 107, 0.16);
}
.btn-primary:hover { box-shadow: 0 6px 14px rgba(18, 45, 107, 0.26); }
@media (prefers-color-scheme: dark) {
  .btn-primary { background: linear-gradient(135deg, #1d4296, var(--blue-deep)); border-color: rgba(255, 255, 255, 0.18); }
}

/* SoftButtonStyle */
.btn-soft {
  color: var(--ink);
  font-weight: 500;
  background: var(--wash);
  border: 1px solid var(--wash-stroke);
}
.btn-soft:hover { background: var(--wash-strong); }

/* On the blue hero panel. */
.btn-light {
  color: var(--blue-deep);
  background: #fff;
  border: 0;
  box-shadow: 0 6px 18px rgba(4, 14, 40, 0.28);
}
.btn-light:hover { box-shadow: 0 8px 24px rgba(4, 14, 40, 0.36); }

.btn-glass {
  color: #fff;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.24);
}
.btn-glass:hover { background: rgba(255, 255, 255, 0.18); }

.btn .icon { width: 18px; height: 18px; }

/* Status pill ("Coming soon"), PillButtonStyle look, not a link. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text);
  background: var(--tile);
  border: 1px solid var(--hairline);
}
.gold-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: none;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  box-shadow: 0 0 0 3px rgba(216, 168, 81, 0.18);
}

/* LanguageBadge */
.lang-badge {
  display: inline-flex;
  align-items: center;
  padding: 2.5px 7px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-2);
  background: var(--badge-fill);
  border: 0.5px solid var(--badge-stroke);
  white-space: nowrap;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--canvas) 84%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--hairline);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .site-header { background: var(--canvas); }
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--header-h);
}

/* BrandWordmark: mark + "DeenScribe" at 0.62 × the mark size, weight 600, tracking −0.45. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.025em;
  margin-right: auto;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 30px; height: 30px;
  border-radius: 6.7px;
  box-shadow: 0 3px 7px rgba(18, 45, 107, 0.18);
}

.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease;
}
.site-nav a:hover { color: var(--text); background: var(--chip-fill); }
.site-nav a[aria-current="page"] { color: var(--text); font-weight: 600; }
.site-nav .nav-wide { display: none; }

.header-inner .status-pill { display: none; }

@media (min-width: 760px) {
  .site-nav .nav-wide { display: inline-flex; }
}
@media (min-width: 960px) {
  .header-inner .status-pill { display: inline-flex; }
  .home .header-inner .status-pill { display: none; }
  .site-nav { margin-right: 8px; }
}

/* ---------- Hero ---------- */

.hero { padding-block: 24px 8px; }
@media (min-width: 720px) { .hero { padding-block: 40px 16px; } }

.hero-grid {
  display: grid;
  gap: 36px;
  align-items: center;
}
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 48px; }
}

/* StartupSignInView.heroPanel + heroBackground */
.hero-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px 24px 30px;
  border-radius: var(--radius-xl);
  color: #fff;
  background:
    radial-gradient(circle at 100% 0%, rgba(91, 156, 247, 0.55), rgba(91, 156, 247, 0) 62%),
    linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 72%, var(--blue-abyss) 100%);
  background-blend-mode: screen, normal;
  box-shadow: var(--hero-shadow);
}
@media (min-width: 720px) {
  .hero-panel { padding: 44px 44px 44px; gap: 26px; min-height: 600px; }
}

.badge-glass {
  align-self: flex-start;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px 7px 11px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  /* Dark glass, so the white label stays at 4.5:1 or more on the blue. */
  background: rgba(11, 28, 69, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.hero-panel .display { max-width: 13ch; }
.nowrap { white-space: nowrap; }

.hero-lead {
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.2rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Bottom row of the panel: the three points, with the waveform beside them. */
.hero-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: auto;
  padding-top: 8px;
}

/* heroPoint: icon in a white 14 % rounded square, footnote-sized text at 86 %. */
.hero-points {
  list-style: none;
  display: grid;
  gap: 14px;
  min-width: 0;
  max-width: 26rem;
}
.hero-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
}
.hero-points .pt-icon {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  flex: none;
  margin-top: -3px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
}
.hero-points .pt-icon .icon { width: 16px; height: 16px; }

/* The quiet waveform motif, "the way a lecture looks before it is read". */
.waveform {
  display: none;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 80px;
  margin-bottom: 4px;
  pointer-events: none;
}
.waveform span {
  width: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  transform-origin: center;
}
.waveform span:nth-child(3n + 1) { background: rgba(255, 255, 255, 0.16); }
.waveform span:nth-child(1) { height: 18px; }
.waveform span:nth-child(2) { height: 36px; }
.waveform span:nth-child(3) { height: 58px; }
.waveform span:nth-child(4) { height: 30px; }
.waveform span:nth-child(5) { height: 74px; }
.waveform span:nth-child(6) { height: 46px; }
.waveform span:nth-child(7) { height: 24px; }
.waveform span:nth-child(8) { height: 60px; }
.waveform span:nth-child(9) { height: 40px; }
.waveform span:nth-child(10) { height: 20px; }
.waveform span:nth-child(11) { height: 50px; }
.waveform span:nth-child(12) { height: 28px; }
@media (min-width: 720px) { .waveform { display: flex; } }

@media (prefers-reduced-motion: no-preference) {
  .waveform span { animation: breathe 2.8s ease-in-out infinite alternate; }
  .waveform span:nth-child(2n) { animation-duration: 3.4s; }
  .waveform span:nth-child(3n) { animation-duration: 2.3s; animation-delay: -1.1s; }
  .waveform span:nth-child(4n) { animation-delay: -0.6s; }
  .waveform span:nth-child(5n) { animation-delay: -1.7s; }

  .hero-panel > * { animation: rise 700ms var(--ease-out) both; }
  .hero-panel > :nth-child(2) { animation-delay: 70ms; }
  .hero-panel > :nth-child(3) { animation-delay: 140ms; }
  .hero-panel > :nth-child(4) { animation-delay: 210ms; }
  .hero-panel > :nth-child(5) { animation-delay: 280ms; }
  .hero-panel > :nth-child(6) { animation-delay: 350ms; }
  .hero-device { animation: rise 900ms 160ms var(--ease-out) both; }
}

@keyframes breathe {
  from { transform: scaleY(0.55); }
  to { transform: scaleY(1); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Device mock-up (an HTML drawing of the app's lecture page) ---------- */

.hero-device {
  position: relative;
  display: grid;
  justify-items: center;
}
.hero-device::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8% 0 4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(91, 156, 247, 0.32), rgba(91, 156, 247, 0));
  filter: blur(8px);
}

.device {
  margin: 0;
  font-size: clamp(13px, 0.55rem + 0.75vw, 16px);
  width: 19.5em;
  max-width: 100%;
}
.device-frame {
  padding: 0.5em;
  border-radius: 3.25em;
  background: #0a0b0d;
  box-shadow:
    inset 0 0 0 0.11em #343a41,
    inset 0 0 0 0.2em #0a0b0d,
    0 2.4em 4.4em -1.8em rgba(11, 28, 69, 0.55),
    0 1em 2em -1em rgba(0, 0, 0, 0.30);
}
.device-screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 19.5;
  border-radius: 2.8em;
  background: var(--canvas);
  color: var(--text);
  display: flex;
  flex-direction: column;
  font-size: 1em;
  line-height: 1.35;
  text-align: start;
  user-select: none;
}
@media (prefers-color-scheme: dark) {
  .device-screen { background: #111516 linear-gradient(135deg, rgba(45, 115, 226, 0.05), transparent 60%); }
}

.ds-status {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.05em;
  padding: 0.35em 1.75em 0;
  font-size: 0.9em;
  font-weight: 600;
  flex: none;
}
.ds-island {
  position: absolute;
  left: 50%; top: 0.62em;
  width: 6.3em; height: 1.85em;
  transform: translateX(-50%);
  border-radius: 1em;
  background: #000;
}
.ds-status-icons { display: flex; align-items: center; gap: 0.35em; }
.ds-status-icons svg { height: 0.78em; width: auto; }

.ds-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.15em 0.85em 0.25em;
  flex: none;
}
.ds-round {
  display: grid;
  place-items: center;
  width: 2.3em; height: 2.3em;
  border-radius: 50%;
  background: var(--tile);
  border: 1px solid var(--hairline);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.ds-round svg { width: 1em; height: 1em; }

/* AudioPlayerBar: pinned at the top of the lecture page. */
.ds-player {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0.2em 0.75em 0.55em;
  padding: 0.5em 0.7em;
  border-radius: 0.8em;
  background: color-mix(in srgb, var(--tile) 88%, transparent);
  border: 1px solid rgba(45, 115, 226, 0.18);
  box-shadow: 0 0.25em 0.6em rgba(0, 0, 0, 0.08);
  flex: none;
}
.ds-skip { width: 0.95em; height: 0.95em; color: var(--accent); flex: none; }
.ds-play {
  display: grid;
  place-items: center;
  width: 2.1em; height: 2.1em;
  flex: none;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--blue-light), var(--blue), var(--blue-deep));
  box-shadow: 0 0.2em 0.45em rgba(45, 115, 226, 0.35);
}
.ds-play svg { width: 0.8em; height: 0.8em; margin-left: 0.08em; }
.ds-scrub { flex: 1; min-width: 0; }
.ds-track {
  display: block;
  position: relative;
  height: 0.22em;
  border-radius: 1em;
  background: var(--hairline-strong);
}
.ds-track::before {
  content: "";
  position: absolute;
  inset: 0 68% 0 0;
  border-radius: inherit;
  background: var(--blue);
}
.ds-track::after {
  content: "";
  position: absolute;
  left: 32%; top: 50%;
  width: 0.7em; height: 0.7em;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  box-shadow: 0 0.06em 0.3em rgba(0, 0, 0, 0.3);
}
.ds-times {
  display: flex;
  justify-content: space-between;
  margin-top: 0.55em;
  font-size: 0.6em;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ds-rate { font-size: 0.7em; font-weight: 600; color: var(--accent); flex: none; }

.ds-page { padding: 0.15em 1.05em 0; flex: 1; min-height: 0; overflow: hidden; }
.ds-title {
  font-size: 1.5em;
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.ds-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25em 0.75em;
  margin-top: 0.5em;
  font-size: 0.72em;
  color: var(--text-2);
}
.ds-meta .lang-badge { font-size: 0.9em; }

/* UnderlineTabBar */
.ds-tabs {
  display: flex;
  gap: 1.3em;
  margin-top: 0.85em;
  padding-top: 0.2em;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.8em;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
  mask-image: linear-gradient(90deg, #000 82%, transparent);
}
.ds-tabs span { position: relative; padding-bottom: 0.6em; }
.ds-tabs .on { color: var(--text); font-weight: 600; }
.ds-tabs .on::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
}

.ds-note {
  display: flex;
  gap: 0.55em;
  align-items: flex-start;
  margin-top: 0.8em;
  font-size: 0.62em;
  line-height: 1.4;
  color: var(--text-2);
}
.ds-note svg { width: 1.2em; height: 1.2em; flex: none; color: var(--accent); }
.ds-note.gold {
  margin-top: 0.9em;
  padding: 0.75em 0.9em;
  border-radius: 0.9em;
  background: var(--gold-wash);
  border: 1px solid var(--gold-stroke);
}
.ds-note.gold svg { color: var(--gold); }

/* ---------- Qur'an and hadith cards: direction A, "Mushaf" ----------
   Copies DeenScribe/Detail/MushafCardStyle.swift (VerseCard, HadithCard) and Figma
   direction A. Sizes are the app's at the default text size. The phone drawing in
   the hero uses the compact card: the same frame, scaled with the drawing. */

/* Footer: the time chip and copy at the leading edge, the status (the Tanzil seal on
   a verse, the ⋯ menu on a hadith) at the trailing edge. */
.mushaf-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 44px;
}

/* Time chips, 28 px tall. The play chip (exact time) has a play disc. The
   approximate chip shows "~" and the time in brand ink, after play.circle when the
   item was discussed, or a clock when only the 30-second part of the audio is known. */
.time-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 11px 0 8px;
  border-radius: 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--m-brand-ink);
  background: var(--m-approx-chip);
  white-space: nowrap;
}
.time-chip svg { width: 16px; height: 16px; flex: none; }
.time-chip .chip-note { margin-left: 2px; font-size: 0.75rem; font-weight: 400; color: var(--m-secondary); }
.time-chip.exact { gap: 6px; padding-left: 4px; background: var(--m-time-chip); }
.play-disc {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  flex: none;
  border-radius: 50%;
  color: var(--m-on-brand);
  background: var(--m-brand);
}
.time-chip .play-disc svg { width: 11px; height: 11px; }

/* Copy: a 30 px disc in a 44 px target. */
.copy-disc {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  margin-inline: 7px;
  flex: none;
  border-radius: 50%;
  color: var(--m-secondary);
  background: var(--m-control);
}
.copy-disc svg { width: 14px; height: 14px; }

/* The ⋯ menu on a hadith: a 22 px glyph in a 44 px target. */
.more-glyph { width: 22px; height: 22px; flex: none; margin: 0 11px 0 auto; color: var(--m-secondary); }

/* The quiet Tanzil provenance: checkmark.seal.fill and "Tanzil" in small caps. */
.tanzil-seal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding-right: 2px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--m-gold-ink);
}
.tanzil-seal svg { width: 14px; height: 14px; flex: none; }
/* Below 353 px the footer wraps: the seal then gets a 30 px row of its own, clear of the card's edge. */
.scripture-stage .tanzil-seal { min-height: 30px; }

/* Qur'an card: ivory paper (night ink in dark mode), a 9 px mat, then the frame. */
.verse-card {
  display: grid;
  padding: 9px 9px 2px;
  border-radius: var(--radius);
  color: var(--m-primary);
  background: var(--m-quran-paper);
  box-shadow: var(--m-shadow);
}

/* The Mushaf double rule: an outer 1 px and an inner 0.5 px gold rule, 4 px apart with
   square corners, and an 11 px eight-point star centred 3 px in from each outer
   corner. Inside, 16 px to the inner rule (20 px at the bottom). The inner rule is
   an inset shadow rather than a border: on standard-resolution screens browsers
   round a 0.5 px border up to 1 px, so both rules would look the same. */
.mushaf-frame {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 21.5px 21.5px 25.5px;
  border: 1px solid var(--m-gold-rule);
}
.mushaf-frame::before {
  content: "";
  position: absolute;
  inset: 4px;
  box-shadow: inset 0 0 0 0.5px var(--m-gold-rule);
  pointer-events: none;
}
.m-star { width: 11px; height: 11px; flex: none; color: var(--m-gold); }
.mushaf-frame > .m-star { position: absolute; }
.mushaf-frame > .tl { top: -3.5px; left: -3.5px; }
.mushaf-frame > .tr { top: -3.5px; right: -3.5px; }
.mushaf-frame > .bl { bottom: -3.5px; left: -3.5px; }
.mushaf-frame > .br { bottom: -3.5px; right: -3.5px; }

/* Cartouche: the surah's Arabic name (Amiri Quran 18) over the citation in small caps,
   6 px apart so the kasra clears the Latin line, in a capsule with a 0.75 px gold
   stroke between gold hairlines that fade out towards the frame. */
.cartouche { display: flex; align-items: center; justify-content: center; }
.cartouche::before,
.cartouche::after {
  content: "";
  flex: 1 1 12px;
  min-width: 12px;
  height: 0.75px;
  background: linear-gradient(90deg, transparent, var(--m-gold-rule));
}
.cartouche::after { background: linear-gradient(270deg, transparent, var(--m-gold-rule)); }
.cartouche-body {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 5px 20px 8px;
  border: 0.75px solid var(--m-gold-rule);
  border-radius: 40px;
  color: var(--m-gold-ink);
  background: var(--m-cartouche);
  text-align: center;
}
.surah-name { font-family: var(--font-quran); font-size: 1.125rem; line-height: 30px; }
.verse-cite {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The Tanzil Arabic, right-aligned, closed by the ayah rosette: U+00A0, U+06DD and
   the verse number in Arabic-Indic digits, which Amiri Quran draws inside the
   rosette. The rosette is for display only, so it isn't selected or copied. */
.verse-ar {
  font-family: var(--font-quran);
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, 1.75rem);
  line-height: 2;
  color: var(--m-quran-arabic);
  text-align: right;
  direction: rtl;
}
.rosette { font-family: var(--font-quran); color: var(--m-gold-ink); }
/* A waqf (pause) sign, kept on the line of the word before it, is set at 0.72 × the
   size and lowered, as the app does: Amiri Quran draws a sign with no letter under it
   too high. Its space shares the span, so the sign keeps its base. */
.verse-ar .waqf { font-size: 0.72em; vertical-align: -0.4em; }
.verse-ar .rosette,
.verse-ar .visually-hidden { -webkit-user-select: none; user-select: none; }

/* The divider before the translations: hairlines fading out around a 9 px star. */
.star-rule { display: flex; align-items: center; gap: 8px; }
.star-rule::before,
.star-rule::after {
  content: "";
  flex: 1;
  height: 0.75px;
  background: linear-gradient(90deg, transparent, var(--m-gold-rule));
}
.star-rule::after { background: linear-gradient(270deg, transparent, var(--m-gold-rule)); }
.star-rule .m-star { width: 9px; height: 9px; }

/* Translation tags name the language and who translated it: gold ink for a published
   translation (Makarem Shirazi's Persian), stamp ink for an AI translation. */
.verse-tr { display: grid; gap: 2px; }
.tr-tag {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m-stamp);
}
.tr-tag[lang="fa"] {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0;
  text-transform: none;
  text-align: right;
}
.tr-tag.gold { color: var(--m-gold-ink); }
.tr-fa { font-size: 1.0625rem; line-height: 31px; color: var(--m-translation); text-align: right; }

/* The compact card in the phone drawing: the same double rule and corner stars, with
   the app's sizes scaled with the drawing (about three quarters). */
.verse-card.compact { margin-top: 0.75em; padding: 0.4em 0.4em 0.1em; border-radius: 0.8em; }
.compact .mushaf-frame { gap: 0.5em; padding: 0.75em 0.85em 0.65em; }
.compact .mushaf-frame::before { inset: 0.19em; }
.compact .mushaf-frame > .m-star { width: 0.5em; height: 0.5em; }
.compact .mushaf-frame > .tl { top: -0.175em; left: -0.175em; }
.compact .mushaf-frame > .tr { top: -0.175em; right: -0.175em; }
.compact .mushaf-frame > .bl { bottom: -0.175em; left: -0.175em; }
.compact .mushaf-frame > .br { bottom: -0.175em; right: -0.175em; }
.compact .cartouche-body { gap: 0.3em; padding: 0.25em 1.1em 0.4em; border-radius: 2em; }
.compact .surah-name { font-size: 0.85em; line-height: 1.6; }
.compact .verse-cite { font-size: 0.5em; line-height: 1.3; }
.compact .verse-ar { font-size: 1.28em; line-height: 2; }
.compact .mushaf-foot { gap: 0.2em; min-height: 2.3em; }
.compact .time-chip { gap: 0.35em; min-height: 1.75em; padding: 0 0.75em 0 0.5em; border-radius: 1em; font-size: 0.62em; }
.compact .time-chip svg { width: 1.25em; height: 1.25em; }
.compact .copy-disc { width: 1.6em; height: 1.6em; margin-inline: 0.3em; }
.compact .copy-disc svg { width: 0.75em; height: 0.75em; }
.compact .tanzil-seal { gap: 0.35em; font-size: 0.52em; line-height: 1; }
.compact .tanzil-seal svg { width: 1.3em; height: 1.3em; }

/* ---------- Sections ---------- */

.section { padding-block: 56px; }
@media (min-width: 720px) { .section { padding-block: 104px; } }
.section + .section { padding-top: 0; }

.section-head {
  display: grid;
  gap: 14px;
  max-width: 44rem;
  margin-bottom: 40px;
}
@media (min-width: 720px) { .section-head { margin-bottom: 56px; } }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }

/* CardSurface */
.card {
  background: var(--card);
  border: 1px solid var(--card-stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* GradientIcon: tinted disc + glyph. */
.disc {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  color: var(--accent);
  background: rgba(45, 115, 226, 0.11);
  border: 1px solid rgba(45, 115, 226, 0.22);
}
.disc .icon { width: 20px; height: 20px; }
.disc.gold { color: #a87a26; background: rgba(216, 168, 81, 0.14); border-color: rgba(216, 168, 81, 0.34); }
@media (prefers-color-scheme: dark) {
  .disc { background: rgba(45, 115, 226, 0.16); border-color: rgba(91, 156, 247, 0.30); }
  .disc.gold { color: var(--gold); background: rgba(216, 168, 81, 0.16); }
}

/* ---------- How it works ---------- */

.steps {
  list-style: none;
  display: grid;
  gap: 16px;
  counter-reset: step;
}
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

.step {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border-radius: var(--radius-lg);
}
.step-num {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--wash);
  border: 1px solid var(--wash-stroke);
}
.step p { color: var(--text-2); }
.step-visual {
  display: grid;
  gap: 14px;
  margin-top: auto;
  padding-top: 8px;
}

/* A recording in progress (LiveRecorderView, simplified). */
.rec-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--hairline);
}
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.16); flex: none; }
.rec-time { font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.mini-wave { display: flex; align-items: center; gap: 3px; height: 26px; flex: 1; min-width: 0; overflow: hidden; }
.mini-wave span { width: 3px; flex: none; border-radius: 2px; background: color-mix(in srgb, var(--accent) 55%, transparent); height: 30%; }
.mini-wave span:nth-child(3n) { height: 70%; }
.mini-wave span:nth-child(4n + 1) { height: 50%; }
.mini-wave span:nth-child(5n + 2) { height: 95%; }
.mini-wave span:nth-child(7n) { height: 40%; }
@media (prefers-reduced-motion: no-preference) {
  .mini-wave span { animation: breathe 1.6s ease-in-out infinite alternate; }
  .mini-wave span:nth-child(2n) { animation-duration: 2.1s; animation-delay: -0.7s; }
  .mini-wave span:nth-child(3n) { animation-duration: 1.3s; animation-delay: -0.4s; }
}

/* Highlights in the app's four colours (HighlightPalette). */
.hl-sample {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-2);
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--hairline);
}
.hl { color: var(--text); padding: 1px 2px; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl.yellow { background: rgba(255, 217, 89, 0.42); }
.hl.blue { background: rgba(102, 158, 245, 0.30); }
.hl-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 0.75rem; font-weight: 500; color: var(--text-2); }
.hl-key { display: inline-flex; align-items: center; gap: 6px; }
.hl-key::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.hl-key.yellow::before { background: #ffd959; }
.hl-key.blue::before { background: #669ef5; }
.hl-key.pink::before { background: #f58cb8; }
.hl-key.orange::before { background: #faa847; }

/* Small "sources" row */
.source-row { display: flex; flex-wrap: wrap; gap: 8px; }
.source-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  background: var(--tile);
  border: 1px solid var(--hairline);
}
.source-chip .icon { width: 16px; height: 16px; color: var(--ink); }
.source-chip.prominent {
  color: #fff;
  background: var(--blue-deep);
  border-color: rgba(255, 255, 255, 0.14);
}
.source-chip.prominent .icon { color: #fff; }

/* PipelineProgressView-style checklist */
.pipeline { list-style: none; display: grid; gap: 9px; }
.pipeline li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  font-weight: 500;
}
.pipeline .tick {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  flex: none;
  border-radius: 50%;
  color: #1f8a5b;
  background: rgba(31, 138, 91, 0.12);
  border: 1px solid rgba(31, 138, 91, 0.45);
}
.pipeline .tick svg { width: 11px; height: 11px; }
.pipeline .opt { margin-left: auto; font-size: 0.75rem; font-weight: 500; color: var(--text-2); }
@media (prefers-color-scheme: dark) {
  .pipeline .tick { color: #4cc58f; background: rgba(76, 197, 143, 0.12); border-color: rgba(76, 197, 143, 0.4); }
}

/* ---------- Scripture showcase ---------- */

.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}
@media (min-width: 960px) {
  .showcase { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 64px; }
  .showcase.flip > :first-child { order: 2; }
  /* Beside a tall example (the hadith cards), the text sits at the top
     instead of floating in the middle. */
  .showcase.tall { align-items: start; }
}
/* The text also stays in view while the example scrolls past, but only in a
   window tall enough to show all of it below the header. In a shorter one
   (most laptops, an iPad in landscape) it scrolls normally, so its last point
   and the labels link aren't held out of sight. At the default 16 px text
   size the hadith text is about 835 px tall from 1224 px wide and about
   970 px at 960 px wide (measured 9 Nov 2026), stuck 104 px down. Its sizes
   are in rem, so it grows with the visitor's browser text size; the calc()
   terms are in em, which a media query takes from that same setting, so the
   limits rise with it (at 16 px they equal the px limits). A browser that
   rejects calc() here treats the query as false, and the text just scrolls. */
@media (min-width: 1224px) and (min-height: 1000px) and (min-height: calc(90em - 440px)),
       (min-width: 960px) and (min-height: 1150px) and (min-height: calc(95em - 370px)) {
  .showcase.tall .showcase-copy { position: sticky; top: calc(var(--header-h) + 40px); }
}

.showcase-copy { display: grid; gap: 18px; }
.showcase-copy .lead { max-width: 34rem; }

.checks { list-style: none; display: grid; gap: 12px; margin-top: 6px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-2); }
.checks li strong { color: var(--text); font-weight: 600; }
.checks .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--ink); }

/* "What do these labels mean?": to the glossary on the Support page. */
.labels-link { font-size: 0.9375rem; padding-left: 32px; }
.labels-link a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

.scripture-stage {
  position: relative;
  margin: 0;
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--hairline);
}
/* On phones a narrower mat keeps a verse card's footer (time, copy, Tanzil) on one row
   from 353 px; below that the Tanzil seal drops to a row of its own. */
@media (max-width: 479px) { .scripture-stage { padding-inline: 12px; } }
@media (min-width: 720px) { .scripture-stage { padding: 32px; } }

.stage-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-2);
}
.stage-note .icon { width: 16px; height: 16px; margin-top: 1px; color: var(--accent); }
.stage-note.gold {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--gold-wash);
  border: 1px solid var(--gold-stroke);
}
.stage-note.gold .icon { color: var(--gold); }

/* For review: a ribbon with a swallowtail notch (MushafReviewNote). It questions the
   match, never the Tanzil text. On a card it sits under the cartouche with its reason. */
.ribbon {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px 5px 15px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
  color: var(--m-review-ink);
}
.ribbon-shape { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; }
.ribbon-shape path { fill: var(--m-review); stroke: var(--m-gold); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.ribbon-icon { width: 13px; height: 13px; flex: none; }
.review-note { display: grid; justify-items: center; gap: 4px; }
.review-note .reason { font-size: 0.75rem; line-height: 16px; text-align: center; color: var(--m-review-ink); }

.attribution { font-size: 0.75rem; color: var(--text-2); }
.attribution a { color: inherit; }

/* Hadith card (HadithCard): hadith paper, with the spine on the physical right.
   A hadith from the hadith library shows the library's own Arabic and citation.
   An AI-sourced one is drawn as a schematic: bars stand in for its source,
   Arabic and translations, so the site never shows wording or a source that
   nobody has checked. Gold (the source, quote mark and spine) marks verified
   text: a hadith from the library, or one the user has verified. An AI-sourced
   one uses the stamp ink, with its spine at 45 %. */
.hadith-card {
  --source-ink: var(--m-stamp);
  --mark: var(--m-stamp);
  --spine: color-mix(in srgb, var(--m-stamp) 45%, transparent);
  display: grid;
  gap: 2px;
  padding: 16px 12px 2px 18px;
  border-radius: var(--radius);
  background: var(--m-hadith-paper);
  box-shadow: var(--m-shadow);
}
.hadith-card.verified,
.hadith-card.library { --source-ink: var(--m-gold-ink); --mark: var(--m-gold); --spine: var(--m-gold); }
.hadith-body {
  position: relative;
  display: grid;
  gap: 14px;
  padding-right: 17.25px;
}
/* The spine: a 0.75 px rule, a 2 px gap and a 2.5 px rule, 12 px from the text. */
.hadith-body::before,
.hadith-body::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--spine);
}
.hadith-body::before { right: 4.5px; width: 0.75px; }
.hadith-body::after { right: 0; width: 2.5px; border-radius: 2px; }

/* The source line (small caps in the app), a hairline and the quote ornament. */
.hadith-head { display: flex; align-items: center; gap: 8px; min-height: 16px; }
.source-bar {
  width: 132px; height: 8px;
  flex: none;
  border-radius: 4px;
  background: color-mix(in srgb, var(--source-ink) 50%, transparent);
}
.source-bar.mid { width: 104px; }
.source-bar.short { width: 12px; }
.head-rule { flex: 1; min-width: 12px; height: 0.75px; background: var(--m-hairline); }
.quote-mark { width: 18px; height: 15px; flex: none; color: var(--mark); }

/* Provenance stamps, directly under the source. Dashed means provisional. When the
   text wraps, the icon stays on its first line, as in the app (first-text-baseline
   alignment). */
.stamp {
  justify-self: start;
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  line-height: 16px;
  color: var(--m-stamp);
}
.stamp svg { width: 12px; height: 12px; flex: none; margin-top: 2px; }
.stamp b { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.stamp.ai { border: 1px dashed var(--m-stamp); }
.stamp.verified {
  padding: 4px 10px 4px 6px;
  color: var(--m-verified-ink);
  background: var(--m-verified);
  border: 1px solid color-mix(in srgb, var(--m-verified-seal) 35%, transparent);
}
.stamp.verified svg { width: 14px; height: 14px; margin-top: 1px; color: var(--m-verified-seal); }
/* An AI-sourced hadith's stamp, with one note line under it saying what the
   hadith library check found (MushafLibraryNoteLine: caption, stamp ink). */
.provenance { display: grid; gap: 6px; }
.lib-note { font-size: 0.75rem; line-height: 16px; color: var(--m-stamp); }

/* Bars standing in for the Arabic (right to left), the Persian and the English. */
.skeleton { display: grid; gap: 10px; }
.skeleton span { height: 10px; border-radius: 10px; background: color-mix(in srgb, var(--m-translation) 18%, transparent); }
.skeleton.ar { gap: 18px; padding-block: 8px 6px; }
.skeleton.ar span { height: 13px; justify-self: end; background: color-mix(in srgb, var(--m-hadith-arabic) 24%, transparent); }
.skeleton.ar span:nth-child(1) { width: 92%; }
.skeleton.ar span:nth-child(2) { width: 36%; }
.skeleton.ar span:only-child { width: 74%; }
.skeleton.fa span { justify-self: end; }
.skeleton.fa span:nth-child(1),
.skeleton.en span:nth-child(1) { width: 96%; }
.skeleton.fa span:nth-child(2) { width: 52%; }
.skeleton.en span:nth-child(2) { width: 66%; }
.hadith-rule { height: 0.75px; background: var(--m-hairline); }
.hadith-tr { display: grid; gap: 7px; }

/* A hadith from the hadith library: its citation in small caps (12 px semibold,
   +6 %), the tradition and grading chips over "From the hadith library", then
   the library's Arabic in Amiri 22 on a 41 px line. A narration longer than
   three lines opens folded, with its translations hidden until "Show more". */
.hadith-source {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--source-ink);
}
.hadith-lib { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; }
.hadith-ar {
  font-family: var(--font-hadith);
  font-size: 1.375rem;
  line-height: 41px;
  color: var(--m-hadith-arabic);
  text-align: right;
  direction: rtl;
}
/* Folded to three lines. Amiri stacks a small damma over a shadda about
   2.3 px above the line box, and a browser (unlike the app) still paints the
   lines after the fold. So the clip starts 6 px above the first line, which
   keeps the marks on the Bukhari card's first line whole (the negative margin
   keeps the text where it was), and the folded card takes a 44 px line, the
   app's 41 px plus 3. That leaves room for a 1.5 px mask at the bottom to hide
   a stacked damma rising from line 4 (al-Taymi at phone widths) without
   touching line 3's lowest kasra. Measured in Chrome from 320 to 1440 px wide,
   9 Nov 2026. */
.hadith-ar.folded {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  line-height: 44px;
  padding-top: 6px;
  margin-top: -6px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.5px), transparent calc(100% - 1.5px));
  mask-image: linear-gradient(to bottom, #000 calc(100% - 1.5px), transparent calc(100% - 1.5px));
}
.hadith-tr.text { gap: 2px; }
.hadith-tr.text + .hadith-tr.text { margin-top: -2px; }
.hadith-tr .tr-fa { font-size: 1rem; line-height: 29px; }
.tr-en {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  line-height: 22.5px;
  color: var(--m-translation);
}
.hadith-body > .show-more-row { min-height: 28px; }
.show-more-pill.less svg { transform: rotate(180deg); }

/* ---------- Library (feed tiles) ---------- */

.feed {
  margin: 0;
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--hairline);
}
@media (min-width: 720px) { .feed { padding: 28px; } }

.feed-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; }
.feed-search {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--text-3);
  font-size: 0.9375rem;
  background: var(--tile);
  border: 1px solid var(--hairline);
}
.feed-search .icon { width: 17px; height: 17px; }
.feed-day {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-weight: 600;
  font-size: 1rem;
}
.feed-day .icon { width: 14px; height: 14px; color: var(--text-2); }

.tile {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-tile);
  background: var(--tile);
  border: 1px solid var(--hairline);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.025);
  transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out), background-color 200ms ease;
}
@media (min-width: 720px) { .tile { padding: 18px; } }
.tile:hover { background: var(--tile-raised); box-shadow: var(--shadow-raised); }
@media (prefers-reduced-motion: no-preference) { .tile:hover { transform: scale(1.012); } }

.tile-top { display: flex; gap: 14px; align-items: flex-start; }
.tile-text { flex: 1; min-width: 0; display: grid; gap: 6px; }
.tile-title { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
@media (min-width: 720px) { .tile-title { font-size: 1.2rem; } }
.tile-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 0.8125rem;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.series-chip { display: inline-flex; align-items: center; gap: 5px; }
.series-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--series, var(--gold)); }
.tile-excerpt {
  font-size: 0.9375rem;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tile [dir="rtl"] { text-align: right; }
.tile-cover {
  display: grid;
  place-items: center;
  width: 96px; height: 64px;
  flex: none;
  border-radius: 10px;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  background: linear-gradient(135deg, rgba(45, 115, 226, 0.14), rgba(45, 115, 226, 0.05));
  border: 1px solid var(--hairline);
}
@media (min-width: 720px) { .tile-cover { width: 150px; height: 100px; border-radius: 12px; } }
@media (max-width: 359px) {
  .feed { padding: 16px; }
  .tile-cover { width: 72px; height: 48px; }
}
.tile-cover .icon { width: 26px; height: 26px; }
@media (prefers-color-scheme: dark) {
  .tile-cover { background: linear-gradient(135deg, rgba(45, 115, 226, 0.22), rgba(45, 115, 226, 0.05)); }
}
.tile-foot { display: flex; align-items: center; gap: 8px; }
.tile-foot .spacer { margin-right: auto; }
.counter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  background: var(--chip-fill);
  border: 1px solid var(--hairline);
}
.counter .icon { width: 13px; height: 13px; }
.show-more { font-size: 0.8125rem; font-weight: 600; color: var(--ink); }

/* ---------- Export: an Obsidian-style graph (ExportView, ObsidianLinks, ObsidianVault) ----------
   Drawn as inline SVG. The whole graph drifts as one piece, so the links stay
   joined to their dots; a shared verse and a speaker pulse, and a few links
   carry a moving dash. All motion stops for people who ask for reduced motion. */

.graph-stage {
  --g-bg: #f7f6f3;
  --g-edge: rgba(13, 15, 18, 0.16);
  --g-flow: rgba(45, 115, 226, 0.7);
  --g-lecture: #2d73e2;
  --g-surah: #2b9a7c;
  --g-verse: #7cc8ae;
  --g-tag-ink: #1d6f58;
  --g-quote: #8a6420;
  margin: 0;
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--g-bg);
  border: 1px solid var(--hairline);
}
@media (prefers-color-scheme: dark) {
  .graph-stage {
    --g-bg: #191c1e;
    --g-edge: rgba(255, 255, 255, 0.16);
    --g-flow: rgba(91, 156, 247, 0.8);
    --g-lecture: #5b9cf7;
    --g-surah: #4cc58f;
    --g-verse: #2f8a66;
    --g-tag-ink: #6fd3a5;
    --g-quote: #d8a851;
  }
}
@media (min-width: 720px) { .graph-stage { padding: 26px; } }

.graph { display: block; width: 100%; height: auto; overflow: visible; }
.graph .edge { stroke: var(--g-edge); stroke-width: 1.2; fill: none; }
.graph .edge.flow { stroke: var(--g-flow); }
.graph .n-lecture { fill: var(--g-lecture); }
.graph .n-speaker { fill: var(--gold); }
.graph .n-surah { fill: var(--g-surah); }
.graph .n-verse { fill: var(--g-verse); }
.graph .halo { fill: var(--gold); opacity: 0; }
.graph .halo.verse { fill: var(--g-surah); }
.graph .lbl {
  font-family: var(--font-ui);
  font-size: 12px;
  fill: var(--text-2);
  text-anchor: middle;
  /* A halo in the background colour keeps labels readable over the links. */
  paint-order: stroke;
  stroke: var(--g-bg);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.graph .lbl.strong { fill: var(--text); font-weight: 600; }
.graph .lbl.scripture { fill: var(--g-tag-ink); font-weight: 500; }
.graph .lbl.rtl { font-size: 13px; direction: rtl; unicode-bidi: embed; }
/* Same fonts as the rest of the site: Persian in Vazirmatn, Arabic in the system font. */
.graph .lbl[lang="fa"] { font-family: var(--font-farsi); }

.graph-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.8125rem; color: var(--text-2); }
.graph-legend li { display: inline-flex; align-items: center; gap: 8px; }
.graph-legend .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--g-lecture); }
.graph-legend .dot.speaker { background: var(--gold); }
.graph-legend .dot.surah { background: var(--g-surah); }
.graph-legend .dot.verse { background: var(--g-verse); }

/* Keep graph labels readable when the picture shrinks. */
@media (max-width: 719px) {
  .graph .lbl { font-size: 24px; stroke-width: 6px; }
  .graph .lbl.rtl { font-size: 24px; }
  /* English lecture titles and the outer verses become plain dots; speakers, the shared verses
     and surahs, and the Arabic and Persian titles stay. */
  .graph .lbl:not(.strong):not(.keep):not(.rtl) { display: none; }
}
@media (min-width: 960px) {
  #export .showcase { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .graph .lbl { font-size: 15px; }
  .graph .lbl.rtl { font-size: 16px; }
}

/* A switch that pauses the graph's motion (WCAG 2.2.2), in HTML and CSS only. It shows
   only where it works (browsers with :has()) and where there is motion to pause. */
.graph-pause { display: none; }
@supports selector(:has(*)) {
  @media (prefers-reduced-motion: no-preference) {
    .graph-pause {
      justify-self: end;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      margin-block: -8px -6px;
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--text-2);
      cursor: pointer;
    }
  }
}
.graph-pause input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.graph-stage:has(.graph-pause input:checked) .graph * { animation-play-state: paused; }

.note-peek {
  margin: 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--tile);
  border: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.note-peek .nk { color: #6b7178; } /* 4.9:1 on the white note card; --text-3 is only 3.8:1 */
@media (prefers-color-scheme: dark) { .note-peek .nk { color: var(--text-3); } } /* 4.8:1 */
.note-peek .nl { color: var(--accent); }
.note-peek .nt { color: var(--g-tag-ink); }
.note-peek .nq { color: var(--g-quote); }

@media (prefers-reduced-motion: no-preference) {
  .graph .world { animation: graph-drift 16s ease-in-out infinite alternate; transform-box: view-box; transform-origin: 50% 50%; }
  .graph .halo { animation: graph-pulse 3.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
  .graph .halo.late { animation-delay: -1.7s; }
  .graph .edge.flow { stroke-dasharray: 3 7; animation: graph-flow 1.6s linear infinite; }
  .graph .n-lecture { animation: graph-glow 4.2s ease-in-out infinite alternate; }
  .graph .n-surah, .graph .n-verse { animation: graph-glow 5.6s ease-in-out -2s infinite alternate; }
}
@keyframes graph-drift {
  from { transform: translate(-7px, 4px) scale(0.985); }
  to { transform: translate(7px, -4px) scale(1.015); }
}
@keyframes graph-pulse {
  from { transform: scale(1); opacity: 0.5; }
  to { transform: scale(3.2); opacity: 0; }
}
@keyframes graph-flow { to { stroke-dashoffset: -20; } }
@keyframes graph-glow { from { opacity: 0.72; } to { opacity: 1; } }

/* Spotlight card under the feature grid: the Research dossier, with an outline of one
   (decorative: the copy beside it says the same). */
.spot {
  display: grid;
  gap: 24px;
  align-items: center;
  margin-top: 18px;
  padding: 24px;
  border-radius: var(--radius-lg);
}
@media (min-width: 900px) { .spot { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 40px; padding: 28px 32px; } }
.spot-copy { display: grid; gap: 10px; justify-items: start; }
.spot-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gold-ink);
  background: var(--gold-wash);
  border: 1px solid var(--gold-stroke);
}
.spot-badge .icon { width: 14px; height: 14px; }
.dossier-mock {
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--badge-fill);
  border: 1px solid var(--badge-stroke);
}
.dm-kicker { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-ink); }
.dm-title { display: block; width: 72%; height: 12px; margin-bottom: 4px; border-radius: 6px; background: var(--text-2); opacity: 0.5; }
.dm-part { display: grid; gap: 5px; }
.dm-head { font-size: 0.8125rem; font-weight: 600; }
.dossier-mock .line { display: block; height: 7px; border-radius: 4px; background: var(--hairline-strong); }
.dossier-mock .line.short { width: 60%; }
.dm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dm-chips span { width: 44px; height: 14px; border-radius: 999px; background: var(--gold-wash); border: 1px solid var(--gold-stroke); }
.dm-verse {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--gold-wash);
  border: 1px solid var(--gold-stroke);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gold-ink);
}
.dm-verse .icon { width: 14px; height: 14px; }
@media (prefers-color-scheme: dark) { .spot-badge, .dm-kicker, .dm-verse { color: var(--gold-light); } }

/* ---------- Feature grid ---------- */

.features {
  list-style: none;
  display: grid;
  gap: 14px;
}
@media (min-width: 640px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }

.feature {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  align-content: start;
  padding: 22px;
  border-radius: var(--radius-lg);
}
.feature .disc { grid-row: span 2; }
.feature h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; padding-top: 2px; }
.feature p { color: var(--text-2); font-size: 0.9375rem; }

/* Languages strip */
.languages {
  display: grid;
  gap: 18px;
  align-items: center;
  margin-top: 18px;
  padding: 24px;
  border-radius: var(--radius-lg);
}
@media (min-width: 900px) { .languages { grid-template-columns: minmax(0, 1fr) auto; padding: 28px 32px; } }
.lang-row { display: flex; flex-wrap: wrap; gap: 10px; }
.lang-big {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  min-height: 52px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 1.15rem;
  font-weight: 600;
  background: var(--badge-fill);
  border: 1px solid var(--badge-stroke);
}

/* ---------- Plans (PaywallView) ---------- */

.plans-shell { display: grid; gap: 18px; }

.trial {
  display: grid;
  gap: 16px;
  align-items: center;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(242, 206, 132, 0.22), rgba(216, 168, 81, 0.06)),
    var(--tile);
  border: 1px solid var(--gold-stroke);
}
@media (min-width: 760px) { .trial { grid-template-columns: auto minmax(0, 1fr) auto; padding: 24px 28px; } }
.trial h3 { font-size: 1.15rem; }
.trial p { color: var(--text-2); }
/* On the gold-tinted panel the dark-mode secondary grey is just under 4.5:1. */
@media (prefers-color-scheme: dark) { .trial p { color: #b3b9be; } }
.trial .trial-figure {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}
/* One line beside the text on wider screens; on a phone "Up to 180 minutes free" may wrap. */
@media (min-width: 760px) { .trial .trial-figure { white-space: nowrap; } }

.period {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 8px;
}
/* iOS segmented control */
.segmented {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border-radius: 10px;
  background: rgba(118, 118, 128, 0.12);
  border: 0;
  margin: 0;
  min-width: 240px;
}
@media (prefers-color-scheme: dark) { .segmented { background: rgba(118, 118, 128, 0.24); } }
.segmented legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 36px;
  padding: 4px 16px;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}
.segmented input:checked + label {
  font-weight: 600;
  background: var(--tile);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}
@media (prefers-color-scheme: dark) { .segmented input:checked + label { background: #636366; } }
.segmented input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }

.plans {
  list-style: none;
  display: grid;
  gap: 16px;
}
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  border-radius: var(--radius-tile);
}
.plan.featured { border-color: rgba(216, 168, 81, 0.55); box-shadow: 0 10px 30px rgba(216, 168, 81, 0.14), var(--shadow-card); }
.plan-head { display: flex; align-items: flex-start; gap: 12px; }
.plan-name { display: flex; align-items: center; gap: 8px; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.012em; }
.plan-tag { color: var(--text-2); font-size: 0.9375rem; margin-top: 2px; }
.plan-price { margin-left: auto; text-align: right; flex: none; }
.plan-price .amount { font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.plan-price .per { display: block; font-size: 0.75rem; color: var(--text-2); }
.plan-price .save { display: block; font-size: 0.75rem; font-weight: 600; color: var(--ink); }
.plan-hours {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--wash);
  border: 1px solid var(--wash-stroke);
  font-weight: 500;
}
.plan-hours .icon { width: 18px; height: 18px; color: var(--ink); }
.plan-hours + .plan-hours { margin-top: -8px; }
.plan-foot { margin-top: auto; font-size: 0.8125rem; color: var(--text-2); }

.price-annual { display: none; }
.plans-shell:has(#period-annual:checked) .price-monthly { display: none; }
.plans-shell:has(#period-annual:checked) .price-annual { display: block; }

.topup {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
  border-radius: var(--radius-tile);
}
@media (min-width: 640px) { .topup { grid-template-columns: auto minmax(0, 1fr) auto; } }
.topup h3 { font-size: 1.0625rem; font-weight: 600; }
.topup p { color: var(--text-2); font-size: 0.9375rem; }
.topup .price-tag {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--wash);
  border: 1px solid var(--wash-stroke);
}
@media (min-width: 640px) { .topup .price-tag { grid-column: auto; } }

.fine-print { display: grid; gap: 8px; max-width: 52rem; font-size: 0.8125rem; color: var(--text-2); }

/* ---------- Privacy band ---------- */

.privacy-band {
  display: grid;
  gap: 28px;
  padding: 28px 24px;
  border-radius: var(--radius-xl);
  background: var(--panel);
  border: 1px solid var(--hairline);
}
@media (min-width: 900px) { .privacy-band { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); padding: 48px; gap: 48px; } }
.privacy-points { list-style: none; display: grid; gap: 18px; }
.privacy-points li { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }
.privacy-points .disc { grid-row: span 2; width: 40px; height: 40px; }
.privacy-points h3 { font-size: 1rem; font-weight: 600; padding-top: 1px; }
.privacy-points p { color: var(--text-2); font-size: 0.9375rem; }

/* ---------- Closing call to action ---------- */

.cta-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 20px;
  justify-items: start;
  padding: 36px 26px;
  border-radius: var(--radius-xl);
  color: #fff;
  background:
    radial-gradient(circle at 100% 0%, rgba(91, 156, 247, 0.5), rgba(91, 156, 247, 0) 58%),
    linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 70%, var(--blue-abyss) 100%);
  background-blend-mode: screen, normal;
  box-shadow: var(--hero-shadow);
}
@media (min-width: 720px) { .cta-panel { padding: 56px; } }
.cta-panel .h2 { max-width: 18ch; }
.cta-panel p { max-width: 36rem; color: rgba(255, 255, 255, 0.86); }
.cta-panel .waveform { position: absolute; z-index: -1; top: 50%; right: 56px; transform: translateY(-50%) scale(1.6); transform-origin: right center; display: none; }
@media (min-width: 900px) { .cta-panel .waveform { display: flex; } }

/* ---------- FAQ ---------- */

.faq { display: grid; gap: 10px; }
.faq details {
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--card-stroke);
  box-shadow: var(--shadow-card);
}
.faq summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 14px 20px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 9px; height: 9px;
  border-right: 2px solid var(--text-2);
  border-bottom: 2px solid var(--text-2);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 200ms ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq .answer { display: grid; gap: 10px; padding: 0 20px 18px; color: var(--text-2); }
.faq .answer ul { padding-left: 1.2em; display: grid; gap: 6px; }
/* The Home page's short FAQ: the heading beside the questions on wide screens,
   above them on narrow ones. */
.faq-band { display: grid; gap: 28px; }
.faq-band .section-head { margin-bottom: 0; }
@media (min-width: 960px) {
  .faq-band { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
}

/* ---------- Document pages (Privacy, Support) ---------- */

.doc-hero { padding-block: 40px 8px; }
@media (min-width: 720px) { .doc-hero { padding-block: 64px 16px; } }
.doc-hero .h2 { margin-top: 12px; }
.doc-hero .lead { margin-top: 14px; max-width: 42rem; }
.doc-hero .caption { margin-top: 14px; }

.draft-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 24px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--gold-wash);
  border: 1px solid var(--gold-stroke);
  font-size: 0.9375rem;
}
.draft-banner .icon { width: 22px; height: 22px; color: var(--gold); margin-top: 1px; }
.draft-banner strong { display: block; margin-bottom: 2px; }

.doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding-block: 32px 96px;
}
@media (min-width: 1000px) {
  .doc { grid-template-columns: 240px minmax(0, 1fr); gap: 64px; }
}
.toc {
  align-self: start;
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: none;
}
@media (min-width: 1000px) { .toc { display: block; } }
.toc p { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); margin-bottom: 10px; }
.toc ol { list-style: none; display: grid; gap: 2px; border-left: 1px solid var(--hairline); }
.toc a {
  display: block;
  padding: 6px 0 6px 14px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 0.875rem;
  color: var(--text-2);
  text-decoration: none;
}
.toc a:hover { color: var(--text); border-left-color: var(--hairline-strong); }

.prose { max-width: 46rem; }
.prose > * + * { margin-top: 16px; }
.prose h2 {
  margin-top: 48px;
  padding-top: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.65rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 28px; font-size: 1.0625rem; font-weight: 600; }
.prose p, .prose li { color: var(--text); }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: 8px; }
.prose .table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--hairline); }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 560px; }
.prose caption { text-align: left; padding: 12px 16px; font-weight: 600; caption-side: top; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 16px; border-top: 1px solid var(--hairline); }
.prose thead th { background: var(--panel); font-size: 0.8125rem; font-weight: 600; color: var(--text-2); border-top: 0; }
.prose .note {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  font-size: 0.9375rem;
}

/* Contact form: a plain HTML form (no JavaScript); a Cloudflare Worker at
   /api/contact emails it to the company inbox (website/contact-worker). */
.contact-form { display: grid; gap: 14px; padding: 22px; border-radius: var(--radius-lg); }
@media (min-width: 720px) { .contact-form { padding: 26px 28px; } }
.prose .contact-form > * + * { margin-top: 0; }
.prose .contact-form h3 { margin-top: 0; font-size: 1.0625rem; font-weight: 600; }
.field-row { display: grid; gap: 14px; }
@media (min-width: 640px) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: 6px; font-size: 0.875rem; font-weight: 600; color: var(--text); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  color: var(--text);
  background: var(--tile);
  /* An edge of at least 3:1 against the card, so the boxes can be seen (WCAG 1.4.11). */
  border: 1px solid rgba(13, 15, 18, 0.45);
  border-radius: 10px;
}
@media (prefers-color-scheme: dark) {
  .field input,
  .field select,
  .field textarea { border-color: rgba(255, 255, 255, 0.36); } /* about 3.3:1 */
}
/* Safari otherwise keeps its small native pop-up, which ignores the height and padding:
   reset the look and draw the arrow in CSS, so the menu matches the other boxes. */
.field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 21px) 50%, calc(100% - 16px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
/* High-contrast modes drop the drawn arrow: give the menu its native look back. */
@media (forced-colors: active) {
  .field select { -webkit-appearance: auto; appearance: auto; background-image: none; }
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: transparent; }
.form-note { font-size: 0.8125rem; color: var(--text-2); }
.prose .form-note { color: var(--text-2); }
.contact-form .btn { justify-self: start; }
/* Honeypot: off-screen for people, filled in by careless bots. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.contact-cards { display: grid; gap: 14px; margin-top: 8px; }
@media (min-width: 720px) { .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contact-card { display: grid; gap: 8px; padding: 20px; border-radius: var(--radius-lg); }
.contact-card h3 { font-size: 1.0625rem; font-weight: 600; margin-top: 4px; }
.contact-card p { color: var(--text-2); font-size: 0.9375rem; }

/* What the icons and labels mean: the Figma glossary page ("5 · Glossary"). Each mark
   is drawn with the same classes as the cards on the home page. */
.glossary { display: grid; }
.prose .glossary-intro { color: var(--text-2); }
.prose .glossary h3 { margin-top: 32px; }
.prose .gloss-panel {
  list-style: none;
  display: grid;
  gap: 0;
  margin-top: 12px;
  padding: 4px 20px;
  border-radius: var(--radius);
  background: var(--m-hadith-paper);
  border: 1px solid var(--card-stroke);
  box-shadow: var(--m-shadow);
}
.prose .gloss-panel.quran { background: var(--m-quran-paper); }
.gloss-row {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  align-items: center;
  gap: 12px 24px;
  padding: 16px 0;
}
.gloss-row + .gloss-row { border-top: 0.75px solid var(--m-hairline); }
/* A mark wider than its column (the For review note and the hadith stamps) sits
   above its name and meaning, as on the Figma page. */
.gloss-row.wide { grid-template-columns: minmax(0, 1fr); }
.gloss-row.wide .gloss-text { padding-left: 200px; }
.gloss-mark { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.gloss-mark.stack { flex-direction: column; align-items: stretch; gap: 6px; }
.gloss-mark .cartouche { flex: 1; }
.gloss-mark .tanzil-seal { margin-left: 0; }
.gloss-mark .tr-tag[lang="fa"] { flex: 1; }
.gloss-mark .copy-disc { margin-inline: 7px; }
.gloss-mark .more-glyph { margin: 11px; }
/* The name and meaning start at the top of the row, like every entry on the Figma
   page; only the mark is centred. */
.gloss-text { display: grid; gap: 2px; align-self: start; }
.prose .gloss-name { font-size: 0.9375rem; font-weight: 700; line-height: 1.35; color: var(--m-primary); }
.prose .gloss-meaning { font-size: 0.9375rem; line-height: 1.45; color: var(--m-secondary); }
.prose .gloss-note { margin-top: 4px; font-size: 0.8125rem; line-height: 1.45; color: var(--m-secondary); }
.prose .gloss-after { margin-top: 12px; font-size: 0.875rem; color: var(--text-2); }
.gloss-after .time-chip { vertical-align: middle; margin-inline: 2px; }
@media (max-width: 639px) {
  .gloss-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .gloss-row.wide .gloss-text { padding-left: 0; }
  .gloss-mark .cartouche, .gloss-mark .tr-tag[lang="fa"] { flex: 0 1 auto; }
  .gloss-mark.stack { align-items: flex-start; }
}

/* Glossary marks that only appear there. */
.rosette.solo { font-size: 1.75rem; line-height: 42px; }
/* The hadith library's tradition and grading chips (MushafLibraryStamp): 11 px
   semibold on gold at 14 %, with a gold rule, over the books icon and "From the
   hadith library". */
.lib-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.02em;
  color: var(--m-gold-ink);
  background: color-mix(in srgb, var(--m-gold) 14%, transparent);
  border: 0.75px solid var(--m-gold-rule);
}
.lib-stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-basis: 100%;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 16px;
  color: var(--m-gold-ink);
}
.lib-stamp svg { width: 13px; height: 13px; flex: none; }
/* A quiet line under the library stamp (MushafLibraryStamp notes: caption in
   the secondary ink), e.g. "Lecturer cited: al-Kāfī". */
.lib-line { flex-basis: 100%; font-size: 0.75rem; line-height: 16px; color: var(--m-secondary); }
.dua-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--m-stamp);
  border: 0.75px solid color-mix(in srgb, var(--m-stamp) 45%, transparent);
}
.dua-tag svg { width: 13px; height: 13px; flex: none; }
.show-more-row { display: flex; align-items: center; gap: 10px; flex: 1; }
.show-more-row::before,
.show-more-row::after { content: ""; flex: 1; height: 1px; background: var(--m-hairline); }
.show-more-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 0 12px 0 14px;
  border-radius: 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--m-brand-ink);
  background: var(--m-time-chip);
}
.show-more-pill svg { width: 12px; height: 12px; flex: none; }

/* Values still to be supplied: visible on purpose so they can't be missed. */
.tbc {
  padding: 1px 6px;
  border-radius: 6px;
  font-style: normal;
  font-weight: 600;
  color: #7a3b00;
  background: #ffe7b8;
  border: 1px dashed #c47a00;
}
@media (prefers-color-scheme: dark) { .tbc { color: #ffd38a; background: rgba(196, 122, 0, 0.22); border-color: #d99a3a; } }

/* ---------- Footer ---------- */

.site-footer {
  margin-top: 24px;
  padding-block: 40px 48px;
  border-top: 1px solid var(--hairline);
  background: var(--panel);
  font-size: 0.875rem;
  color: var(--text-2);
}
.footer-grid { display: grid; gap: 28px; }
@media (min-width: 860px) { .footer-grid { grid-template-columns: minmax(0, 1.2fr) auto; align-items: start; } }
.footer-brand { display: grid; gap: 12px; max-width: 30rem; }
.footer-brand .brand { margin: 0; }
.footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.footer-links a { color: var(--text); font-weight: 500; text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.footer-links a:hover { text-decoration: underline; }
.legal { display: grid; gap: 6px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--hairline); font-size: 0.8125rem; }

/* ---------- 404 ---------- */

.lost { display: grid; place-items: center; text-align: center; gap: 18px; padding-block: 96px 120px; }
.lost .h2 { max-width: 16ch; }
.lost .lead { max-width: 38rem; }

/* ---------- Scroll reveal (progressive; content is always visible without it) ---------- */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }
}

/* ---------- Print ---------- */

@media print {
  .site-header, .site-footer, .toc, .skip-link, .hero-device, .waveform { display: none !important; }
  body { background: #fff; color: #000; }
  .prose { max-width: none; }
}