/* Osoul landing page — "Cinematic Riyadh", choreographed with GSAP (js/main.js).
   The hero is the app's own world: the owner's arch over the Riyadh skyline,
   with the app in hand. Every section after it carries something real — the
   owner's 3D art, the app's screens, the product's own numbers.
   Purple is the brand and time; gold only ever means money arriving.
   This file is the page at rest: every state here is final and readable, so
   the page is complete with reduced motion or without JavaScript.
   Tokens match the app (mobile/lib/ui/core/themes/colors.dart). */

:root {
  --purple: #7a5cff;
  --purple-deep: #5b3fe0;
  --purple-ink: #241351;
  --purple-light: #dccbff;
  --purple-soft: #f3efff;
  --purple-tint: #f7f5ff;
  --ink: #1b1530;
  --ink-soft: #6e6788;
  --ink-faint: #a8a2be;
  --line: #ede8fb;
  --white: #ffffff;
  --gold: #d9b26a;
  --gold-ink: #83601f;   /* gold that can carry text: 4.6:1 on --gold-tint */
  --gold-tint: #fbf7ee;
  --gold-line: #efe4cc;
  --green: #0f7b3c;
  --green-tint: #e8f7ee;
  /* The riyal mark, inlined: a mask image from a URL is a CORS fetch and fails from file://. */
  --sar: url("data:image/png;base64,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");

  /* Thmanyah's three families, each in the role it was drawn for (packaged in
     css/fonts.css). A role whose family isn't packaged yet falls back to Sans. */
  --font-ui: "Thmanyah Sans", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif; /* الرقمي: interface, labels, numbers */
  --font-display: "Thmanyah Serif Display", var(--font-ui);                            /* للعناوين: headings */
  --font-text: "Thmanyah Serif Text", var(--font-ui);                                  /* للنصوص: reading text */
  --font: var(--font-ui);
  --wrap: 1200px;
  --gutter: 20px;
  --nav-h: 64px;
  --shadow: 0 34px 70px -38px rgba(36, 19, 81, .38);
  --shadow-sm: 0 16px 34px -20px rgba(36, 19, 81, .35);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
@media (min-width: 1024px) { :root { --gutter: 40px; --nav-h: 76px; } }
@media (max-width: 380px) { :root { --gutter: 16px; } }

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
/* Smooth anchor jumps only without JS: with it, main.js glides to sections
   itself, and a CSS smooth scroll underneath ScrollSmoother would ease twice
   (ScrollTrigger writes the value back inline on every refresh). */
html:not(.js) { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- Language: show one of each pair ---------- */
html[lang="ar"] .en,
html[lang="en"] .ar { display: none !important; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
  position: fixed; inset-inline-start: 12px; top: -60px; z-index: 300;
  padding: 10px 16px; border-radius: 12px; background: var(--ink); color: var(--white);
}
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 8px; }

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

/* ---------- Motion support ---------- */
/* Hidden only until GSAP plays the hero in (the head script lifts this after 4s regardless). */
html.motion-pending .hero-copy { visibility: hidden; }
/* SplitText wraps each word in a clipping mask; Arabic descenders need room below the line. */
.sw-mask { padding-block: .08em .24em; margin-block: -.08em -.24em; }

/* The intro: the wordmark travels from the curtain into the header's logo slot. */
.curtain {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--purple-deep);
}
.curtain-mark { position: relative; width: min(240px, 56vw); }
.curtain-mark img { width: 100%; height: auto; }
.curtain-mark .dark { position: absolute; inset: 0; opacity: 0; }

/* ---------- Money ---------- */
.money { display: inline-flex; align-items: baseline; gap: .18em; white-space: nowrap; }
.digits { direction: ltr; unicode-bidi: isolate; }
/* The Saudi riyal mark as a mask, so it takes the colour of its text. */
.sar {
  display: inline-block; flex: none;
  width: .72em; height: .8em; vertical-align: -.06em;
  background: currentColor;
  -webkit-mask: var(--sar) center / contain no-repeat;
          mask: var(--sar) center / contain no-repeat;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 54px; padding-inline: 28px; border-radius: 999px;
  font-size: 16px; font-weight: 500; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-sm { height: 42px; padding-inline: 18px; font-size: 15px; }
.btn-primary { background: var(--purple); color: var(--white); }
.btn-primary:hover { background: var(--purple-deep); }
.btn-ghost { background: var(--white); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--purple-light); color: var(--purple-deep); }

