@charset "utf-8";
/* ===========================================================================
   Nisaa — getnisaa.com
   The tokens below are lifted from the app itself (cycle_tracking/lib/theme/
   colors.dart and pubspec fonts) so the web and the product stay one brand.
   Fonts are self-hosted and subset by tools/build-assets.sh.
   ---------------------------------------------------------------------------
   1. Fonts        5. Header / nav      9. Feature rows   13. FAQ
   2. Tokens       6. Buttons          10. Madhab        14. Footer
   3. Reset        7. Hero             11. Answers       15. Prose (legal)
   4. Layout       8. Trust strip      12. Reviews       16. Motion / print
                                                        17. Arabic / RTL
                                                        18. Sources
   ========================================================================= */

/* 1. Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/ebgaramond-latin.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F, U+20AC, U+2122, U+2212;
}

@font-face {
  font-family: 'Amiri';
  src: url('../fonts/amiri-arabic.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: 'Amiri';
  src: url('../fonts/amiri-arabic-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* 2. Tokens --------------------------------------------------------------- */

:root {
  /* Surfaces — NisaaColors.linen / surface */
  --linen: #f7f5f2;
  --paper: #ffffff;
  --cream: #f4ece1;          /* the verse-card ground */
  --cream-deep: #ece1d2;
  --shell: #241d18;          /* footer + inverted blocks */

  /* Ink — NisaaColors._textBaseLight */
  --ink: #2b2b2b;
  --ink-2: #5f574f;
  --ink-3: #736860;
  --line: rgba(43, 43, 43, 0.11);
  --line-2: rgba(43, 43, 43, 0.06);

  /* Phase colours, straight from the app's dial */
  --menstrual: #e37e7f;      /* watermelon */
  --follicular: #d5a0a8;     /* berry      */
  --ovulation: #d2dde7;      /* sky        */
  --luteal: #ee9f80;         /* sunrise    */
  --gold: #d4af37;

  /* Accents tuned for text contrast on --linen (all ≥ 4.5:1) */
  --coral: #e37e7f;
  --coral-ink: #a04440;
  --gold-ink: #806014;
  --green-ink: #4f6a52;

  --focus: #a04440;

  /* Type */
  --serif: 'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino,
           Georgia, 'Times New Roman', serif;
  --ui: ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont,
        'Segoe UI Variable Display', 'Segoe UI', system-ui, Roboto, sans-serif;
  --arabic: 'Amiri', 'Geeza Pro', 'Noto Naskh Arabic', serif;

  /* Rhythm */
  --gutter: clamp(1.25rem, 4vw, 2.75rem);
  --measure: 1160px;
  --radius: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(43, 43, 43, .05), 0 6px 18px rgba(43, 43, 43, .05);
  --shadow-md: 0 2px 4px rgba(43, 43, 43, .05), 0 18px 44px rgba(43, 43, 43, .09);

  --ease: cubic-bezier(.2, .7, .3, 1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --linen: #14110e;        /* NisaaColors._linenDark  */
    --paper: #211c17;        /* NisaaColors._surfaceDark */
    --cream: #1d1813;
    --cream-deep: #262019;
    --shell: #0e0b09;

    --ink: #f3efea;          /* NisaaColors._textBaseDark */
    --ink-2: #c3bab0;
    --ink-3: #948a80;
    --line: rgba(243, 239, 234, 0.14);
    --line-2: rgba(243, 239, 234, 0.07);

    --coral-ink: #f0a09c;
    --gold-ink: #d9bc63;
    --green-ink: #a6c1a8;
    --focus: #f0a09c;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, .3), 0 18px 44px rgba(0, 0, 0, .38);

    color-scheme: dark;
  }
}

