/* The app's own Playfair Display Bold (PlayfairDisplay_700Bold.ttf, v1.203), subset to "Mizan". */
@font-face { font-family: 'Mizan Lockup'; font-weight: 700; font-style: normal; font-display: block;
  src: url('/assets/fonts/mizan-lockup-playfair-700.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-weight: 400; font-style: normal; font-display: swap;
  src: url(fonts/playfair-display-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* The app's own Playfair Display Bold (PlayfairDisplay_700Bold.ttf, v1.203), subset to "Mizan". */
@font-face { font-family: 'Mizan Lockup'; font-weight: 700; font-style: normal; font-display: block;
  src: url('/assets/fonts/mizan-lockup-playfair-700.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-weight: 400; font-style: normal; font-display: swap;
  src: url(fonts/playfair-display-cyrillic-400-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Playfair Display'; font-weight: 400; font-style: italic; font-display: swap;
  src: url(fonts/playfair-display-latin-400-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-weight: 400; font-style: italic; font-display: swap;
  src: url(fonts/playfair-display-cyrillic-400-italic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Playfair Display'; font-weight: 700; font-style: normal; font-display: swap;
  src: url(fonts/playfair-display-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF; }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap;
  src: url(fonts/inter-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF; }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap;
  src: url(fonts/inter-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap;
  src: url(fonts/inter-cyrillic-400-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap;
  src: url(fonts/inter-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap;
  src: url(fonts/inter-cyrillic-500-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 500; font-display: swap;
  src: url(fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Noto Naskh Arabic'; font-weight: 500; font-display: swap;
  src: url(fonts/noto-naskh-arabic-arabic-500-normal.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

:root {
  --bg: #0E131B;
  --ink: #F3EFE7;
  --ink-2: rgba(243, 239, 231, 0.66);
  --ink-3: rgba(243, 239, 231, 0.44);
  --line: rgba(243, 239, 231, 0.12);
  --gold: #C9A961;
  --slate: #A9A399;
  --serif: 'Playfair Display', 'Noto Naskh Arabic', Georgia, serif;
  --sans: 'Inter', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gutter: 24px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:lang(ar) body { font-size: 18px; line-height: 1.8; }
.i18n-pending body { visibility: hidden; }

/* Content blocks written per language: only the active one is shown. */
html:not([lang="ru"]) [data-lang="ru"],
html:not([lang="en"]) [data-lang="en"],
html:not([lang="ar"]) [data-lang="ar"],
html:not([lang="id"]) [data-lang="id"],
html:not([lang="ms"]) [data-lang="ms"] { display: none; }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}
::selection { background: var(--gold); color: var(--bg); }

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

/* Top bar */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 28px;
}
/*
 * Brand lockup = the app header (mizan-business/src/components/Wordmark.tsx, size "md"):
 * row, centred vertically, gap 10 · mark 2A small-stroke variant, 27.5 tall · "Mizan"
 * Playfair Display 700, 26/34, gold #C9A961 · nested " BUSINESS" (the space belongs to
 * it, as in the app) in the iOS system font 600, 11px, tracking 2px, slate #A9A399,
 * on the same baseline. Header and footer use the app size 26px; the hero scales it.
 */
.brand {
  --size: 26px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--size) * 10 / 26);
  direction: ltr;
  font-size: var(--size);
  line-height: calc(34 / 26);
}
.brand img { height: calc(var(--size) * 27.5 / 26); width: auto; display: block; }
.lockup-name {
  font: 700 1em/calc(34 / 26) 'Mizan Lockup', 'Playfair Display', Georgia, serif;
  color: var(--gold);
  letter-spacing: 0;
  white-space: nowrap;
}
.lockup-suffix {
  font: 600 calc(11em / 26) / 1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: calc(2em / 11);
  text-transform: uppercase;
  color: var(--slate);
}
.brand--hero { --size: 34px; display: flex; justify-content: center; margin-bottom: 72px; }

/* Language picker: a native <select> laid invisibly over a quiet pill that shows the current name. */
.langs {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 8px;
  padding-inline: 11px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #0E131B;
  color: var(--ink-2);
  font: 500 11px/1.2 var(--sans);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.langs::after {
  content: '';
  width: 5px;
  height: 5px;
  margin-block-start: -3px;
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  transform: rotate(45deg);
}
.langs:hover { color: var(--ink); border-color: rgba(201, 169, 97, 0.5); }
.langs:focus-within { color: var(--ink); border-color: var(--gold); }
.langs:has(select:focus-visible) { outline: 1px solid var(--gold); outline-offset: 3px; }
.langs-current:lang(ar) { font-family: 'IBM Plex Sans Arabic', var(--sans); font-size: 12.5px; line-height: 1; letter-spacing: 0; }
.langs select {
  position: absolute;
  inset: -7px 0; /* a 44px-tall hit area around the 30px pill */
  width: 100%;
  margin: 0;
  opacity: 0;
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: #0E131B;
  color: var(--ink);
  font: 400 16px/1.2 var(--sans); /* 16px keeps iOS Safari from zooming on focus */
  cursor: pointer;
}
.langs option { background: #0E131B; color: var(--ink); }
/* Very narrow phones: the short code instead of the full name. */
.langs-code { display: none; letter-spacing: 0.12em; }
@media (max-width: 374px) {
  .langs-current { display: none; }
  .langs-code { display: inline; }
}

/* Hero */
.hero {
  text-align: center;
  padding-block: 56px 88px;
}
h1, h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.005em;
  margin: 0;
}
h1 { font-size: clamp(36px, 9.5vw, 58px); line-height: 1.12; text-wrap: balance; }
:lang(ar) h1, :lang(ar) h2 { letter-spacing: 0; line-height: 1.5; }
.sub {
  margin: 24px auto 0;
  max-width: 30em;
  color: var(--ink-2);
  font-size: 18px;
  text-wrap: pretty;
}
.badge {
  display: inline-block;
  margin-top: 40px;
  padding: 10px 18px;
  border: 1px solid rgba(201, 169, 97, 0.5);
  border-radius: 999px;
  color: var(--gold);
  font: 500 12px/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
:lang(ar) .badge { letter-spacing: 0; font-size: 14px; }

/* Four lines */
.pillars { margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pillar {
  display: grid;
  gap: 6px;
  padding-block: 28px;
  border-bottom: 1px solid var(--line);
}
.pillar dt { font: 400 24px/1.3 var(--serif); }
.pillar dd { margin: 0; color: var(--ink-2); }

.madhhab {
  margin: 0;
  padding-block: 96px;
  text-align: center;
  font: italic 400 clamp(22px, 5.4vw, 30px)/1.45 var(--serif);
  text-wrap: balance;
}
.madhhab::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto 40px;
}
:lang(ar) .madhhab { font-style: normal; }

/* Waitlist */
.waitlist { padding-block: 16px 112px; text-align: center; }
.waitlist h2 { font-size: 30px; line-height: 1.25; }
.waitlist .note { color: var(--ink-2); margin: 12px 0 36px; }
.form { display: grid; gap: 12px; max-width: 440px; margin-inline: auto; }
.form input[type="email"] {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(243, 239, 231, 0.24);
  border-radius: 2px;
  padding: 16px 18px;
  color: var(--ink);
  font: 400 17px/1.2 var(--sans);
  text-align: center;
  transition: border-color 0.2s ease;
}
.form input[type="email"]::placeholder { color: var(--ink-3); }
.form input[type="email"]:focus { outline: none; border-color: var(--gold); }
.form button {
  appearance: none;
  border: 1px solid var(--gold);
  border-radius: 2px;
  background: var(--gold);
  color: var(--bg);
  padding: 16px 18px;
  font: 500 15px/1.2 var(--sans);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.form button:hover { background: transparent; color: var(--gold); }
.form button[disabled] { opacity: 0.6; cursor: default; }
.hp { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.status { min-height: 1.65em; margin: 20px 0 0; color: var(--ink-2); }
.status.is-error { color: var(--gold); }
.thanks { font: 400 24px/1.5 var(--serif); margin: 0; }

/* Footer */
.foot {
  border-top: 1px solid var(--line);
  padding-block: 48px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  color: var(--ink-3);
  font-size: 14px;
}
.foot a { transition: color 0.2s ease; }
.foot a:hover { color: var(--ink); }
.foot-links .sep { color: var(--line); }
.foot .mail { direction: ltr; unicode-bidi: isolate; }

/* Document pages */
.doc { padding-block: 40px 96px; }
.doc h1 { font-size: clamp(34px, 8vw, 48px); margin-bottom: 12px; }
.doc .meta { color: var(--ink-3); font-size: 14px; margin: 0 0 56px; }
.doc h2 { font-size: 22px; line-height: 1.35; margin: 48px 0 12px; }
.doc p, .doc li { color: var(--ink-2); }
.doc p { margin: 0 0 16px; }
.doc ul { margin: 0 0 16px; padding-inline-start: 1.2em; }
.doc li { margin-bottom: 8px; }
.doc li::marker { color: var(--gold); }
.doc strong { color: var(--ink); font-weight: 500; }
.doc a { color: var(--gold); border-bottom: 1px solid rgba(201, 169, 97, 0.4); }
.doc .lead { color: var(--ink); font-size: 19px; }
.faq { border-top: 1px solid var(--line); margin-top: 8px; }
.faq section { border-bottom: 1px solid var(--line); padding-block: 28px 12px; }
.faq h2 { margin-top: 0; }
.contact { margin-top: 64px; text-align: center; }
.contact p { color: var(--ink-2); }
.contact a { font: 400 22px/1.4 var(--serif); }

@media (min-width: 720px) {
  :root { --gutter: 32px; }
  .hero { padding-block: 88px 120px; }
  .brand--hero { --size: 44px; }
  .pillar { grid-template-columns: 180px 1fr; gap: 24px; align-items: baseline; padding-block: 32px; }
  .madhhab { padding-block: 128px; }
  .form { grid-template-columns: 1fr auto; max-width: 560px; gap: 10px; }
  .form input[type="email"] { text-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

@media (max-width: 719px) {
  .foot-links .sep { display: none; }
  .foot .mail { flex-basis: 100%; text-align: center; }
  .foot-links { gap: 10px 28px; }
}