/* ---------- Header: fixed, hides on the way down, returns on the way up ---------- */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 100;
  height: var(--nav-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease, transform .45s var(--ease);
}
.nav.is-scrolled { background: rgba(255, 255, 255, .94); border-bottom-color: var(--line); }
.nav.is-hidden { transform: translateY(-100%); }
.nav-row { display: flex; align-items: center; gap: 36px; height: 100%; }
.brand img { height: 34px; width: auto; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { font-size: 15px; color: var(--ink-soft); transition: color .2s ease; }
.nav-links a:hover { color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.lang-btn {
  height: 42px; min-width: 52px; padding-inline: 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--white); font-size: 14px; font-weight: 500;
}
.lang-btn:hover { border-color: var(--purple-light); }
.menu-btn {
  display: none; width: 42px; height: 42px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--white);
  align-items: center; justify-content: center;
}

/* ---------- Type ---------- */
.h1 { font-size: clamp(40px, 4.6vw, 66px); line-height: 1.22; font-weight: 500; }
.h2 { font-size: clamp(30px, 3.8vw, 52px); line-height: 1.26; font-weight: 500; }
/* Letter-spacing only ever touches Latin: in Arabic it breaks the joins. */
/* The serif's Latin sets wider than its Arabic, so English sits a step smaller; tracking stays light, it's a serif. */
html[lang="en"] .h1 { font-size: clamp(36px, 3.9vw, 54px); line-height: 1.08; letter-spacing: -.012em; }
html[lang="en"] .h2 { font-size: clamp(27px, 3vw, 42px); line-height: 1.12; letter-spacing: -.01em; }
.h1 em, .h2 em { font-style: normal; color: var(--purple); }
/* Even line lengths: no single word stranded on a heading's last line. */
.h1, .h2 { text-wrap: balance; }
/* Serif Display is packaged in Medium only: never let the browser fake a bolder cut. */
.h1, .h2 { font-family: var(--font-display); font-synthesis: none; }
/* Paragraphs people read are set in Serif Text; numbers are data, so they stay in Sans wherever they appear. */
.lead, .sec-lead, .how-step p, .why-card p, .callouts li > span, .faq-a > p, .step p, .footer-brand p { font-family: var(--font-text); }
.digits, .money { font-family: var(--font-ui); }
/* Card titles are headings too: Serif Display, in the one weight packaged. */
.how-step h3, .why-card h3, .step h3, .sheet h3 { font-family: var(--font-display); font-weight: 500; font-synthesis: none; }
.h2 em.gold { color: var(--gold-ink); }
.lead { margin-top: 22px; max-width: 30em; font-size: 19px; color: var(--ink-soft); }
.sec-lead { margin-top: 16px; max-width: 34em; font-size: 18px; color: var(--ink-soft); }

