@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; }

/* Give the switch its own column instead of floating against navigation text. */
.legal-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px 28px;
}
.legal-header > .language-switch {
  float: none;
  margin: 0;
  grid-column: 2;
  grid-row: 1;
}
.legal-header-inner { grid-column: 1; grid-row: 1; min-width: 0; }
.legal-header .brand { flex-shrink: 0; }
.legal-nav { min-width: 0; }

/* Arabic needs room above and below joined letters, even in feature headings. */
:root[lang="ar"] :is(h1, h2, h3) {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0;
}
.legal-lede, .legal-section p, .legal-section li { line-height: 1.9; }
.legal-shell, .feature-copy, .prompt-card { text-align: start; }
.contact-form :is(input:not([type="email"]), textarea, select) {
  direction: rtl;
  text-align: start;
}
.contact-form :is(input, textarea, select) { min-width: 0; }
.contact-form input[type="email"] { direction: ltr; text-align: left; }
.legal-shell a { overflow-wrap: anywhere; }
.legal-shell code { white-space: nowrap; }

/* Put the disclosure affordance at the reading end and reserve its space. */
.faq-list summary { padding-inline: 0 50px; }
.faq-icon { right: auto; inset-inline-end: 3px; }
.skip-link { left: auto; inset-inline-start: 14px; }

@media (max-width: 1000px) {
  .legal-header-inner { display: contents; }
  .legal-header .brand { grid-column: 1; grid-row: 1; }
  .legal-nav { grid-column: 1 / -1; grid-row: 2; gap: 8px 22px; }
}
@media (max-width: 560px) {
  .legal-header { gap: 16px; }
  .legal-header .brand { width: min(174px, 100%); }
  .contact-form, .contact-sent { padding: 24px 18px; }
}
/* The standalone thank-you card also has a handwritten note. */
.note { font-family: var(--hand); line-height: 1.8; }