/* ==========================================================================
   Kevser — website styles
   One stylesheet for index / privacy / terms / support.
   Palette, arch and crescent motifs are derived from the app icon
   (assets/kevser-icon.png): deep emerald, warm cream, muted gold.
   No frameworks, no external fonts, no network requests.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Sampled from the app icon */
  --emerald-950: #0B1A14;
  --emerald-900: #102419;
  --emerald-800: #143026;
  --emerald-700: #1C4234;
  --emerald-600: #245243;
  --emerald-500: #2C5744;

  --cream-50:  #FFFBF3;
  --cream-100: #FDF3E2;
  --cream-200: #FBE6C7;
  --sand-300:  #F1DDB9;
  --sand-400:  #E8C89A;
  --sand-500:  #D2AE79;
  --gold-400:  #D6AE6E;
  --gold-500:  #C08F3E;
  --gold-ink:  #8A5F1E;

  --ink:       #14261D;
  --ink-muted: #3E4F44;

  /* The app's own in-app palette, used only inside product mock-ups so the
     screens on this page look like the screens in the app. */
  --app-day-bar:     #F2C4D8;
  --app-day-page:    #FDF3F6;
  --app-day-surface: #FFFFFF;
  --app-day-text:    #4C2B38;
  --app-day-muted:   #73515D;
  --app-day-accent:  #B8477A;
  --app-day-sep:     #E4B6C6;
  --app-night-bar:     #4A3B63;
  --app-night-page:    #1E163A;
  --app-night-surface: #2E2340;
  --app-night-text:    #E8E0F2;
  --app-night-muted:   #BAA9CB;
  --app-night-accent:  #B9A6D9;
  --app-night-sep:     #4C4076;

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-arabic: "Geeza Pro", Damascus, "Al Bayan", "Noto Naskh Arabic", "Traditional Arabic", serif;

  --shell: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --band-pad: clamp(3.5rem, 7vw, 6.5rem);
  --radius: 4px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--cream-100);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { height: auto; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }

/* --------------------------------------------------------------------------
   3. Accessibility helpers
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  background: var(--emerald-800);
  color: var(--cream-100);
  padding: 0.85rem 1.25rem;
  font: 600 0.9rem/1 var(--font-ui);
  border-radius: var(--radius);
  transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 2px;
}
.band--dark :focus-visible { outline-color: var(--gold-400); }

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

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--wide { max-width: 1320px; }

.band {
  position: relative;
  padding-block: var(--band-pad);
}
.band--cream { background: var(--cream-100); }
.band--sand  { background: var(--cream-200); }
.band--dark  { background: var(--emerald-800); color: var(--cream-200); }
.band--dark h1, .band--dark h2, .band--dark h3 { color: var(--cream-50); }
.band--deep  { background: var(--emerald-900); color: var(--cream-200); }

.band--dark a:not(.btn):not(.badge-link),
.band--deep a:not(.btn):not(.badge-link) { color: var(--gold-400); }

/* Manuscript margin rail: a hairline and a numeral beside each section. */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font: 600 0.72rem/1.4 var(--font-ui);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.band--dark .eyebrow, .band--deep .eyebrow { color: var(--gold-400); }
.eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
  max-width: 7rem;
}
.eyebrow__num {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
}

h2.section-title { font-size: clamp(1.85rem, 3.4vw, 2.75rem); }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.3rem); letter-spacing: -0.01em; }

.lede {
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.65;
  color: var(--ink-muted);
  max-width: 58ch;
}
.band--dark .lede, .band--deep .lede { color: rgba(251, 230, 199, 0.86); }

.measure { max-width: 62ch; }

.rule {
  border: 0;
  height: 1px;
  background: var(--sand-400);
  margin: 0;
}
.band--dark .rule, .band--deep .rule { background: rgba(214, 174, 110, 0.32); }