/* ================= Hero: through the arch ================= */
/* A doorway in the owner's wall with Riyadh beyond. The .world box has the wall image's
   proportions, so the city layers are placed in the same coordinates as the opening:
   --ox is the opening's centre, and main.js flies the camera to it. */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  height: 100vh; height: 100svh; min-height: 560px;
  background: #efe9fc;                        /* the wall's plaster, until the images arrive */
}
.scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Lavender above, the warm glow of a low sun at the horizon. */
.sky { position: absolute; inset: 0; background: linear-gradient(180deg, #d4c6f7 0%, #e6dbfa 50%, #f4e2d3 80%, #efdccf 100%); }
.world {
  --ox: 28%;                                  /* opening centre on the desktop wall (Arabic) */
  position: absolute; left: 50%; top: 50%;
  width: max(100vw, 150vh); aspect-ratio: 3 / 2;
  translate: -50% -50%;
}
html[dir="ltr"] .world { --ox: 72%; }         /* the wall is mirrored in English */
.layer { position: absolute; display: block; max-width: none; height: auto; will-change: transform; }
.far    { width: 110%; left: calc(var(--ox) - 55%); top: 0; }
.clouds { width: 62%;  left: calc(var(--ox) - 31%); top: 10%; opacity: .85; }
.near   { width: 100%; left: calc(var(--ox) - 50%); top: 18%; }   /* its towers frame the opening */
.wall   { inset: 0; width: 100%; height: 100%; }
.wall img { width: 100%; height: auto; max-width: none; }
html[dir="ltr"] .wall img { transform: scaleX(-1); }   /* opening on the right, copy on the left */
.wall-m { display: none; }

/* The payoff: the app rises into the open sky between the towers (main.js shows it). */
.rise {
  position: absolute; z-index: 1; left: 50%; bottom: 4svh;
  width: clamp(200px, 23vw, 300px); translate: -50% 0;
  visibility: hidden;
}
.rise-phone { width: 100%; filter: drop-shadow(0 34px 40px rgba(36, 19, 81, .32)); }
.orbit { position: absolute; width: max-content; }
.orbit-pay { top: 8%; inset-inline-end: 74%; }
.orbit-return { top: 40%; inset-inline-start: 84%; }
.orbit-nafath { bottom: 14%; inset-inline-end: 84%; }

.hero-grid {
  position: relative; z-index: 2; display: grid; align-items: center;
  height: 100%; padding-top: var(--nav-h);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px;
  margin-top: 38px; padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-soft);
}
.hero-trust li { display: inline-flex; align-items: center; gap: 10px; }
/* Logos only, each in its own colours, sized to read at one optical height. */
.hero-trust img { width: auto; }
.trust-nafath { height: 21px; }
.trust-rega { height: 26px; }   /* wide lockup with fine print */
.trust-anb { height: 27px; }
.trust-sv { height: 23px; }
.nafath { display: inline-block; height: 20px; width: auto; }
.paymarks { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.paymarks img { height: 15px; width: auto; }

.chip {
  background: var(--white); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-sm);
}
.chip-pay { display: flex; align-items: center; gap: 12px; width: 236px; padding: 12px 14px; }
.chip-icon { width: 40px; height: 40px; border-radius: 11px; flex: none; }
.chip-t { display: grid; line-height: 1.35; min-width: 0; }
.chip-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--ink-faint); }
.chip-meta b { font-weight: 500; color: var(--ink-soft); }
.chip-title { font-size: 13.5px; font-weight: 500; }
.chip-amount { font-size: 16px; font-weight: 700; color: var(--gold-ink); }

.chip-return { display: grid; gap: 2px; width: 156px; padding: 13px 15px 12px; }
.chip-k { font-size: 12px; color: var(--ink-soft); }
.chip-big { font-size: 28px; font-weight: 700; line-height: 1.15; color: var(--purple); }
.chip-note { font-size: 11px; color: var(--ink-faint); }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin-block: 6px 4px; direction: ltr; }
.spark i { flex: 1; height: calc(var(--h) * 100%); border-radius: 2px; background: var(--purple-light); }
.spark i:last-child { background: var(--purple); }

.chip-nafath { display: flex; align-items: center; gap: 10px; padding: 11px 14px; font-size: 13px; font-weight: 500; }
.chip-nafath .nafath { height: 18px; }
.tick-ok {
  position: relative; display: inline-block; flex: none;
  width: 20px; height: 20px; border-radius: 50%; background: var(--green-tint);
}
.tick-ok::after {
  content: ""; position: absolute; left: 7px; top: 4px; width: 5px; height: 9px;
  border-right: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(45deg);
}


/* ---------- Hero layouts ---------- */
/* Landscape: the copy fills the wall's plain half (first column: right in Arabic, left in English). */
@media (min-aspect-ratio: 4/5) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .hero-copy { grid-column: 1; }
}
/* Portrait: the tall wall, opening centred and low, the copy above it.
   --arch-top is where the top of the arch's carving lands on screen; the wall's
   bottom is placed from it (the arch top sits 41.6% of the wall's height above its bottom). */
@media (max-aspect-ratio: 4/5) {
  .world {
    --ox: 50%;
    --arch-top: max(60svh, 520px);
    width: 100vw; aspect-ratio: 1024 / 2636;
    top: auto; translate: -50% 0;
    bottom: calc(100svh - var(--arch-top) - 100vw * 2636 / 1024 * .416);
  }
  html[dir="ltr"] .world { --ox: 50%; }
  .wall-d { display: none; }
  .wall-m { display: block; }
  .far    { width: 200%; left: -50%; top: 44.5%; }
  .clouds { width: 140%; left: -20%; top: 60%; }
  .near   { width: 200%; left: -50%; top: 56.3%; }
  .hero-grid { align-items: start; padding-top: calc(var(--nav-h) + 22px); }
  .rise { width: min(62vw, 300px); bottom: 3svh; }
  /* on a phone the chips overlap the phone's edges instead of floating past the screen */
  .orbit-pay { inset-inline-end: 30%; top: -7%; }
  .orbit-return { inset-inline-start: 70%; top: 38%; }
  .orbit-nafath { inset-inline-end: 40%; bottom: 7%; }
}