/* 3. Reset ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--linen);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

/* A whisper of paper tooth. Fixed so it never tiles visibly while scrolling. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

a { color: inherit; text-underline-offset: .18em; }

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

::selection { background: rgba(227, 126, 127, .26); }

.skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 100;
  padding: .7rem 1.1rem;
  background: var(--ink);
  color: var(--linen);
  border-start-start-radius: 0;
  border-end-end-radius: var(--radius);
}
.skip:focus { inset-inline-start: 0; }

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

/* 4. Layout --------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 760px; }

main, header, footer { position: relative; z-index: 2; }

section { position: relative; }

.band { padding-block: clamp(4rem, 9vw, 7.5rem); }
.band--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.band--cream { background: var(--cream); }
.band--edged { border-block: 1px solid var(--line); }

/* Type scale */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -.018em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 5.6vw, 4.15rem); line-height: 1.03; }
h2 { font-size: clamp(2rem, 4.1vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.2; }

em, .em {
  font-style: italic;
  color: var(--coral-ink);
  font-weight: 400;
}

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.1rem, 1.6vw, 1.28rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 34em;
}

.ar {
  font-family: var(--arabic);
  font-size: 1.12em;
  line-height: 1.9;
  direction: rtl;
  unicode-bidi: isolate;
}

/* Eyebrow: numeral + rule + label. Used to open every major section. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1.4rem;
  font-family: var(--ui);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow::before {
  content: attr(data-n);
  font-family: var(--serif);
  font-size: .95rem;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--coral-ink);
}
.eyebrow::after {
  content: '';
  flex: 0 0 2.25rem;
  height: 1px;
  background: var(--line);
  order: -1;
  display: none;
}

/* A rule that stops short — reads as a printed page, not a divider bar. */
.rule {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 0;
}

/* The mihrab arch, the app's recurring shape. */
.arch {
  --arch-r: 46%;
  border-radius: var(--arch-r) var(--arch-r) 12px 12px / 34% 34% 12px 12px;
  overflow: hidden;
}

/* 5. Header --------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--linen) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.masthead[data-stuck='true'] { border-bottom-color: var(--line); }

.masthead__in {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.4rem;
  letter-spacing: -.01em;
  margin-inline-end: auto;
}
.brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(227, 126, 127, .35);
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.nav a {
  font-size: .93rem;
  text-decoration: none;
  color: var(--ink-2);
  transition: color .18s var(--ease);
}
.nav a:hover { color: var(--ink); }

/* Small screens keep only the cross-page link; the in-page anchors are just a
   scroll away and everything else lives in the footer. */
@media (max-width: 860px) {
  .nav { gap: 0; }
  .nav a:not(.nav__key) { display: none; }
}
/* Narrow screens carry brand + locale switch + Download; the nav link would
   collide with the wordmark, and you are already inside Answers anyway. */
@media (max-width: 560px) {
  .nav { display: none; }
}

/* 6. Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .82rem 1.3rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--ui);
  font-size: .97rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background-color .18s var(--ease), border-color .18s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--ink {
  background: var(--ink);
  color: var(--linen);
  box-shadow: var(--shadow-sm);
}
.btn--ink:hover { box-shadow: var(--shadow-md); }

.btn--quiet {
  border-color: var(--line);
  color: var(--ink);
  background: transparent;
}
.btn--quiet:hover { border-color: var(--ink-3); }

/* Apple's official badge artwork. Per Apple's guidelines the badge itself is
   never redrawn or recoloured; we only size and lift it. The white variant is
   swapped in by a <source media> query on the dark theme. */
.appstore {
  display: inline-block;
  line-height: 0;
  border-radius: 9px;
  transition: transform .2s var(--ease), filter .2s var(--ease);
}
.appstore img {
  width: 160px;
  height: auto;
}
.appstore:hover { transform: translateY(-2px); filter: brightness(1.06); }
.appstore:active { transform: translateY(0); }

/* 7. Hero ----------------------------------------------------------------- */

.hero { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* Arabic needs direction:rtl to shape correctly, but it sits in a left-aligned
   English column — so the box itself stays left. */
.hero__bismillah {
  font-family: var(--arabic);
  font-size: 1.3rem;
  line-height: 1.9;
  color: var(--coral-ink);
  margin: 0 0 .1rem;
  direction: rtl;
  text-align: left;
  unicode-bidi: isolate;
}

.hero__kicker {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1.5rem;
}

.hero h1 { margin-bottom: 1.4rem; }

.hero .lede { margin-bottom: 2rem; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem 1.4rem;
}

.rating {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .9rem;
  color: var(--ink-2);
}
.rating svg { width: 5.6rem; height: 1rem; flex: none; }
.rating b { font-weight: 600; color: var(--ink); }

.hero__art {
  position: relative;
  justify-self: center;
  width: min(100%, 480px);
}
.hero__art img {
  width: 100%;
  filter: drop-shadow(0 24px 48px rgba(43, 43, 43, .12));
  /* The source artwork is cropped square at the hem; dissolve it instead. */
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 99%);
}

