@font-face {
  font-family: "Little Now Arabic";
  src: url("/assets/fonts/ibm-plex-sans-arabic-regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Little Now Arabic";
  src: url("/assets/fonts/ibm-plex-sans-arabic-semibold.ttf") format("truetype");
  font-weight: 600 900;
  font-display: swap;
}
@font-face {
  font-family: "Little Now Arabic Display";
  src: url("/assets/fonts/aref-ruqaa-regular.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}
:root {
  --sans: "Little Now Arabic", Tahoma, sans-serif;
  --serif: "Little Now Arabic", Tahoma, sans-serif;
  --hand: "Little Now Arabic Display", serif;
}
body { font-family: var(--sans); line-height: 1.9; }
h1, h2, h3, .hero h1, .section-title, .privacy-title, .closing-title {
  letter-spacing: 0;
  line-height: 1.55;
  font-style: normal;
  font-weight: 600;
}
.eyebrow, .legal-kicker, .prompt-age, .book-page-eyebrow, th,
.milestone-kind, .milestone-window, .coming-soon { letter-spacing: 0; line-height: 1.8; }
.hero h1 { font-size: clamp(54px, 6.6vw, 92px); }
.hero-lede, .feature-copy p, .privacy-lede, .closing-copy, .faq-note,
.prompt-intro p, .faq-list p, .field-hint { line-height: 1.9; }
.prompt-card blockquote { font-family: var(--sans); font-weight: 400; line-height: 1.7; font-style: normal; }
.footer-said, .mini-note, .quote-scrap, .milestone-stamp { line-height: 1.8; }
.milestone-name { line-height: 1.5; }
.milestone-why { line-height: 1.9; }
.steps, .privacy-list, .book-chapters { padding-inline: 0; }
.legal-shell ul, .legal-shell ol { padding-left: 0; padding-inline-start: 1.25rem; }
.legal-shell .contents ul { padding-inline: 0; }
th, td { text-align: start; }
.contents { border-left: 0; border-inline-start: 3px solid var(--blue); }
.notice { border-left: 0; border-inline-start: 4px solid var(--clay-deep); border-radius: 12px 0 0 12px; }
input[type="email"], a[href^="mailto:"], code { direction: ltr; unicode-bidi: isolate; }
input[type="email"] { text-align: left; }
/* Photograph and screenshot compositions keep their original orientation. */
.hero-visual, .feature-visual, .recap-stage { direction: ltr; }
.milestone-card, .book-page, .mini-note, .quote-scrap, .milestone-stamp { direction: rtl; }
.book-chapters li { gap: 16px; }
.book-chapter-count { white-space: nowrap; }
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(46px, 13vw, 66px); }
  .mobile-nav { gap: 18px; }
  .mobile-nav a { font-size: 13px; }
}
/* Reading copy and headings use the same Plex family as the app. */
.hero-lede { font-family: var(--sans); font-size: clamp(19px, 1.5vw, 23px); }
.text-link span { transform: scaleX(-1); }
.text-link:hover span { transform: translateX(-4px) scaleX(-1); }

/* Match the app: Plex for reading and headings, Ruqaa only for handwritten scraps. */
.milestone-name, .book-chapter-name { font-weight: 600; }