/* ================= Sections ================= */
.section { padding-block: 88px; }
.section.section-last { padding-bottom: 56px; }
.section-tint { background: var(--purple-tint); }
.section-dark {
  position: relative; color: var(--white);
  /* Solid #160a33 at the top so the skyline above joins it without a seam,
     then the owner's night art (line-drawn Riyadh) fades in beneath. */
  background:
    linear-gradient(#160a33 0, #160a33 70px, rgba(22, 10, 51, 0) 380px),
    url("../assets/art/night.webp") center bottom / cover no-repeat,
    #160a33;
}
.section-dark .h2 em { color: var(--purple-light); }
.section-dark .sec-lead { color: rgba(255, 255, 255, .66); }
.sec-head { margin-bottom: 44px; }
.sec-head-center { text-align: center; }
.sec-head-center .sec-lead { margin-inline: auto; }

/* ---------- How it works ---------- */
.how-steps { display: grid; gap: 14px; }
.how-step {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 14px;
  padding: 18px 18px 22px; border-radius: 26px;
  background: var(--white); border: 1px solid var(--line);
}
.how-step-art {
  grid-column: 1 / -1; display: grid; place-items: center;
  height: 180px; margin-bottom: 14px; border-radius: 20px; background: var(--purple-tint);
}
.how-step-art img { width: auto; max-height: 140px; }
.j-n { padding-top: 4px; font-size: 13px; font-weight: 500; color: var(--purple); }
.how-step h3 { font-size: 20px; font-weight: 700; line-height: 1.4; }
.how-step p { margin-top: 6px; font-size: 15.5px; color: var(--ink-soft); }
.how-stage { display: none; }

/* The term as a line: purple fills with time, a gold dot lights per step. */
.term { display: flex; align-items: center; gap: 14px; margin-top: 30px; font-size: 13px; color: var(--ink-soft); }
.term-end { flex: none; }
.term-line { position: relative; flex: 1; height: 2px; border-radius: 1px; background: var(--purple-light); }
.term-fill {
  position: absolute; inset-block: 0; inset-inline-start: 0; width: 100%;
  border-radius: inherit; background: var(--purple);
  transform-origin: left center;
}
[dir="rtl"] .term-fill { transform-origin: right center; }
.term-line i {
  position: absolute; top: 50%; inset-inline-start: calc(var(--x) * 100%);
  width: 12px; height: 12px; margin: -6px -6px 0; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px var(--white);
}

/* ---------- Every opportunity ---------- */
.deal-grid { display: grid; gap: 22px; }
.sheet-wrap { position: relative; isolation: isolate; order: -1; justify-self: center; width: 100%; max-width: 420px; }
.sheet {
  width: 100%;
  overflow: hidden; border-radius: 28px;
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.sheet-img { position: relative; overflow: hidden; aspect-ratio: 940 / 530; }
.sheet-img img { width: 100%; height: 100%; object-fit: cover; }
.sheet-badge {
  position: absolute; top: 14px; inset-inline-start: 14px;
  padding: 3px 11px; border-radius: 999px;
  background: var(--green-tint); color: var(--green); font-size: 12px; font-weight: 500;
}
.sheet-body { padding: 18px 20px 20px; }
.sheet-tag {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  background: var(--purple-tint); border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 500; color: var(--purple-deep);
}
.sheet h3 { margin-top: 8px; font-size: 20px; font-weight: 700; line-height: 1.35; }
.sheet-loc { font-size: 13.5px; color: var(--ink-soft); }
.sheet-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 16px; padding-block: 14px; border-block: 1px solid var(--line);
}
.sheet-stats dt { font-size: 12px; color: var(--ink-soft); }
.sheet-stats dd { font-size: 19px; font-weight: 700; line-height: 1.3; }
.sheet-stats div:first-child dd { color: var(--purple); }
.sheet-stats small { font-size: 12px; font-weight: 500; color: var(--ink-soft); }
.sheet-k { display: block; margin-bottom: 8px; font-size: 12.5px; color: var(--ink-soft); }
.sheet-sched { margin-top: 14px; }
.sheet-docs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.doc {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line);
  font-size: 12.5px;
}
.doc i { position: relative; width: 12px; height: 15px; border-radius: 2px; background: var(--purple-light); }
.doc i::after { content: ""; position: absolute; top: 0; inset-inline-end: 0; border: 4px solid; border-color: var(--white) var(--white) var(--purple) var(--purple); }
.sheet-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.sheet-fee { font-size: 12px; color: var(--ink-soft); }