/* Crescent ornament between major movements */
.ornament {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.25rem;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}
.ornament::before, .ornament::after {
  content: "";
  height: 1px;
  background: var(--sand-400);
}
.band--dark .ornament::before, .band--dark .ornament::after,
.band--deep .ornament::before, .band--deep .ornament::after {
  background: rgba(214, 174, 110, 0.3);
}
.ornament svg { display: block; width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   5. Site header
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 5;
  background: var(--emerald-900);
  color: var(--cream-200);
  border-bottom: 1px solid rgba(214, 174, 110, 0.22);
}
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 0.85rem;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--cream-50);
  min-height: 44px;
}
.wordmark img {
  width: 38px; height: 38px;
  border-radius: 9px;
  border: 1px solid rgba(214, 174, 110, 0.45);
  display: block;
}
.wordmark__text {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.01em;
}
.wordmark__text span {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.63rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-top: 2px;
}
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.35rem;
  list-style: none;
  margin: 0; padding: 0;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 2px;
  text-decoration: none;
  font-size: 0.9rem;
  color: rgba(251, 230, 199, 0.88);
  border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: var(--cream-50); border-bottom-color: var(--gold-400); }
.site-nav a[aria-current="page"] { color: var(--gold-400); border-bottom-color: var(--gold-400); }

/* --------------------------------------------------------------------------
   6. Buttons, badges, links
   -------------------------------------------------------------------------- */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.badge-link {
  display: inline-block;
  line-height: 0;
  border-radius: 8px;
}
.badge-link img { width: 168px; height: auto; display: block; }
.badge-link:hover { opacity: 0.9; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  font: 600 0.95rem/1 var(--font-ui);
  text-decoration: none;
  border: 1px solid var(--emerald-700);
  color: var(--emerald-800);
  background: transparent;
  cursor: pointer;
}
.btn:hover { background: rgba(28, 66, 52, 0.08); }
.band--dark .btn, .band--deep .btn, .hero .btn, .doc-hero .btn {
  border-color: rgba(214, 174, 110, 0.6);
  color: var(--cream-100);
}
.band--dark .btn:hover, .band--deep .btn:hover,
.hero .btn:hover, .doc-hero .btn:hover { background: rgba(214, 174, 110, 0.14); }

.text-link {
  color: var(--gold-ink);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.text-link:hover { color: var(--emerald-700); }

.availability {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: rgba(251, 230, 199, 0.72);
}
.availability--spaced { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--emerald-900);
  color: var(--cream-200);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='150' viewBox='0 0 128 150'%3E%3Cpath d='M14 152 V72 C14 32 36 8 64 8 C92 8 114 32 114 72 V152' fill='none' stroke='%23D6AE6E' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 128px 150px;
  opacity: 0.08;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  right: -18%;
  top: -30%;
  width: 60%;
  height: 130%;
  background: radial-gradient(closest-side, rgba(44, 87, 68, 0.9), rgba(16, 36, 25, 0));
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2.5rem, 4vw, 4rem);
}
.hero__inner--concise { min-height: 680px; }
.hero .eyebrow { margin-bottom: 1rem; }
.hero h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.15rem);
  line-height: 1.03;
  letter-spacing: -0.025em;
  color: var(--cream-50);
  margin-bottom: 1.4rem;
  max-width: 15ch;
}
.hero h1 em {
  font-style: italic;
  color: var(--gold-400);
}
.hero__lede {
  font-size: clamp(1.05rem, 1.45vw, 1.22rem);
  line-height: 1.62;
  color: rgba(251, 230, 199, 0.9);
  max-width: 48ch;
  margin-bottom: 2rem;
}
.hero__promise {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  font-size: 0.88rem;
  color: rgba(251, 230, 199, 0.78);
}
.hero__promise li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.hero__promise li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold-400);
  flex: none;
}

