/*
  Lexiome landing (EN + /ur). Direction C, founder-approved 2026-11-03.
  ONE design system with the app: tokens below mirror apps/api/static/vault-tokens.css
  (Manrope, 16px corners, 52px buttons and fields, 1px #D5E2E7 cards, 1.5px control
  outlines, 4/8/12/16/24/32 spacing). The only landing additions: larger display titles
  and 48/64/96 section gaps (design.md "Landing page"). No gradients, no shadows, no pills
  on controls. Self-hosted fonts only; no inline styles (CSP).
*/
@font-face { font-family: "Manrope"; src: url("fonts/Manrope-Regular-Latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/Manrope-Medium-Latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/Manrope-SemiBold-Latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/Manrope-Variable-Latin.woff2") format("woff2"); font-weight: 700 800; font-display: swap; }
@font-face { font-family: "Gulzar"; src: url("fonts/Gulzar-Urdu.woff2") format("woff2"); font-weight: 400; font-display: swap; size-adjust: 118%; }

:root {
  --canvas: #EEF4F6;
  --surface: #FFFFFF;
  --deep: #154F66;
  --primary: #1A7395;
  --text: #1F2A33;
  --muted: #46565F;
  --border: #D5E2E7;
  --border-strong: #6F8791;
  --soft: #E2EFF4;
  --danger: #9B3A3A;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px; --s9: 96px;
  --radius: 16px;
  --focus: 0 0 0 3px var(--surface), 0 0 0 5px var(--deep);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--s4); }
body {
  margin: 0; font: 500 1rem/1.5rem var(--font); color: var(--muted); background: var(--surface);
  overflow-wrap: break-word;
}
html[lang="ur"] { font-synthesis-weight: none; } /* Gulzar has one weight; faux bold clogs Nastaliq, so hierarchy comes from size and colour */
html[lang="ur"] body { font-family: var(--font), "Gulzar", sans-serif; line-height: 2.25rem; }
p { margin: 0; }
a { color: var(--deep); }
:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus); }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 20px; }

h1, h2, h3 { margin: 0; color: var(--text); font-family: inherit; }
/* Page title (landing display size) */
h1 { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 2rem; line-height: 2.375rem; font-weight: 800; letter-spacing: -0.01em; }
@media (min-width: 900px) { h2 { font-size: 2.5rem; line-height: 2.875rem; } }
/* Row title */
h3 { font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; }
html[lang="ur"] h1 { line-height: 1.95; letter-spacing: 0; font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem); }
html[lang="ur"] h2 { line-height: 1.8; letter-spacing: 0; }
html[lang="ur"] h3 { line-height: 2.25rem; }
.hl { color: var(--primary); }

/* Section label */
.label { font-size: 0.75rem; line-height: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: var(--s3); }
html[lang="ur"] .label { letter-spacing: 0; text-transform: none; font-size: 1rem; line-height: 1.75rem; }

/* Header */
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 72px; padding-block: var(--s2); }
.logo { display: inline-flex; align-items: center; min-height: 44px; }
.logo img { display: block; height: 30px; width: auto; }
.links { display: none; gap: var(--s6); }
.links a, .lang a, .lang span, .foot a { display: inline-flex; align-items: center; min-height: 44px; }
.links a { color: var(--text); font-weight: 600; text-decoration: none; }
.links a:hover { color: var(--primary); }
.right { display: flex; align-items: center; gap: var(--s4); }
.lang { display: flex; align-items: center; gap: var(--s1); }
.lang a, .lang span { padding-inline: var(--s2); font-weight: 600; }
.lang span { color: var(--text); }
.lang i { font-style: normal; color: var(--border-strong); }
.btn.nav-cta { display: none; }

/* Buttons (52px, radius 16, 700) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 52px; padding: 0 var(--s5); border: 1.5px solid var(--primary); border-radius: var(--radius);
  background: var(--primary); color: var(--surface); font: 700 1.0625rem/1.5rem var(--font);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
html[lang="ur"] .btn { font-family: var(--font), "Gulzar", sans-serif; line-height: 2rem; padding-block: var(--s1); }
.btn:hover { background: var(--deep); border-color: var(--deep); }
.btn:disabled { cursor: progress; opacity: 0.75; }
.btn--secondary { background: var(--surface); color: var(--deep); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--soft); border-color: var(--deep); }
.btn--quiet { background: none; border-color: transparent; color: var(--deep); min-height: 44px; padding-inline: var(--s3); font-weight: 600; }
.btn--quiet:hover { background: var(--soft); border-color: transparent; }

/* Chip (no border, tint fill, pill: not clickable) */
.chip { display: inline-flex; align-items: center; gap: var(--s2); padding: 2px var(--s3); border-radius: 999px; background: var(--soft); color: var(--deep); font-size: 0.9375rem; line-height: 1.375rem; font-weight: 600; white-space: nowrap; }
html[lang="ur"] .chip { line-height: 1.75rem; }
.chip--on { background: var(--primary); color: var(--surface); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex: none; }