/* A payment in the schedule: capital (purple) with its profit (gold) on top. */
.mini-bars { display: flex; align-items: flex-end; gap: 3px; height: 36px; direction: ltr; }
.mini-bars i {
  position: relative; flex: 1; height: 100%; border-radius: 3px; overflow: hidden;
  background: linear-gradient(to top, var(--purple) 71%, var(--gold) 71%);
  transform-origin: bottom;
}
.mini-bars-gold i { background: var(--gold); }

.callouts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.callouts li:last-child { grid-column: 1 / -1; }
.callouts li {
  display: grid; gap: 2px; padding: 14px 16px; border-radius: 18px;
  background: var(--white); border: 1px solid var(--line);
}
.callouts b { font-size: 15px; font-weight: 700; }
.callouts li > span { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }

/* ---------- Payments ---------- */
.pay-grid { display: grid; gap: 28px; }
.pay-grid .sec-head { margin-bottom: 0; }
.pay-grid .h2 { font-size: clamp(30px, 3.2vw, 44px); }
html[lang="en"] .pay-grid .h2 { font-size: clamp(28px, 2.9vw, 40px); }
.receipt {
  max-width: 440px; margin-top: 28px; padding: 6px 22px;
  background: var(--white); border: 1px solid var(--gold-line); border-radius: 24px;
  box-shadow: 0 34px 60px -46px rgba(131, 96, 31, .55);
}
.r-head {
  display: flex; justify-content: space-between; gap: 12px;
  padding-block: 14px; border-bottom: 1px solid #f4eddd;
  font-size: 13px; color: var(--ink-soft);
}
.r-row, .r-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px; }
.r-row + .r-row { border-top: 1px solid #f6f0e4; }
.r-k { display: inline-flex; align-items: center; gap: 10px; }
.r-k::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--purple); }
.r-k-gold::before { background: var(--gold); }
.r-row .money { font-weight: 500; }
.r-total { border-top: 1.5px dashed #e8d8b6; font-size: 18px; font-weight: 700; color: var(--gold-ink); }

.chart {
  padding: 22px 22px 18px; border-radius: 28px;
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.chart-title { font-size: 15px; color: var(--ink-soft); }
.chart-total { font-size: 30px; font-weight: 700; }
.chart-total .sar { width: .55em; height: .62em; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 6px; font-size: 13px; color: var(--ink-soft); }
.lg { display: inline-flex; align-items: center; gap: 8px; }
.lg::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.lg-cap::before { background: var(--purple); }
.lg-pro::before { background: var(--gold); }
.lg b { font-weight: 500; color: var(--ink); }
/* Time runs left to right in both languages, as on any financial chart. */
.chart-plot { position: relative; height: 240px; margin-top: 18px; direction: ltr; }
.chart-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Where the wallet ends the term. */
.chart-dot {
  position: absolute; right: 0; top: calc(14 / 240 * 100%);
  width: 12px; height: 12px; margin: -6px -6px 0 0; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px var(--white), 0 0 0 5px var(--gold-line);
}
.chart-axis { display: flex; justify-content: space-between; margin-top: 10px; direction: ltr; font-size: 12px; color: var(--ink-faint); }
.chart-note { margin-top: 14px; font-size: 12px; line-height: 1.6; color: var(--ink-faint); }

/* ---------- Why Osoul ---------- */
.why-grid { display: grid; gap: 14px; }
.why-card {
  padding: 16px 16px 24px; border-radius: 28px;
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .08);
  transform-style: preserve-3d;
}
.why-vis {
  display: grid; place-items: center; height: 180px; margin-bottom: 20px;
  border-radius: 20px; background: rgba(255, 255, 255, .04); overflow: hidden;
}
.why-card h3, .why-card p { padding-inline: 8px; }
.why-card h3 { font-size: 20px; font-weight: 700; line-height: 1.4; }
.why-card p { margin-top: 6px; font-size: 15.5px; color: rgba(255, 255, 255, .66); }
.why-vis-bars .mini-bars { width: 72%; height: 64px; gap: 5px; }
.why-vis picture { display: block; } /* inline boxes ignore transforms; the art floats */
.why-art { width: auto; max-height: 140px; }

.doc-mock {
  position: relative; display: grid; gap: 9px; width: 210px; padding: 16px 18px 18px;
  border-radius: 14px; background: var(--white); color: var(--ink);
  transform: rotate(-3deg); box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .6);
}
.dm-title { font-size: 13px; font-weight: 700; }
.dm-line { height: 5px; border-radius: 3px; background: var(--line); }
.dm-short { width: 64%; }
.dm-name {
  justify-self: start; padding: 3px 10px; border-radius: 999px;
  background: var(--purple-soft); color: var(--purple-deep); font-size: 11.5px; font-weight: 500;
}
.dm-seal {
  position: absolute; inset-inline-end: 14px; bottom: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--gold); box-shadow: inset 0 0 0 4px var(--white), inset 0 0 0 6px var(--gold);
}
.nafath-tile {
  display: grid; justify-items: center; gap: 14px;
  padding: 22px 30px; border-radius: 16px; background: var(--white);
}
.nafath-tile .nafath { height: 36px; }
.ok-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 6px;
  border-radius: 999px; background: var(--green-tint); color: var(--green);
  font-size: 12.5px; font-weight: 500;
}
[dir="rtl"] .ok-pill { padding: 4px 6px 4px 12px; }