/* The arch "niche" the device sits inside — the icon's own composition. */
.hero__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.niche {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 0;
  width: 100%;
}
.niche__arch {
  position: absolute;
  inset: auto 0 0 0;
  width: min(100%, 500px);
  margin-inline: auto;
  height: auto;
}
.niche .device { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   8. Feature rows
   -------------------------------------------------------------------------- */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.feature--flip .feature__media { order: -1; }
.feature__media { display: flex; justify-content: center; }

.spec-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  border-top: 1px solid var(--sand-400);
}
.band--dark .spec-list, .band--deep .spec-list { border-color: rgba(214, 174, 110, 0.3); }
.spec-list li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.9rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--sand-400);
  font-size: 0.96rem;
}
.band--dark .spec-list li, .band--deep .spec-list li { border-color: rgba(214, 174, 110, 0.3); }
.spec-list li strong { font-weight: 600; }
.spec-list svg { width: 18px; height: 18px; margin-top: 4px; color: var(--gold-ink); }
.band--dark .spec-list svg, .band--deep .spec-list svg { color: var(--gold-400); }

.note {
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  border-left: 2px solid var(--gold-500);
  background: rgba(214, 174, 110, 0.12);
  font-size: 0.92rem;
  color: var(--ink-muted);
}
.band--dark .note, .band--deep .note {
  color: rgba(251, 230, 199, 0.85);
  background: rgba(214, 174, 110, 0.09);
}

/* Mock caption under a device */
.mock-caption {
  margin: 1rem auto 0;
  max-width: 30ch;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-muted);
}
.band--dark .mock-caption, .band--deep .mock-caption { color: rgba(251, 230, 199, 0.7); }

/* --------------------------------------------------------------------------
   9. Language table
   -------------------------------------------------------------------------- */