/* The soft halo behind the illustration, echoing the app's sunrise. */
.hero__art::before {
  content: '';
  position: absolute;
  inset: 6% 4% 12%;
  z-index: -1;
  border-radius: 50% 50% 44% 44% / 42% 42% 58% 58%;
  background:
    radial-gradient(60% 55% at 50% 42%, rgba(238, 159, 128, .34), transparent 70%),
    radial-gradient(70% 60% at 60% 70%, rgba(213, 160, 168, .26), transparent 72%);
  filter: blur(28px);
}

/* Floating status chips — the two states the app is actually about. */
.chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .62rem .95rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  font-size: .87rem;
  font-weight: 600;
  white-space: nowrap;
}
.chip i {
  width: .62rem;
  height: .62rem;
  border-radius: 50%;
  flex: none;
}
.chip small {
  font-family: var(--arabic);
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--ink-3);
}
.chip--a { top: 14%; left: -6%; }
.chip--b { bottom: 17%; right: -4%; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.25rem; }
  /* Headline first on a phone — the artwork should not push the value
     proposition below the fold. */
  .hero__art { width: min(78%, 300px); }
  .chip--a { left: -4%; }
  .chip--b { right: -4%; }
}
@media (max-width: 460px) {
  .chip { font-size: .78rem; padding: .5rem .75rem; }
}

/* 8. Trust strip ---------------------------------------------------------- */

.trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-inline-start: 1px solid var(--line);
}
.trust > div {
  padding: 1.5rem 1.4rem;
  border-inline-end: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust dt {
  font-family: var(--serif);
  font-size: 1.85rem;
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: .4rem;
}
.trust dd {
  margin: 0;
  font-size: .87rem;
  color: var(--ink-2);
  line-height: 1.45;
}
@media (max-width: 720px) {
  .trust { grid-template-columns: repeat(2, 1fr); }
}

/* 9. Feature rows --------------------------------------------------------- */

.row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  border-top: 1px solid var(--line);
}
.row:first-of-type { border-top: 0; }
.row--flip > *:first-child { order: 2; }

.row h3 {
  font-size: clamp(1.7rem, 2.9vw, 2.25rem);
  margin-bottom: .85rem;
}
.row p { color: var(--ink-2); max-width: 36em; }

.row__list {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}
.row__list li {
  position: relative;
  padding-inline-start: 1.6rem;
  font-size: .97rem;
  color: var(--ink-2);
}
.row__list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: .58em;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--coral);
  opacity: .55;
}

.row__art { position: relative; display: flex; justify-content: center; }
.row__art img {
  filter: drop-shadow(0 18px 34px rgba(43, 43, 43, .1));
  max-height: 26rem;
  width: auto;
}

@media (max-width: 820px) {
  .row { grid-template-columns: 1fr; }
  .row--flip > *:first-child { order: 0; }
  .row__art { order: -1; max-width: 300px; margin-inline: auto; }
}

/* The cycle dial — a faithful rebuild of the app's signature control. */
.dial { width: min(100%, 320px); aspect-ratio: 1; position: relative; }
.dial svg { width: 100%; height: 100%; overflow: visible; }
.dial__hub {
  position: absolute;
  inset: 26%;
  display: grid;
  place-content: center;
  text-align: center;
  gap: .1rem;
}
.dial__hub span {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dial__hub b {
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
}
.dial__hub em { font-size: .92rem; font-style: italic; }

.legend {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.15rem;
  font-size: .84rem;
  color: var(--ink-2);
}
.legend li { display: flex; align-items: center; gap: .45rem; }
.legend i { width: .58rem; height: .58rem; border-radius: 50%; flex: none; }

/* A ruling card — mirrors how guidance is surfaced in-app. */
.ruling {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.5rem 1.35rem;
  box-shadow: var(--shadow-md);
  max-width: 24rem;
}
.ruling__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .9rem;
  margin-bottom: .9rem;
  border-bottom: 1px solid var(--line-2);
}
.ruling__state {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-family: var(--serif);
  font-size: 1.5rem;
}
.ruling__state small { font-family: var(--arabic); font-size: 1.1rem; color: var(--ink-3); }
.ruling__day {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ruling__rows { display: grid; gap: .7rem; }
.ruling__row {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .94rem;
}
.ruling__row svg { width: 1.15rem; height: 1.15rem; flex: none; }
.ruling__row span { margin-inline-start: auto; font-size: .82rem; color: var(--ink-3); }
.is-exempt { color: var(--green-ink); }
.is-due { color: var(--coral-ink); }

.ruling__note {
  margin-top: 1.1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line-2);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink-3);
}

