/* ============================================================================
   UFUQ · أفق — the showcase page
   ----------------------------------------------------------------------------
   This is a BRAND surface, so it takes permissions the app deliberately
   refuses: a fluid display scale, a serif for headings, long single-idea
   folds, and one dark band where the argument turns technical.

   The lane, named so it cannot drift: an EDITORIAL BRIEFING. Ink on white,
   serif headline against an engineered sans, generous measure, and the
   forecast line treated as the photograph — because the chart IS the product
   and no stock image would say more about it.

   Deliberately NOT: a dark SaaS hero with a gradient and three feature cards.
   Not navy-and-gold fintech. Not a cream editorial wash. Not a screenshot
   floating at an angle over a blurred blob.
   ========================================================================== */

body.lp {
  background: var(--bg);
  color: var(--ink);
  font-size: var(--t-lg);
  line-height: var(--lh-prose);
}

.wrap { inline-size: 100%; max-inline-size: 1120px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); }
.wrap-narrow { max-inline-size: 760px; }

/* ── fluid display scale — the one place fluid type is right ─────────────── */
.d1 { font-family: var(--font-display); font-size: clamp(2.1rem, 5.2vw, 3.9rem); line-height: 1.04; letter-spacing: -0.028em; font-weight: 600; text-wrap: balance; }
.d2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.12; letter-spacing: -0.022em; font-weight: 600; text-wrap: balance; }
.d3 { font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.25; letter-spacing: -0.012em; font-weight: 600; }
.lede { font-size: clamp(1rem, 1.4vw, 1.2rem); color: var(--ink-2); max-inline-size: 62ch; }
.sm { font-size: var(--t-body); color: var(--ink-3); }

html[lang='ar'] .d1, html[lang='ar'] .d2 { font-family: 'Plex Arabic', sans-serif; letter-spacing: 0; line-height: 1.25; }

/* ── rhythm ──────────────────────────────────────────────────────────────── */
.band { padding-block: clamp(56px, 9vw, 120px); }
.band-line { border-block-start: 1px solid var(--line); }
.band-sunk { background: var(--surface-2); }
.band-dark { background: var(--chrome); color: var(--ink-on-chrome); }
.band-dark .lede, .band-dark .sm { color: var(--ink-on-chrome-2); }
.band-dark .d2, .band-dark .d3 { color: var(--ink-on-chrome); }

.stack-sm > * + * { margin-block-start: var(--s-4); }
.stack-md > * + * { margin-block-start: var(--s-6); }
.stack-lg > * + * { margin-block-start: var(--s-9); }

/* ── nav ─────────────────────────────────────────────────────────────────── */
.lp-nav {
  position: sticky; inset-block-start: 0; z-index: var(--z-sticky);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--line);
}
.lp-nav .in { display: flex; align-items: center; gap: var(--s-4); min-block-size: 62px; }
.lp-nav a.anchor { font-size: var(--t-dense); color: var(--ink-3); font-weight: 500; }
.lp-nav a.anchor:hover { color: var(--ink); }
@media (max-width: 860px) { .lp-nav a.anchor { display: none; } }

.mark { display: flex; align-items: baseline; gap: var(--s-2); }
.mark .ar { font-family: 'Plex Arabic', sans-serif; font-size: 22px; font-weight: 700; color: var(--brand); line-height: 1; }
.mark .la { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(40px, 6vw, 84px) clamp(32px, 4vw, 56px); }
.hero .kicker {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-dense); font-weight: 500; color: var(--brand);
  padding: 5px 12px; border-radius: var(--r-full);
  background: var(--brand-wash); border: 1px solid var(--brand-line);
}