.languages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  margin-top: 2.5rem;
}
.lang {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 0.35rem 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(214, 174, 110, 0.28);
}
.lang__name {
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: var(--cream-50);
}
.lang__native {
  font-size: 0.85rem;
  color: var(--gold-400);
  justify-self: end;
  text-align: right;
}
.lang__by {
  grid-column: 1 / -1;
  font-size: 0.86rem;
  color: rgba(251, 230, 199, 0.72);
}
.lang__tags {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
}
.tag {
  font: 600 0.66rem/1 var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(214, 174, 110, 0.45);
  border-radius: 999px;
  color: var(--gold-400);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   10. Card grids (marks, tafsir, privacy, sources)
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.section-head--centered {
  max-width: 720px;
  margin: 0 auto 2.5rem;
  text-align: center;
}
.concise-cards { margin-top: 2.5rem; }
/* Four cards read better as a square than as a row of three plus an orphan. */
@media (min-width: 780px) {
  .cards--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.card {
  position: relative;
  padding: 1.6rem 1.5rem 1.75rem;
  background: var(--cream-50);
  border: 1px solid var(--sand-400);
  border-radius: var(--radius);
}
.band--dark .card, .band--deep .card {
  background: rgba(255, 251, 243, 0.05);
  border-color: rgba(214, 174, 110, 0.3);
}
.card h3 { margin-bottom: 0.6rem; }
.card p { font-size: 0.94rem; color: var(--ink-muted); }
.band--dark .card p, .band--deep .card p { color: rgba(251, 230, 199, 0.82); }
.card__arch {
  display: block;
  width: 26px; height: 32px;
  margin-bottom: 1rem;
  color: var(--gold-500);
}
.band--dark .card__arch, .band--deep .card__arch { color: var(--gold-400); }

/* Sources */
.sources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem clamp(1.5rem, 4vw, 3rem);
  margin-top: 2rem;
}
.source {
  padding-top: 1rem;
  border-top: 1px solid var(--sand-400);
  font-size: 0.9rem;
  color: var(--ink-muted);
}
.source h3 {
  font-size: 1rem;
  margin-bottom: 0.35rem;
}
.source a { text-decoration-color: var(--sand-500); }

/* --------------------------------------------------------------------------
   11. Product mock-ups (built in HTML/CSS, no screenshots)
   -------------------------------------------------------------------------- */
.device {
  --m-bar: var(--app-day-bar);
  --m-page: var(--app-day-page);
  --m-surface: var(--app-day-surface);
  --m-text: var(--app-day-text);
  --m-muted: var(--app-day-muted);
  --m-accent: var(--app-day-accent);
  --m-sep: var(--app-day-sep);
  --m-select: rgba(184, 71, 122, 0.12);
  --m-highlight: rgba(247, 226, 122, 0.75);
  --m-word: rgba(184, 71, 122, 0.22);

  width: min(310px, 100%);
  padding: 10px;
  border-radius: 38px;
  background: linear-gradient(160deg, #23392E, #0E1D16 65%);
  box-shadow: 0 24px 50px rgba(9, 20, 15, 0.4), 0 0 0 1px rgba(214, 174, 110, 0.35);
}
.screen {
  border-radius: 29px;
  overflow: hidden;
  background: var(--m-page);
  color: var(--m-text);
  font-family: var(--font-ui);
  display: flex;
  flex-direction: column;
  min-height: 480px;
}
.screen__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 0.9rem 0.7rem;
  background: var(--m-bar);
  color: var(--m-text);
}
.screen__bar svg { width: 17px; height: 17px; flex: none; }
.screen__title {
  flex: 1 1 auto;
  text-align: center;
  font: 600 0.92rem/1.2 var(--font-ui);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.screen__bar-group { display: flex; align-items: center; gap: 0.75rem; }

.screen__page {
  flex: 1 1 auto;
  padding: 0.95rem 0.9rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.mock-ayah {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.35rem 0.35rem 0.5rem;
  border-radius: 6px;
}
.mock-ayah--selected { background: var(--m-select); }
.mock-ayah--highlight .mock-ayah__translation { background: var(--m-highlight); box-shadow: 0 0 0 3px var(--m-highlight); }
.mock-ayah__margin { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 6px; }
.mock-ayah__margin svg { width: 11px; height: 11px; color: var(--m-accent); }
.mock-ayah__body { min-width: 0; }
.mock-ayah__arabic {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0 0 0.4rem;
}
.mock-ayah__arabic .num {
  flex: none;
  padding-top: 0.45rem;
  font-family: var(--font-ui);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--m-accent);
}
.mock-ayah__arabic .txt {
  flex: 1 1 auto;
  min-width: 0;
  direction: rtl;
  text-align: right;
  font-family: var(--font-arabic);
  font-size: 1.16rem;
  line-height: 2.05;
}
.mock-word { border-radius: 3px; padding: 0 2px; }
.mock-word--spoken { background: var(--m-word); box-shadow: 0 -1px 0 1px var(--m-word); }
.mock-ayah__translation {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--m-text);
}
.mock-ayah__translation .num {
  font-family: var(--font-ui);
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--m-accent);
  margin-right: 0.3rem;
}

.screen__transport {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.6rem 0 1rem;
}
.screen__transport span {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--m-surface);
  color: var(--m-accent);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14);
}
.screen__transport span svg { width: 21px; height: 21px; }
.screen__transport span.is-dim { opacity: 0.35; }