/* 10. Madhab -------------------------------------------------------------- */

.madhab {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 2.5rem;
}
.madhab article {
  background: var(--linen);
  padding: 1.6rem 1.4rem;
}
.madhab h4 {
  font-size: 1.28rem;
  margin-bottom: .1rem;
}
.madhab .ar { font-size: 1rem; color: var(--ink-3); margin-bottom: .7rem; line-height: 1.4; }
.madhab p { font-size: .88rem; color: var(--ink-2); line-height: 1.55; }
@media (max-width: 880px) { .madhab { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .madhab { grid-template-columns: 1fr; } }

/* 11. Answers ------------------------------------------------------------- */

/* Separate bordered cards rather than a gap-as-hairline grid: the sections hold
   2–6 questions, so a seamless grid would leave half-drawn empty cells. */
.qa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 1rem;
}
.qa-card {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.4rem 1.3rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              transform .2s var(--ease);
}
.qa-card:hover {
  background: var(--paper);
  border-color: color-mix(in srgb, var(--coral) 45%, transparent);
  transform: translateY(-2px);
}
.qa-card h3 {
  font-size: 1.16rem;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.qa-card p {
  font-size: .89rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qa-card b {
  margin-top: auto;
  padding-top: .5rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--coral-ink);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  font-size: .84rem;
  color: var(--ink-2);
}
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--coral-ink); text-decoration: underline; }
.crumbs li + li::before { content: '/'; margin-inline-end: .4rem; opacity: .55; }

/* 12. Reviews ------------------------------------------------------------ */

.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.review {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.4rem 1.2rem;
  display: flex;
  flex-direction: column;
}
.review blockquote {
  margin: 0 0 1rem;
  font-family: var(--serif);
  font-size: 1.14rem;
  line-height: 1.45;
}
.review figcaption {
  margin-top: auto;
  font-size: .82rem;
  color: var(--ink-3);
}
.review .stars { width: 5.2rem; height: .92rem; margin-bottom: .85rem; }

/* 13. FAQ ----------------------------------------------------------------- */

.faq { border-top: 1px solid var(--line); margin-top: 2.5rem; }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: 1.22rem;
  line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex: none;
  width: .72rem;
  height: .72rem;
  margin-top: .45em;
  margin-inline-start: auto;
  border-inline-end: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform .22s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .faq__a {
  padding: 0 2.5rem 1.35rem 0;
  color: var(--ink-2);
  font-size: .99rem;
}

/* 14. Footer -------------------------------------------------------------- */

.foot {
  background: var(--shell);
  color: #efe7dd;
  padding-block: clamp(3rem, 6vw, 4.5rem) 1.75rem;
}
.foot a { color: rgba(239, 231, 221, .72); text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }

.foot__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(239, 231, 221, .13);
}
.foot__brand {
  font-family: var(--serif);
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .9rem;
}
.foot__brand img { width: 30px; height: 30px; border-radius: 8px; }
.foot__desc {
  font-size: .9rem;
  line-height: 1.6;
  color: rgba(239, 231, 221, .68);
  max-width: 30ch;
}
.foot h5 {
  margin: 0 0 1rem;
  font-family: var(--ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(239, 231, 221, .64);
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: .9rem; }

.foot__langs {
  padding-block: 1.75rem;
  border-bottom: 1px solid rgba(239, 231, 221, .13);
  font-size: .82rem;
  line-height: 1.9;
  color: rgba(239, 231, 221, .66);
}
.foot__langs b {
  display: block;
  margin-bottom: .35rem;
  font-family: var(--ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(239, 231, 221, .64);
}

.foot__base {
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  justify-content: space-between;
  font-size: .8rem;
  color: rgba(239, 231, 221, .64);
}

@media (max-width: 820px) {
  .foot__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .foot__grid > *:first-child { grid-column: 1 / -1; }
}

.disclaimer {
  margin-top: 1.1rem;
  font-size: .78rem;
  line-height: 1.6;
  color: rgba(239, 231, 221, .62);
  max-width: 68ch;
}

/* 15. Prose — legal, support and answer pages ----------------------------- */

.page-head {
  padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}
.page-head h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); }
.page-head .lede { margin-top: 1.1rem; }
.page-head .stamp {
  margin-top: 1.1rem;
  font-size: .82rem;
  color: var(--ink-3);
}

.prose { padding-block: clamp(2.5rem, 5vw, 3.5rem); font-size: 1.04rem; }
.prose h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  margin: 2.6rem 0 .9rem;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.25rem; margin: 1.9rem 0 .6rem; }
.prose p, .prose li { color: var(--ink-2); line-height: 1.72; }
.prose ul, .prose ol { margin: 0 0 1.15em; padding-inline-start: 1.25rem; display: grid; gap: .45rem; }
.prose a { color: var(--coral-ink); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose blockquote {
  margin: 1.6rem 0;
  padding: 1.1rem 1.35rem;
  border-inline-start: 2px solid var(--coral);
  background: var(--cream);
  border-start-end-radius: var(--radius);
  border-end-end-radius: var(--radius);
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--ink);
}
.prose blockquote cite {
  display: block;
  margin-top: .5rem;
  font-family: var(--ui);
  font-size: .8rem;
  font-style: normal;
  color: var(--ink-3);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: .94rem;
}
.prose th, .prose td {
  text-align: start;
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.prose th { font-weight: 600; color: var(--ink); }

.callout {
  margin: 2.25rem 0;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
}
.prose > .callout:first-child { margin-top: 0; }
.callout h3 { margin: 0 0 .45rem; font-size: 1.18rem; }
.callout p { margin: 0 0 1rem; font-size: .94rem; }
.callout p:last-child { margin-bottom: 0; }

/* Inline CTA used at the foot of every answer page */
.inline-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin: 2.75rem 0 0;
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--cream);
}
.inline-cta img { width: 92px; flex: none; }
.inline-cta div { flex: 1 1 16rem; }
.inline-cta h3 { font-size: 1.3rem; margin-bottom: .35rem; }
.inline-cta p { font-size: .92rem; color: var(--ink-2); margin-bottom: 1rem; }

.related { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.related h2 { font-size: 1.4rem; margin-bottom: 1.1rem; }
.related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.related li { border-bottom: 1px solid var(--line-2); }
.related a {
  display: flex;
  gap: .8rem;
  padding: .85rem 0;
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.08rem;
  color: var(--ink);
  transition: color .18s var(--ease);
}
.related a:hover { color: var(--coral-ink); }
.related a::before { content: '→'; color: var(--ink-3); font-family: var(--ui); }

/* 16. Motion & print ------------------------------------------------------ */

/* Scoped to .js so that a failed script, a blocked script or a crawler that
   never runs one still gets fully visible content. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .masthead, .foot, .inline-cta, .hero__art, body::after { display: none !important; }
  body { background: #fff; color: #000; }
  .prose { font-size: 11pt; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}


/* 17. Arabic and RTL ------------------------------------------------------
   Everything above uses logical properties (inline-start/end), so direction
   flips for free. What does not come for free is Arabic typography, which
   breaks several Latin habits:

     * Arabic has no italics. Slanting it is a synthetic distortion, so <em>
       carries colour only.
     * Arabic must never be letter-spaced. Doing so severs the joins between
       letters and can render a word unreadable.
     * Arabic has no case, so text-transform is meaningless.
     * Naskh needs more leading and a slightly larger size than Latin to stay
       comfortable at the same optical weight.
   ------------------------------------------------------------------------ */

[lang="ar"] {
  font-family: var(--arabic);
  font-size: 1.125rem;
  line-height: 1.95;
}

[lang="ar"] h1,
[lang="ar"] h2,
[lang="ar"] h3,
[lang="ar"] h4,
[lang="ar"] h5 {
  font-family: var(--arabic);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.5;
}

[lang="ar"] h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); }
[lang="ar"] h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
[lang="ar"] h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }

/* Colour, not slant. */
[lang="ar"] em,
[lang="ar"] .em {
  font-style: normal;
  color: var(--coral-ink);
}

/* Never track Arabic letterforms apart. */
[lang="ar"] .eyebrow,
[lang="ar"] .hero__kicker,
[lang="ar"] .foot h5,
[lang="ar"] .plan__tag,
[lang="ar"] .ruling__day,
[lang="ar"] .dial__hub span {
  letter-spacing: 0;
  text-transform: none;
}

[lang="ar"] .lede {
  font-size: clamp(1.1rem, 1.6vw, 1.24rem);
  line-height: 1.9;
  max-width: 36em;
}

[lang="ar"] .prose { font-size: 1.12rem; }
[lang="ar"] .prose p,
[lang="ar"] .prose li { line-height: 2; }

/* Inline .ar spans exist to isolate Arabic inside English copy. On a page that
   is already Arabic they would double the font sizing, so neutralise them. */
[lang="ar"] .ar {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* The breadcrumb slash needs to lean the other way, and the qa-card arrow and
   related-list arrow have to point into the text, not away from it. */
[dir="rtl"] .related a::before { content: '\2190'; }

[dir="rtl"] .qa-card,
[dir="rtl"] .review,
[dir="rtl"] .callout,
[dir="rtl"] .inline-cta { text-align: start; }

/* Latin runs inside Arabic (Nisaa, App Store, email addresses) keep the Latin
   face rather than falling back to Amiri's Latin, which is a different colour
   of ink entirely. */
[lang="ar"] .brand,
[lang="ar"] .foot__brand,
[lang="ar"] a[href^="mailto:"] {
  font-family: var(--ui);
}

/* Locale switch in the masthead. */
.lang-switch {
  font-size: .9rem;
  text-decoration: none;
  color: var(--ink-2);
  padding: .3rem .7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.lang-switch:hover { color: var(--ink); border-color: var(--ink-3); }

/* 18. Sources (health answers) --------------------------------------------
   The health counterpart to the inline Qur'an and hadith on a fiqh answer.
   Deliberately looks like evidence rather than a related-links box: bordered,
   on the cream ground, publisher shown under each title so the reader can
   judge the source without following the link. */

.sources {
  margin: 2.75rem 0 0;
  padding: 1.6rem 1.6rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--cream);
}

.sources h2 {
  font-size: 1.3rem;
  margin: 0 0 .5rem;
}

.sources > p {
  font-size: .93rem;
  color: var(--ink-2);
  margin-bottom: 1.1rem;
}

.sources ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .1rem;
}

.sources li {
  padding: .8rem 0;
  border-top: 1px solid var(--line-2);
}
.sources li:first-child { border-top: 0; padding-top: 0; }

.sources li a {
  display: block;
  font-family: var(--serif);
  font-size: 1.06rem;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--coral) 55%, transparent);
  padding-bottom: .1rem;
  width: fit-content;
  max-width: 100%;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.sources li a:hover { color: var(--coral-ink); border-bottom-color: var(--coral-ink); }

/* External by definition, so say so once rather than repeating an icon. */
.sources li a::after {
  content: ' \2197';
  font-family: var(--ui);
  font-size: .8em;
  color: var(--ink-3);
}

.sources li span {
  display: block;
  margin-top: .3rem;
  font-size: .84rem;
  color: var(--ink-3);
}

.sources__byline {
  margin: 1.3rem 0 0;
  padding-top: .95rem;
  border-top: 1px solid var(--line-2);
  font-size: .84rem;
  line-height: 1.6;
  color: var(--ink-3);
}

/* Arabic sets the source titles in Amiri like the rest of the page, but a
   Latin publisher name inside an RTL list must not inherit the naskh face. */
[lang="ar"] .sources li a { font-family: inherit; }
[lang="ar"] .sources li span { font-family: var(--ui); }
[dir="rtl"] .sources li a::after { content: ' \2196'; }