/* The hero chart is the photograph. It gets the space one would get. */
.hero-chart { position: relative; margin-block-start: var(--s-7); }
.hero-chart .plot {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: var(--s-5) var(--s-4) var(--s-4);
}
.hero-readout {
  display: flex; flex-wrap: wrap; gap: var(--s-6);
  padding: var(--s-4) var(--s-2) 0;
}
.hero-readout div { min-inline-size: 0; }
.hero-readout .l { font-size: var(--t-meta); color: var(--ink-3); font-weight: 500; }
.hero-readout .v { font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.hero-readout .v.bad { color: var(--crit); }
.hero-readout .v.good { color: var(--in); }

.try { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.try .lbl { font-size: var(--t-dense); color: var(--ink-3); margin-inline-end: var(--s-1); }

/* ── the four-stage flow ─────────────────────────────────────────────────── */
.flow { display: grid; gap: var(--s-3); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .flow { grid-template-columns: 1fr; } }
.stage {
  padding: var(--s-5); border-radius: var(--r-lg);
  background: var(--bg); border: 1px solid var(--line);
  position: relative;
}
.stage .n {
  font-family: var(--font-num); font-size: var(--t-meta); color: var(--brand);
  font-weight: 500; letter-spacing: 0.04em;
}
.stage h3 { margin-block: var(--s-2) var(--s-2); font-size: var(--t-h3); }
.stage p { font-size: var(--t-dense); color: var(--ink-3); }
.stage ul { margin-block-start: var(--s-3); display: grid; gap: 5px; }
.stage li { font-size: var(--t-meta); color: var(--ink-2); display: flex; gap: var(--s-2); align-items: baseline; }
.stage li::before { content: ''; inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--brand); flex: none; }

/* ── modules ─────────────────────────────────────────────────────────────── */
.mods { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.mod {
  display: block; padding: var(--s-5); border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--bg);
  transition: border-color var(--d-hover) var(--ease-out), background-color var(--d-hover) var(--ease-out);
}
a.mod:hover { border-color: var(--brand-line); background: var(--brand-wash); }
.mod .ico-box {
  display: grid; place-items: center; inline-size: 34px; block-size: 34px;
  border-radius: var(--r-sm); background: var(--brand-wash); color: var(--brand);
  margin-block-end: var(--s-3);
}
.mod h4 { font-size: var(--t-body); }
.mod p { font-size: var(--t-meta); color: var(--ink-3); margin-block-start: 4px; }

/* ── screen index ────────────────────────────────────────────────────────── */
.sindex { border-block-start: 1px solid var(--line); }
.srow {
  display: grid; align-items: center; gap: var(--s-4);
  grid-template-columns: 34px minmax(120px, 1.1fr) minmax(0, 2.4fr) auto auto;
  padding: var(--s-4) var(--s-2);
  border-block-end: 1px solid var(--line);
  transition: background-color var(--d-hover) var(--ease-out);
}
.srow:hover { background: var(--surface-2); }
.srow .n { font-family: var(--font-num); font-size: var(--t-meta); color: var(--ink-4); }
.srow .t { font-weight: 600; font-size: var(--t-body); }
.srow .d { font-size: var(--t-dense); color: var(--ink-3); }
.srow .tag { font-size: var(--t-micro); color: var(--brand); background: var(--brand-wash); padding: 3px 9px; border-radius: var(--r-full); white-space: nowrap; }
.srow .go { color: var(--ink-4); display: flex; }
@media (max-width: 780px) {
  .srow { grid-template-columns: 28px 1fr auto; gap: var(--s-3); }
  .srow .d { display: none; }
}

/* ── real vs scripted ────────────────────────────────────────────────────── */
.honest { display: grid; gap: var(--s-4); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .honest { grid-template-columns: 1fr; } }
.honest section { padding: var(--s-5); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg); }
.honest h3 { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-body); margin-block-end: var(--s-3); }
.honest li { font-size: var(--t-dense); color: var(--ink-2); padding-block: 5px; display: flex; gap: var(--s-2); }
.honest li::before { content: '·'; color: var(--ink-4); }
.honest .real h3 { color: var(--in); }
.honest .script h3 { color: var(--warn); }
.honest .absent h3 { color: var(--ink-3); }

/* ── path ────────────────────────────────────────────────────────────────── */
.path { counter-reset: step; }
.path li {
  display: grid; grid-template-columns: 56px 1fr; gap: var(--s-4);
  padding-block: var(--s-4);
  border-block-start: 1px solid var(--chrome-line);
}
.path li:first-child { border-block-start: 0; }
.path .t { font-family: var(--font-num); font-size: var(--t-dense); color: var(--brand-hover); }
.band-dark .path .t { color: var(--brand-hover); }
.path .s { font-size: var(--t-body); }
.path .s em { font-style: normal; color: var(--ink-on-chrome-2); display: block; font-size: var(--t-dense); margin-block-start: 3px; }