/* Reading-plan screen */
.plan-card {
  background: var(--m-surface);
  border-radius: 8px;
  padding: 0.8rem 0.85rem;
  box-shadow: 0 1px 0 var(--m-sep);
}
.plan-card h4 {
  margin: 0 0 0.5rem;
  font: 600 0.9rem/1.3 var(--font-ui);
  font-family: var(--font-ui);
  letter-spacing: 0;
}
.plan-meter {
  height: 5px;
  border-radius: 999px;
  background: var(--m-sep);
  overflow: hidden;
}
.plan-meter i {
  display: block;
  height: 100%;
  background: var(--m-accent);
}
.plan-sub {
  margin: 0.5rem 0 0;
  font-size: 0.68rem;
  color: var(--m-muted);
}
.plan-khatm {
  margin: 0.4rem 0 0;
  font: 600 0.7rem/1.4 var(--font-ui);
  color: var(--m-accent);
}
.plan-head {
  margin: 0.9rem 0 0.4rem;
  font: 600 0.63rem/1 var(--font-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--m-muted);
}
.plan-day {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.2rem 0.75rem;
  padding: 0.55rem 0.6rem;
  background: var(--m-surface);
  border-bottom: 1px solid var(--m-sep);
  font-size: 0.72rem;
}
.plan-day:first-of-type { border-radius: 8px 8px 0 0; }
.plan-day:last-of-type { border-bottom: 0; border-radius: 0 0 8px 8px; }
.plan-day b { font: 600 0.74rem/1.3 var(--font-ui); }
.plan-day .range { grid-column: 1 / -1; color: var(--m-muted); font-size: 0.68rem; }
.plan-day .count { color: var(--m-accent); font-weight: 600; white-space: nowrap; }
.plan-day--today { background: var(--m-select); }
.mock-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding: 0.6rem 0.7rem;
  background: var(--m-surface);
  border-radius: 8px;
  font-size: 0.74rem;
}
.mock-toggle i {
  width: 34px; height: 20px;
  border-radius: 999px;
  background: var(--m-accent);
  position: relative;
  flex: none;
}
.mock-toggle i::after {
  content: "";
  position: absolute;
  top: 2px; right: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
}

/* Free-standing mock cards (marks & search section) */
.mock-stack {
  display: grid;
  gap: 1rem;
  width: min(360px, 100%);
}
.mock-panel {
  background: var(--app-day-surface);
  border: 1px solid var(--app-day-sep);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  box-shadow: 0 12px 26px rgba(20, 38, 29, 0.1);
  color: var(--app-day-text);
  font-size: 0.85rem;
}
.mock-panel__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font: 600 0.66rem/1 var(--font-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--app-day-accent);
  margin-bottom: 0.6rem;
}
.mock-panel__head svg { width: 14px; height: 14px; }
.mock-panel p { margin: 0 0 0.4rem; line-height: 1.5; }
.mock-panel p:last-child { margin-bottom: 0; }
.mock-panel .ref { color: var(--app-day-muted); font-size: 0.74rem; }
.mock-panel mark {
  background: rgba(184, 71, 122, 0.16);
  color: inherit;
  font-weight: 700;
  border-radius: 2px;
  padding: 0 1px;
}
.mock-panel--note { border-left: 3px solid var(--app-day-accent); }
.mock-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0.7rem 0.85rem;
  background: var(--app-day-surface);
  border: 1px solid var(--app-day-sep);
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(20, 38, 29, 0.12);
}
.mock-toolbar span {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--app-day-text);
}
.mock-toolbar span svg { width: 18px; height: 18px; }
.mock-swatches { display: flex; gap: 0.4rem; align-items: center; }
.mock-swatches i {
  width: 16px; height: 16px;
  border-radius: 50%;
  display: block;
}