/* Hero */
.hero { display: grid; gap: var(--s6); padding-block: var(--s5) var(--s7); align-items: center; }
.hero h1 { margin: var(--s4) 0 var(--s4); max-width: 12em; }
.lead { font-size: 1.125rem; line-height: 1.75rem; max-width: 32em; margin-bottom: var(--s5); }
html[lang="ur"] .lead { line-height: 2.5rem; }
.try { margin-top: var(--s4); color: var(--text); }
.try a { font-weight: 700; }

/* Waitlist form: field 52px, radius 16, 1.5px outline */
.wl { display: grid; gap: var(--s3); max-width: 520px; }
/* Email + button in ONE container (marketing layer: soft shadow allowed) */
.wl--row { gap: var(--s1); padding: var(--s1); background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 10px 28px -14px rgba(21, 79, 102, 0.35); }
.wl--row:focus-within { border-color: var(--deep); box-shadow: var(--focus), 0 10px 28px -14px rgba(21, 79, 102, 0.35); }
.wl--row:has(.input[aria-invalid="true"]) { border-color: var(--danger); }
.wl--row .input { border: 0; background: transparent; min-height: 52px; border-radius: 12px; }
.wl--row .input:focus, .wl--row .input:focus-visible { box-shadow: none; outline: none; }
.wl--row .btn { border-radius: 12px; width: 100%; }
.field-label { display: block; font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; color: var(--text); margin-bottom: var(--s2); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.input {
  width: 100%; min-height: 52px; padding: 0 var(--s4); background: var(--surface);
  border: 1.5px solid var(--border-strong); border-radius: var(--radius);
  font: 500 1.0625rem/1.5rem var(--font); color: var(--text); unicode-bidi: plaintext; text-align: start;
}
.input::placeholder { color: var(--muted); opacity: 1; }
.input:focus { border-color: var(--deep); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.hp { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
.msg { color: var(--danger); font-weight: 600; }
.msg[hidden] { display: none; }
.note { margin-top: var(--s3); }
.wl-block { max-width: 520px; }
@media (min-width: 600px) {
  .wl--row { grid-template-columns: 1fr auto; align-items: center; }
  .wl--row .btn { width: auto; }
}

/* Done state */
.done { max-width: 520px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.done-head { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); }
.tile { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--primary); display: grid; place-items: center; }
.tile svg { width: 20px; height: 20px; fill: none; stroke: var(--surface); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.done-title { color: var(--text); font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; }
html[lang="ur"] .done-title { line-height: 2.25rem; }
.done-title:focus { outline: none; }
.done-sub { margin-top: var(--s1); }
.wa { border-top: 1px solid var(--border); padding: var(--s4); display: grid; gap: var(--s3); }
.wa-actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.wa-done { border-top: 1px solid var(--border); padding: var(--s4); color: var(--text); font-weight: 600; }
.joined .wl-form, .joined .wl-note, .joined .wl-count, .joined .try--pre { display: none; }

/* Marketing hero layer (design.md): glows, soft shadows, tilt, float. Marketing only; the app stays flat. */
body { position: relative; }
.glows { position: absolute; inset: 0 0 auto 0; height: 960px; overflow: hidden; pointer-events: none; z-index: 0; }
.glow { position: absolute; border-radius: 50%; filter: blur(70px); }
.g1 { width: 340px; height: 340px; background: #C4ECF2; opacity: 0.8; inset-inline-start: -120px; top: -40px; }
.g2 { width: 340px; height: 340px; background: #CDF2E6; opacity: 0.75; inset-inline-end: -110px; top: 260px; }
header, main { position: relative; z-index: 1; }
.stage { position: relative; display: flex; justify-content: center; padding: var(--s6) 0 var(--s5); }
.stage > .chip { position: absolute; top: 0; inset-inline-start: 0; }
.phone { margin: 0; width: 268px; padding: 9px; background: #10181E; border-radius: 44px; box-shadow: 0 40px 60px -28px rgba(21, 79, 102, 0.5); }
.phone img { display: block; width: 100%; height: auto; border-radius: 35px; background: var(--canvas); }
.fc { position: absolute; z-index: 2; max-width: 210px; padding: var(--s3) var(--s4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 18px 36px -14px rgba(21, 79, 102, 0.4); }
.fc .label { margin: 0 0 var(--s1); }
.fc b { display: block; color: var(--text); font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; }
.fc small { display: block; font-size: 0.9375rem; line-height: 1.375rem; color: var(--muted); }
html[lang="ur"] .fc b, html[lang="ur"] .fc small { line-height: 2rem; }
.fc .pair { display: flex; gap: var(--s2); margin-top: var(--s2); }
.fc1 { top: 96px; inset-inline-end: 0; }
.fc2 { bottom: 76px; inset-inline-start: 0; }
@media (min-width: 900px) {
  .stage { padding: var(--s6) 0; min-height: 640px; align-items: center; }
  .phone { width: 304px; transform: rotate(3.5deg); }
  [dir="rtl"] .phone { transform: rotate(-3.5deg); }
  .fc1 { top: 120px; inset-inline-end: -28px; }
  .fc2 { bottom: 96px; inset-inline-start: -40px; }
}
@media (prefers-reduced-motion: no-preference) {
  .phone, .fc { animation: float 8s ease-in-out infinite; }
  .fc1 { animation-duration: 7s; animation-delay: -2s; }
  .fc2 { animation-duration: 7s; animation-delay: -5s; }
  @keyframes float { 50% { translate: 0 -9px; } }
}

/* Sections */
.sec { padding-block: var(--s7); }
.sec--tight { padding-top: 0; }
.sec-head { margin-bottom: var(--s6); max-width: 22em; }

/* How it works: one card, big cyan numerals, alternating rows */
.how { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.how > li { display: grid; gap: var(--s5); padding: var(--s5) var(--s4); }
.how > li + li { border-top: 1px solid var(--border); }
.step-head { display: grid; grid-template-columns: 56px 1fr; column-gap: var(--s3); align-items: start; }
.num { grid-row: 1 / span 2; color: var(--primary); font-size: 3rem; line-height: 1; font-weight: 800; letter-spacing: -0.02em; }
.step-head h3 { font-size: 1.5rem; line-height: 2rem; font-weight: 800; }
.step-head p { grid-column: 2; margin-top: var(--s1); }
.vig { background: var(--canvas); border-radius: var(--radius); padding: var(--s4); box-shadow: 0 18px 36px -22px rgba(21, 79, 102, 0.35); display: grid; gap: var(--s2); align-content: center; }
.vig > .chip:first-child { justify-self: start; background: var(--surface); }
.vrow { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 60px; padding: 10px var(--s4); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.vrow b { display: block; font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; color: var(--text); }
.vrow small { display: block; font-size: 0.9375rem; line-height: 1.375rem; font-weight: 500; color: var(--muted); }
html[lang="ur"] .vrow b, html[lang="ur"] .vrow small { line-height: 2rem; }
.vrow .pair { display: flex; gap: var(--s2); flex: none; }
.chev { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .chev { transform: scaleX(-1); }

/* Safety band (banner: tint, no border, radius 12) */
.safe { background: var(--soft); border-radius: 12px; padding: var(--s5); }
.safe p { color: var(--text); font-size: 1.5rem; line-height: 2rem; font-weight: 800; letter-spacing: -0.01em; max-width: 24em; }
html[lang="ur"] .safe p { line-height: 2.75rem; letter-spacing: 0; }

/* Closing */
.join-grid { display: grid; gap: var(--s6); }
.join-grid .lead { margin-bottom: 0; }

/* Footer */
.foot { border-top: 1px solid var(--border); padding-block: var(--s5) var(--s6); font-size: 0.9375rem; line-height: 1.375rem; }
html[lang="ur"] .foot { line-height: 2rem; }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3) var(--s5); align-items: center; }
.foot a { color: var(--muted); }
.foot .sep { padding-inline: var(--s2); color: var(--border-strong); }

@media (min-width: 900px) {
  .nav { min-height: 84px; }
  .links { display: flex; }
  .btn.nav-cta { display: inline-flex; }
  .hero { grid-template-columns: 1.05fr 0.95fr; gap: var(--s8); padding-block: var(--s7) var(--s9); }
  .hero h1 { margin-top: var(--s5); }
  .lead { font-size: 1.25rem; line-height: 1.875rem; }
  html[lang="ur"] .lead { line-height: 2.75rem; }
  .stage { padding-block: var(--s8) var(--s7); }
  .sec { padding-block: var(--s9); }
  .how > li { grid-template-columns: 1fr 1fr; gap: var(--s8); padding: var(--s7) var(--s6); align-items: center; }
  .how > li:nth-child(even) .vig { order: -1; }
  .step-head { grid-template-columns: 72px 1fr; }
  .num { font-size: 4rem; }
  .join-grid { grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: start; }
  .safe { padding: var(--s6); }
  .safe p { font-size: 2rem; line-height: 2.5rem; }
  html[lang="ur"] .safe p { line-height: 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}
@media (prefers-reduced-motion: no-preference) {
  .done { animation: settle 0.25s ease-out; }
  @keyframes settle { from { opacity: 0; transform: translateY(4px); } }
}

/* Legal pages (privacy) */
.legal { max-width: 720px; padding-block: var(--s5) var(--s8); }
.legal h1 { font-size: 2rem; line-height: 2.375rem; letter-spacing: -0.01em; }
.legal h2 { font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; margin-top: var(--s5); }
.legal p, .legal ul { margin-top: var(--s2); }
.legal ul { padding-inline-start: var(--s5); }
.legal .updated { margin-top: var(--s2); }
.wa-notice a { font-weight: 600; }