/* ── architecture / data model ───────────────────────────────────────────── */
.arch { display: grid; gap: var(--s-3); }
.tier {
  display: grid; grid-template-columns: 150px 1fr; gap: var(--s-4); align-items: center;
  padding: var(--s-4) var(--s-5); border-radius: var(--r-lg);
  background: var(--chrome-2); border: 1px solid var(--chrome-line);
}
@media (max-width: 640px) { .tier { grid-template-columns: 1fr; gap: var(--s-2); } }
.tier .k { font-size: var(--t-dense); font-weight: 600; color: var(--ink-on-chrome); }
.tier .v { font-size: var(--t-dense); color: var(--ink-on-chrome-2); font-family: var(--font-num); }

.pipe { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.pipe .step {
  padding: 8px 14px; border-radius: var(--r); font-size: var(--t-dense);
  background: var(--chrome-2); border: 1px solid var(--chrome-line); color: var(--ink-on-chrome);
  font-family: var(--font-num);
}
.pipe .arr { color: var(--ink-on-chrome-2); }

/* ── phase table ─────────────────────────────────────────────────────────── */
.phase { display: grid; gap: var(--s-4); grid-template-columns: 1fr 1fr; }
@media (max-width: 780px) { .phase { grid-template-columns: 1fr; } }
.phase section { padding: var(--s-5); border-radius: var(--r-lg); border: 1px solid var(--line); }
.phase .now { border-color: var(--brand-line); background: var(--brand-wash); }
.phase h3 { font-size: var(--t-h3); margin-block-end: var(--s-3); }
.phase li { display: flex; gap: var(--s-2); font-size: var(--t-dense); padding-block: 5px; color: var(--ink-2); }
.phase li .ico { color: var(--brand); flex: none; }
.phase .later li .ico { color: var(--ink-4); }

/* ── bilingual demo ──────────────────────────────────────────────────────── */
.bidemo { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
@media (max-width: 900px) { .bidemo { grid-template-columns: 1fr; justify-items: center; } }
.rtl-notes li { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-3); padding-block: var(--s-3); border-block-start: 1px solid var(--line); font-size: var(--t-dense); }
.rtl-notes li:first-child { border-block-start: 0; }
.rtl-notes b { display: block; color: var(--ink); }
.rtl-notes span { color: var(--ink-3); }
.rtl-notes .ico { color: var(--brand); }

/* ── gallery ─────────────────────────────────────────────────────────────── */
.gallery { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.shot { display: block; cursor: pointer; }
.shot .frame {
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line);
  background: var(--bg); aspect-ratio: 390 / 620;
  transition: border-color var(--d-hover) var(--ease-out), transform var(--d-hover) var(--ease-out);
}
.shot .frame .app-embed {
  inline-size: 390px; block-size: 844px; flex: none;
  transform: scale(var(--sc, 0.62)); transform-origin: top left;
  border-radius: 0; pointer-events: none;
}
#uf-stage {
  position: fixed; inset-block-start: 0; inset-inline-start: -10000px;
  inline-size: 390px; block-size: 844px; overflow: hidden;
}
.shot:hover .frame { border-color: var(--brand); }
.shot .cap { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-block-start: var(--s-3); }
.shot .cap b { font-size: var(--t-body); }
.shot .cap a { font-size: var(--t-meta); color: var(--brand); font-weight: 500; }
.shot:hover .cap a { text-decoration: underline; }

/* ── footer ──────────────────────────────────────────────────────────────── */
.lp-foot { padding-block: var(--s-9); border-block-start: 1px solid var(--line); }
.lp-foot .cols { display: flex; flex-wrap: wrap; gap: var(--s-9); justify-content: space-between; }
.lp-foot a { font-size: var(--t-dense); color: var(--ink-3); display: block; padding-block: 4px; }
.lp-foot a:hover { color: var(--ink); }

/* ── reveal ──────────────────────────────────────────────────────────────────
   Content is visible by DEFAULT and the reveal is an enhancement. A reveal
   that gates visibility ships a blank page to anything that does not run the
   observer — a headless renderer, a background tab, a PDF export.          */
[data-rv] { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  html.js [data-rv] {
    opacity: 0; transform: translateY(10px);
    transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
    /* CSS-only failsafe. If every line of JavaScript on the page dies, this
       still reveals the content — no observer, no class, no dependency.
       Three independent guarantees now stand between a script error and a
       blank page: this animation, the observer, and the fact that `.js` is
       only ever set by a script that has already armed both. */
    animation: uf-failsafe 1ms linear 1.2s forwards;
  }
  html.js [data-rv].in { opacity: 1; transform: none; animation: none; }
}
@keyframes uf-failsafe { to { opacity: 1; transform: none; } }