/* Tafsir sheet mock */
.sheet {
  width: min(430px, 100%);
  background: var(--cream-50);
  border: 1px solid var(--sand-400);
  border-radius: 14px 14px 4px 4px;
  overflow: hidden;
  box-shadow: 0 20px 44px rgba(11, 26, 20, 0.16);
}
.sheet__grip {
  width: 42px; height: 4px;
  border-radius: 999px;
  background: var(--sand-500);
  margin: 0.7rem auto 0.9rem;
}
.sheet__body { padding: 0 1.35rem 1.5rem; }
.sheet__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.sheet__tabs span {
  font: 600 0.72rem/1 var(--font-ui);
  padding: 0.5rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--sand-400);
  color: var(--ink-muted);
}
.sheet__tabs span.is-on {
  background: var(--emerald-700);
  border-color: var(--emerald-700);
  color: var(--cream-100);
}
.sheet__ref {
  font: 600 0.7rem/1 var(--font-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.55rem;
}
.sheet__arabic {
  direction: rtl;
  text-align: right;
  font-family: var(--font-arabic);
  font-size: 1.3rem;
  line-height: 2;
  margin: 0 0 0.75rem;
}
.sheet__text {
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink);
}
/* Abstracted commentary body: the tafsir text itself is not reproduced here. */
.sheet__lines {
  display: grid;
  gap: 0.62rem;
  padding: 0.2rem 0 0.35rem;
}
.sheet__lines i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(28, 66, 52, 0.16), rgba(28, 66, 52, 0.07));
}
.sheet__lines i:nth-child(2) { width: 96%; }
.sheet__lines i:nth-child(3) { width: 99%; }
.sheet__lines i:nth-child(4) { width: 91%; }
.sheet__lines i:nth-child(5) { width: 58%; }
.sheet__credit {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--sand-400);
  font-size: 0.76rem;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   13. Document pages (privacy / terms / support)
   -------------------------------------------------------------------------- */
.doc-hero {
  background: var(--emerald-900);
  color: var(--cream-200);
  padding-block: clamp(2.75rem, 5vw, 4.25rem);
  position: relative;
  overflow: hidden;
}
.doc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='150' viewBox='0 0 128 150'%3E%3Cpath d='M14 152 V72 C14 32 36 8 64 8 C92 8 114 32 114 72 V152' fill='none' stroke='%23D6AE6E' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 128px 150px;
  opacity: 0.07;
}
.doc-hero > .shell { position: relative; z-index: 1; }
.doc-hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  color: var(--cream-50);
  max-width: 20ch;
}
.doc-hero p { margin-top: 1rem; max-width: 62ch; color: rgba(251, 230, 199, 0.85); }
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
  font-size: 0.83rem;
  color: rgba(251, 230, 199, 0.75);
}

.doc {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: var(--band-pad);
  align-items: start;
}
.toc {
  position: sticky;
  top: 1.5rem;
  padding: 1.25rem 1.35rem;
  background: var(--cream-50);
  border: 1px solid var(--sand-400);
  border-radius: var(--radius);
}
.toc h2 {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.75rem;
}
.toc ol {
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: toc;
}
.toc li { counter-increment: toc; }
.toc a {
  display: block;
  padding: 0.4rem 0;
  font-size: 0.88rem;
  text-decoration: none;
  color: var(--ink-muted);
  border-bottom: 1px solid transparent;
}
.toc a::before {
  content: counter(toc) ". ";
  color: var(--gold-ink);
  font-variant-numeric: tabular-nums;
}
.toc a:hover { color: var(--emerald-700); }

.prose { max-width: 68ch; }
.prose h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  margin-top: 2.75rem;
  margin-bottom: 0.85rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sand-400);
}
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 {
  font-size: 1.08rem;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}
.prose p, .prose li { color: var(--ink-muted); }
.prose li { margin-bottom: 0.45rem; }
.prose strong { color: var(--ink); }
.prose a { color: var(--gold-ink); text-underline-offset: 3px; overflow-wrap: anywhere; }
.prose a:hover { color: var(--emerald-700); }
.prose .lead {
  font-size: 1.05rem;
  color: var(--ink);
}

.callout {
  padding: 1.25rem 1.4rem;
  background: var(--cream-200);
  border: 1px solid var(--sand-400);
  border-radius: var(--radius);
  margin-bottom: 2rem;
}
.callout h3 { margin-top: 0; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }

.placeholder {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border: 1px dashed var(--gold-500);
  border-radius: 3px;
  background: rgba(214, 174, 110, 0.14);
  font: 600 0.82rem/1.5 var(--font-ui);
  color: var(--gold-ink);
  overflow-wrap: anywhere;
}