/* ---------- Five steps ---------- */
.steps-wrap { position: relative; }
.steps-path { display: none; }
.steps {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin-inline: calc(var(--gutter) * -1); padding: 6px var(--gutter) 14px;
  scrollbar-width: none;
}
.steps::-webkit-scrollbar { display: none; }
.step { flex: 0 0 62%; max-width: 240px; scroll-snap-align: start; text-align: center; }
/* The owner's 3D phone with the app's real screens composited in (assets/mockups);
   the English set is the mirror image, so the phones lean with the reading direction. */
.phone3d { max-width: 230px; margin-inline: auto; }
.phone3d img { width: 100%; height: auto; filter: drop-shadow(0 28px 26px rgba(36, 19, 81, .26)); }
.step-n {
  display: inline-grid; place-items: center; width: 30px; height: 30px; margin-top: 20px;
  border-radius: 50%; background: var(--purple); color: var(--white); font-size: 14px; font-weight: 500;
}
.step h3 { margin-top: 10px; font-size: 17px; font-weight: 700; line-height: 1.4; }
.step p { margin-top: 4px; font-size: 14px; color: var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; gap: 36px; }
.hours {
  display: grid; gap: 2px; max-width: 360px; margin-top: 30px; padding: 20px 22px;
  border-radius: 22px; background: var(--purple-tint); border: 1px solid var(--line);
}
.hours-k { font-size: 13px; color: var(--ink-soft); }
.hours b { font-size: 16px; font-weight: 700; }
.hours-t { justify-self: start; font-size: 15px; color: var(--purple-deep); font-weight: 500; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-block: 22px; list-style: none; cursor: pointer;
  font-size: 18px; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-top: -5px;
  /* Physical right, not inline-end: in RTL inline-end flips and the chevron points sideways. */
  border-right: 1.6px solid var(--purple); border-bottom: 1.6px solid var(--purple);
  transform: rotate(45deg); transition: transform .3s var(--ease), margin .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq-a { overflow: hidden; }
.faq-a > p { max-width: 36em; padding-bottom: 22px; color: var(--ink-soft); }
.faq .faq-marks { margin-top: -10px; }

/* ---------- Closing: the arch again, now at dusk ---------- */
.arch { position: relative; overflow: hidden; background: #e9e4f5; }
.arch-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.closing {
  position: relative; overflow: hidden;
  display: grid; gap: 8px; padding: 40px 24px 0; border-radius: 34px;
  background: var(--purple-deep) url("../assets/art/diamond-pattern.jpg") center / cover no-repeat;
  color: var(--white);
}
.closing .h2 em.gold { color: var(--gold); }
.closing .sec-lead { color: rgba(255, 255, 255, .8); }
.closing-copy { padding-bottom: 12px; }
.closing-stage { display: flex; justify-content: center; align-items: flex-end; }
.arch-dusk { width: 290px; height: 390px; border-radius: 145px 145px 0 0; box-shadow: none; }

.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.store {
  display: inline-flex; align-items: center; gap: 10px;
  height: 56px; padding-inline: 18px 22px; border-radius: 16px;
  background: var(--white); color: var(--ink);
}
.store svg { width: 24px; height: 24px; }
.store-t { display: grid; direction: ltr; text-align: left; font-size: 17px; font-weight: 700; line-height: 1.15; }
.store-t small { font-size: 11px; font-weight: 400; color: var(--ink-soft); }
html[lang="ar"] .store-t small { direction: rtl; text-align: right; }


/* ---------- The owner's 3D pieces, each placed where it means something ---------- */
.fx { position: absolute; z-index: 2; height: auto; pointer-events: none; filter: drop-shadow(0 18px 22px rgba(36, 19, 81, .22)); }
/* The contract's documents, slid out from behind the opportunity sheet. */
.fx-doc { z-index: -1; width: 84px; bottom: 96px; inset-inline-start: -22px; transform: rotate(-10deg); }
/* The payment, landed on the receipt's bottom edge: the middle of the total row is
   the one spot with no text in either language. */
.receipt { position: relative; }
.fx-coin { width: 56px; bottom: -34px; left: 50%; margin-left: -28px; transform: rotate(14deg); }
.r-total { margin-inline: -10px; padding-inline: 10px; border-radius: 12px; }
/* On schedule. */
.chart { position: relative; }
.fx-cal { width: 68px; top: -34px; inset-inline-end: -8px; }
/* Step 1's key (only on the pinned desktop stage). */
.fx-key { width: 118px; bottom: 11%; inset-inline-end: 11%; }
/* Verified, on the closing arch. */
.arch-holder { position: relative; }
.phone-tilt {
  position: absolute; left: 50%; bottom: -12%; z-index: 1;
  width: 80%; max-width: none; height: auto; translate: -50% 0;
  filter: drop-shadow(0 34px 34px rgba(14, 6, 40, .5));
}
.fx-badge { width: 74px; top: 12%; inset-inline-end: -24px; }

/* ---------- The night city's skyline: the dark band's top edge ---------- */
#pay { padding-bottom: calc(88px + 14vw); }
.night-edge { position: absolute; left: 0; right: 0; bottom: 100%; pointer-events: none; }
.skyline { display: block; max-width: none; }
.night-edge .skyline { width: 100%; height: auto; }
/* The far city in lavender, mirrored so it never doubles the near one. */
.night-edge .skyline-far { position: absolute; left: 0; bottom: 12%; transform: scaleX(-1); }
.night-edge .skyline-near { position: relative; }
/* The same city, faint and white, along the closing panel's floor. */
.closing .skyline-closing {
  position: absolute; left: 0; bottom: 0; z-index: 0; width: 100%; height: auto;
  filter: brightness(0) invert(1); opacity: .09; pointer-events: none;
}
.closing-copy, .closing-stage { position: relative; z-index: 1; }

/* ---------- Footer ---------- */
.footer { padding-top: 56px; }
.footer-in { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.footer-brand { grid-column: 1 / -1; }
.footer-brand img { height: 34px; width: auto; }
.footer-brand p { margin-top: 14px; max-width: 24em; font-size: 15px; color: var(--ink-soft); }
.footer-col { display: grid; align-content: start; gap: 10px; font-size: 15px; }
.footer-col h4 { margin-bottom: 4px; font-size: 15px; font-weight: 700; }
.footer-col a, .footer-col p { color: var(--ink-soft); }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  margin-top: 44px; padding-block: 24px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--ink-soft);
}

/* ================= Wider screens ================= */
@media (min-width: 720px) {
  .how-steps { grid-template-columns: repeat(3, 1fr); }
  .how-step { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .callouts { grid-template-columns: 1fr; }
  .callouts li:last-child { grid-column: auto; }
  .deal-grid { grid-template-columns: 1fr 1fr; }
  .sheet-wrap { grid-column: 1 / -1; }
  .footer-in { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .footer-brand { grid-column: auto; }
  .closing { grid-template-columns: 1.1fr .9fr; align-items: end; gap: 32px; padding: 56px 48px 0; }
  .closing-copy { align-self: center; padding-bottom: 56px; }
  .arch-dusk { width: 300px; height: 430px; border-radius: 150px 150px 0 0; }
}

@media (min-width: 1024px) {
  .section { padding-block: 128px; }

  .sec-head { max-width: 700px; }
  .sec-head-center { margin-inline: auto; }

  /* How it works: one stage whose art follows the step being read, pinned by
     main.js. Only with motion (html.motion): without it the three cards keep
     their own art, as on tablets, since nothing would switch the stage. */
  html.motion .how { padding-block: 0; }
  html.motion .how-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center;
    min-height: 100vh; padding-block: calc(var(--nav-h) + 24px) 40px;
  }
  html.motion .how-steps { grid-template-columns: 1fr; gap: 6px; }
  html.motion .how-step {
    grid-template-columns: auto 1fr; padding: 18px 20px; border-color: transparent; background: none;
    transition: background-color .35s ease, border-color .35s ease;
  }
  html.motion .how-step.is-active { background: var(--white); border-color: var(--line); box-shadow: var(--shadow-sm); }
  html.motion .how-step-art { display: none; }
  html.motion .how-stage {
    position: relative; display: block; height: min(560px, 70vh);
    border-radius: 34px; background: var(--purple-tint); overflow: hidden;
  }
  .how-stage picture { position: absolute; inset: 0; display: grid; place-items: center; }
  .how-art { width: auto; max-width: 62%; max-height: 62%; }
  .how-count {
    position: absolute; top: 26px; inset-inline-start: 30px; z-index: 1;
    direction: ltr; /* "02 / 03", never "/ 03 02" */
    font-size: 15px; font-weight: 500; color: var(--ink-soft);
  }
  .how-count b { font-size: 34px; font-weight: 700; color: var(--purple); }

  .deal-grid { grid-template-columns: 1fr 420px 1fr; align-items: center; gap: 44px; }
  .sheet-wrap { order: 0; grid-column: auto; }
  .callouts { gap: 54px; }
  .callouts li { position: relative; padding: 0; background: none; border: 0; border-radius: 0; }
  /* Each note points at the sheet across the gap; --l lets main.js draw the line. */
  .callouts li::after {
    content: ""; position: absolute; top: 14px; width: 30px; height: 1px; background: var(--purple-light);
    transform: scaleX(var(--l, 1));
  }
  .callouts li::before {
    content: ""; position: absolute; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--purple);
  }
  .callouts-a li { text-align: end; padding-inline-end: 44px; }
  .callouts-a li::after { inset-inline-end: 6px; transform-origin: right center; }
  .callouts-a li::before { inset-inline-end: 0; }
  .callouts-b li { padding-inline-start: 44px; }
  .callouts-b li::after { inset-inline-start: 6px; transform-origin: left center; }
  .callouts-b li::before { inset-inline-start: 0; }
  [dir="rtl"] .callouts-a li::after { transform-origin: left center; }
  [dir="rtl"] .callouts-b li::after { transform-origin: right center; }
  .callouts b { font-size: 18px; }
  .callouts li > span { font-size: 15px; }

  .pay-grid { grid-template-columns: .85fr 1.15fr; align-items: center; gap: 56px; }
  .chart { padding: 28px 30px 22px; }
  .chart-plot { height: 300px; }

  .why-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; perspective: 1200px; }
  .why-vis { height: 200px; }

  /* The dashed path through the five phones (drawn by main.js). */
  .steps-path {
    display: block; position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%; overflow: visible; pointer-events: none;
  }
  .steps {
    position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px;
    overflow: visible; margin: 0; padding: 0;
  }
  .step { max-width: none; }
  .step:nth-child(even) { margin-top: 56px; }

  .faq-grid { grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; }

  .closing { padding: 64px 72px 0; min-height: 520px; }
  #pay { padding-bottom: calc(128px + 13vw); }
  .fx-doc { width: 116px; bottom: 120px; inset-inline-start: -78px; }
  .fx-coin { width: 74px; bottom: -44px; margin-left: -37px; }
  .fx-cal { width: 96px; top: -50px; inset-inline-end: -36px; }
  .fx-badge { width: 92px; inset-inline-end: -38px; }
  .arch-dusk { width: 320px; height: 460px; border-radius: 160px 160px 0 0; }
}

/* ================= Small screens: the menu ================= */
@media (max-width: 1023px) {
  .nav-links {
    position: absolute; inset-inline: 0; top: var(--nav-h);
    display: none; flex-direction: column; gap: 0;
    padding: 6px var(--gutter) 14px;
    background: var(--white); border-bottom: 1px solid var(--line);
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding-block: 12px; font-size: 16px; color: var(--ink); }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 560px) {
  .nav-cta { display: none; }
  .lead { font-size: 17.5px; }
  .sec-lead { font-size: 17px; }
  .chip-pay { width: 210px; padding: 10px 12px; }
  .chip-return { width: 140px; }
  .chip-big { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}