/* Data-flow entries on the privacy page */
.flow {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 2rem;
  padding: 0;
}
.flow > div {
  padding: 1.15rem 1.25rem;
  background: var(--cream-50);
  border: 1px solid var(--sand-400);
  border-radius: var(--radius);
}
.flow dt {
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.flow dd {
  margin: 0 0 0.4rem;
  font-size: 0.92rem;
  color: var(--ink-muted);
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.75rem;
}
.flow dd:last-child { margin-bottom: 0; }
.flow dd b {
  font: 600 0.68rem/1.7 var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

/* FAQ */
.faq { margin-top: 1.5rem; border-top: 1px solid var(--sand-400); }
.faq details {
  border-bottom: 1px solid var(--sand-400);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  min-height: 48px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: var(--ink);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--gold-ink);
  border-bottom: 1.5px solid var(--gold-ink);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.18s ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq details > div { padding-bottom: 1.25rem; }
.faq p { font-size: 0.95rem; color: var(--ink-muted); }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin: 2rem 0;
}
.contact-grid--support {
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr);
  align-items: start;
}
.support-form {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}
.support-form label {
  display: grid;
  gap: 0.45rem;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 600;
}
.support-form input,
.support-form select,
.support-form textarea {
  width: 100%;
  border: 1px solid var(--sand-500);
  border-radius: 8px;
  background: var(--cream-50);
  color: var(--ink);
  font: inherit;
  font-weight: 400;
  padding: 0.75rem 0.85rem;
}
.support-form input,
.support-form select { min-height: 46px; }
.support-form textarea {
  min-height: 150px;
  resize: vertical;
}
.support-form input:focus,
.support-form select:focus,
.support-form textarea:focus {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
  border-color: var(--gold-500);
}
.support-form .btn { justify-self: start; }
.support-form .form-note {
  margin: 0;
  max-width: 52ch;
  font-size: 0.8rem;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--emerald-950);
  color: rgba(251, 230, 199, 0.78);
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
  font-size: 0.88rem;
}
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  gap: 2rem clamp(1.5rem, 4vw, 3rem);
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(214, 174, 110, 0.22);
}
.site-footer h2 {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 0.9rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.35rem; }
.site-footer a {
  color: rgba(251, 230, 199, 0.85);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border-bottom: 1px solid transparent;
}
.site-footer a:hover { color: var(--cream-50); border-bottom-color: var(--gold-400); }
.site-footer__mark {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.site-footer__mark img { width: 44px; height: 44px; border-radius: 10px; }
.site-footer__mark span {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--cream-50);
}
.site-footer__legal {
  margin-top: 1.75rem;
  display: grid;
  gap: 0.75rem;
  font-size: 0.78rem;
  color: rgba(251, 230, 199, 0.6);
}
.site-footer__legal p { margin: 0; max-width: 90ch; }
.footer-summary { max-width: 34ch; }

/* --------------------------------------------------------------------------
   15. Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__inner .hero__media { order: 2; }
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature--flip .feature__media { order: 0; }
  .doc { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
}

@media (max-width: 640px) {
  .site-header__inner { flex-direction: column; align-items: flex-start; }
  .site-nav ul { gap: 0 1.1rem; }
  .hero h1 { max-width: none; }
  .site-footer__top { grid-template-columns: minmax(0, 1fr); }
  .flow dd { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .badge-link img { width: 152px; }
  .sheet { border-radius: 12px; }
  .contact-grid--support { grid-template-columns: minmax(0, 1fr); }
  .hero__inner--concise { min-height: 0; }
}

@media (min-width: 1001px) {
  /* Manuscript rail: section numerals sit in the left margin on desktop. */
  .section-head { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .site-header, .site-footer, .toc, .skip-link { display: none; }
  body { background: #fff; color: #000; }
  .doc { grid-template-columns: 1fr; }
}