/* yuba-app.com — the app's own skin, translated to the web.
   Tokens from the app (src/theme/tokens.ts): page #0b0c0f · surfaces #141519/#191b20/#23252c
   · glass rgba(26,24,27,.68) with a .12 white border · ink #fff/#9aa0a8 (ink3 lifted to #82878f
   for WCAG AA on the web) · red #e31937 = brand accent only (logo dot, tick, kicker square,
   active marks) · teal #5fb8a3 = money data and live states.
   Latin: Space Grotesk. Arabic: Noto Kufi Arabic (all-Kufi, the founder's law).
   Visual pass, 12 Oct 2026: Obsidian ground + the app's fixed neon field, one type scale,
   device-framed screens, section rhythm, quiet motion that never hides content.
   Interaction pass, 12 Oct 2026: a fixed header that condenses on scroll (menu on a phone,
   contents on the policies), one focus ring, finger-sized targets, the screens open larger.
   Content pass, 12 Oct 2026: the hero names the two reasons to try it (2 minutes, 60 free days),
   the 404 speaks both languages, nothing breaks between 980 and 1240 or without JavaScript.
   Behaviour lives in /site.js; the language is chosen in each page's <head> before first paint. */

/* Fonts live on this site (12 Oct 2026): no request leaves for Google, so the footer can say no trackers. */
/* The Arabic face cut to the letters Arabic actually uses (the whole basic alphabet, its marks and punctuation): 28 KB instead of 124. */
@font-face { font-family: 'Noto Kufi Arabic'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/noto-kufi-arabic-core.woff2) format('woff2'); unicode-range: U+AB, U+BB, U+60C, U+61B, U+61F, U+621-655, U+660-66C, U+670; }
@font-face { font-family: 'Noto Kufi Arabic'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/noto-kufi-arabic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Noto Kufi Arabic'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/noto-kufi-arabic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/space-grotesk-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/space-grotesk-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --page: #0b0c0f;
  --surface: #141519;
  --surface2: #191b20;
  --surface3: #23252c;
  --glass: rgba(26, 24, 27, 0.68);
  --border: rgba(255, 255, 255, 0.12);
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-soft: rgba(255, 255, 255, 0.05);
  --ink: #ffffff;
  --ink2: #9aa0a8;
  /* The app's ink3 fails WCAG AA for small text on the web; lifted to the nearest passing grey. */
  --ink3: #82878f;
  --red: #e31937;
  --teal: #5fb8a3;
  --latin: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --kufi: "Noto Kufi Arabic", "Space Grotesk", system-ui, sans-serif;
  --gutter: 20px;
  --section: 88px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* header height at the top of the page, and once you scroll (condensed) */
  --head: 70px;
  --head-c: 58px;
}
@media (min-width: 561px) { :root { --gutter: 32px; --section: 112px; --head: 80px; --head-c: 62px; } }
@media (min-width: 980px) { :root { --gutter: 40px; --section: 144px; --head: 96px; --head-c: 70px; } }

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--page); color-scheme: dark; scroll-behavior: smooth; scrollbar-gutter: stable; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* the header is fixed once the script runs: jumps and keyboard focus stop below it */
html.js { scroll-padding-top: calc(var(--head-c) + 18px); }
html.lb-open { overflow: hidden; }

body {
  background: transparent; /* the page colour lives on <html> so the field below can sit between them */
  color: var(--ink2);
  font-family: var(--latin);
  font-size: 16px;
  line-height: 1.7;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The fixed neon field — the app's own (NeonField, "home" geometry): two tall red washes in
   the top corners, a quiet veil over the masthead, a teal anchor at the bottom. Fixed, so it
   stays put behind the page as it scrolls, exactly as it does behind every screen in Yuba. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(30vw 64vh at -6% -8%, rgba(227, 25, 55, 0.13), transparent 70%),
    radial-gradient(30vw 64vh at 106% -8%, rgba(227, 25, 55, 0.10), transparent 70%),
    radial-gradient(52vw 42vh at 50% -18%, rgba(227, 25, 55, 0.07), transparent 70%),
    radial-gradient(60vw 52vh at 50% 112%, rgba(95, 184, 163, 0.075), transparent 70%);
}

/* ── language switch ─────────────────────────────────────────────
   Both languages live in the DOM; html[data-lang] decides which
   shows. No JS = English shows (the safe default). The toggle button
   is the one exception: it always names the OTHER language. */
/* body-scoped: the script also stamps <html lang="ar">, and an unscoped rule hid the
   whole page in Arabic (live from 1 Sep to 12 Oct 2026). */
body [lang="ar"] { display: none !important; }
html[data-lang="ar"] [lang="en"] { display: none !important; }
html[data-lang="ar"] section[lang="ar"],
html[data-lang="ar"] article[lang="ar"],
html[data-lang="ar"] div[lang="ar"] { display: block !important; }
html[data-lang="ar"] span[lang="ar"],
html[data-lang="ar"] a[lang="ar"] { display: inline !important; }
/* the larger view of a screen carries the page language (font, direction, screen readers) */
html[data-lang="ar"] dialog[lang="ar"][open] { display: grid !important; }
html[data-lang="ar"] body { direction: rtl; }

/* Without JavaScript the noscript rule shows both languages: keep each pair apart
   ("Privacy الخصوصية", not "Privacyالخصوصية"), and the 404's two messages too. */
html:not(.js) span[lang="en"]:has(+ span[lang="ar"]) { margin-right: 0.6em; }
html:not(.js) .lost div[lang="ar"] { margin-top: 44px; }

.langbtn [lang="en"] { display: none !important; }
html:not([data-lang="ar"]) .langbtn [lang="ar"] { display: inline !important; }
html[data-lang="ar"] .langbtn [lang="en"] { display: inline !important; }
html[data-lang="ar"] .langbtn [lang="ar"] { display: none !important; }

body [lang="ar"] {
  font-family: var(--kufi);
  direction: rtl;
  text-align: right;
  /* Kufi sits ~1pt below the Latin beside it (the founder's rule). */
  font-size: 0.94em;
  line-height: 2.05;
}

/* ── chrome ── */
.page { max-width: calc(1240px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) 36px; }

/* The header stays within reach: fixed once the script runs (without it, it simply sits at the
   top), clear over the first screen, then a condensed glass bar as soon as you scroll. */
header.site { position: relative; z-index: 50; }
.head-in {
  display: flex; align-items: center; gap: 10px; height: var(--head);
  max-width: calc(1240px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter);
}
.js header.site { position: fixed; top: 0; left: 0; right: 0; }
.js .page { padding-top: var(--head); }
header.site::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(11, 12, 15, 0.88); border-bottom: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  opacity: 0;
}
.scrolled header.site::before, .menu-open header.site::before { opacity: 1; }
.js.scrolled .head-in { height: var(--head-c); }
@media (prefers-reduced-motion: no-preference) {
  .js .head-in { transition: height 0.25s var(--ease); }
  header.site::before { transition: opacity 0.25s; }
}

.lockup { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; direction: ltr; }
/* the wordmark is always left-to-right, so its push-away margin is set by the page side, not its own */
.head-in .lockup { margin-right: auto; }
html[data-lang="ar"] .head-in .lockup { margin-right: 0; margin-left: auto; }
.lockup:hover { text-decoration: none; }
.lockup .latin {
  font-family: var(--latin); font-weight: 700; font-size: 19px;
  letter-spacing: 0.22em; color: var(--ink); line-height: 1;
}
.lockup .dot { width: 6px; height: 6px; background: var(--red); flex: none; box-shadow: 0 0 10px rgba(227, 25, 55, 0.55); }
.lockup .arabic {
  /* The wordmark exception: Kufi steps UP ~1.2× so the two marks read equal. */
  font-family: var(--kufi); font-weight: 700; font-size: 22px;
  color: var(--ink); line-height: 1;
}

/* the section links: in the bar from a tablet up, in the menu on a phone */
.jump { display: none; gap: 6px; margin-inline-end: 14px; }
@media (min-width: 680px) { .jump { display: flex; } }
.jump a {
  display: flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 10px;
  color: var(--ink2); font-size: 14px; text-decoration: none; transition: color 0.2s;
}
.jump a:hover { color: var(--ink); text-decoration: none; }
html[data-lang="ar"] .jump a { font-family: var(--kufi); font-size: 14px; }

.langbtn {
  position: relative; flex: none;
  appearance: none; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border);
  border-radius: 999px; padding: 11px 16px; cursor: pointer;
  color: var(--ink2); font-size: 13px; line-height: 1;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
/* a finger-sized target around the slim pill */
.langbtn::after { content: ""; position: absolute; inset: -5px -4px; }
.langbtn:hover { color: var(--ink); background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.2); }
.langbtn:active, .menubtn:active { background: rgba(255, 255, 255, 0.1); }

/* the phone's menu button (home) and contents button (privacy, terms, support) */
.menubtn { display: none; }
.js .menubtn {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
  appearance: none; border-radius: 50%; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.03);
  color: var(--ink); cursor: pointer; transition: background-color 0.2s, border-color 0.2s;
}
.menubtn:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.2); }
.menubtn i { grid-area: 1 / 1; width: 16px; height: 1.6px; border-radius: 1px; background: currentColor; transition: transform 0.25s var(--ease); }
.menubtn i:first-child { transform: translateY(-3.5px); }
.menubtn i:last-child { transform: translateY(3.5px); }
.menubtn[aria-expanded="true"] i:first-child { transform: rotate(45deg); }
.menubtn[aria-expanded="true"] i:last-child { transform: rotate(-45deg); }
@media (min-width: 680px) { .p-home .menubtn { display: none; } }
@media (min-width: 980px) { .p-doc .menubtn { display: none; } }

/* the home menu drops from the bar */
.menu { display: none; }
.menu-open .menu {
  display: block; position: absolute; top: 100%; left: 0; right: 0;
  max-height: calc(100vh - var(--hb, 70px)); max-height: calc(100dvh - var(--hb, 70px)); overflow-y: auto;
  background: #0e0f12; border-bottom: 1px solid var(--hairline);
  box-shadow: 0 40px 60px -30px rgba(0, 0, 0, 0.9);
}
.menu-in { display: block; max-width: calc(1240px + 2 * var(--gutter)); margin: 0 auto; padding: 4px var(--gutter) 18px; }
.menu-in > a {
  display: flex; align-items: center; min-height: 58px; border-bottom: 1px solid var(--hairline);
  color: var(--ink); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; text-decoration: none;
}
html[data-lang="ar"] .menu-in > a { font-size: 18px; letter-spacing: 0; }
.menu-in > a::after {
  content: ""; width: 7px; height: 7px; margin-inline-start: auto; border: solid var(--ink3);
  border-width: 1.6px 1.6px 0 0; transform: rotate(45deg);
}
html[data-lang="ar"] .menu-in > a::after { transform: rotate(-135deg); }
.menu-pages { display: flex; flex-wrap: wrap; gap: 0 22px; padding-top: 8px; }
.menu-pages a { display: flex; align-items: center; min-height: 44px; color: var(--ink2); font-size: 15px; text-decoration: none; }
.menu-in a:hover { text-decoration: none; color: var(--ink); }

/* skip straight to the page's content (the first stop for a keyboard) */
.skip {
  position: fixed; z-index: 100; top: 10px; inset-inline-start: 10px;
  padding: 12px 18px; border-radius: 10px; background: var(--ink); color: var(--page);
  font-weight: 600; font-size: 15px; line-height: 1.2; transform: translateY(-180%);
}
.skip:focus { transform: none; text-decoration: none; }

/* one visible focus ring for every control; a section you jump to takes focus quietly */
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
/* line-height 1 on both labels or the button (and the header row) jumps
   ~12px on toggle — the Kufi span otherwise inherits 2.05. */
.langbtn [lang="ar"] { font-family: var(--kufi); line-height: 1; }
.langbtn [lang="en"] { font-family: var(--latin); line-height: 1; }

/* ── type ── */
h1, h2, h3 { color: var(--ink); font-weight: 600; }
p { margin: 0 0 14px; }
p strong, li strong { color: var(--ink); font-weight: 600; }
ul, ol { margin: 0 0 16px; padding-inline-start: 22px; }
li { margin-bottom: 8px; }
li::marker { color: var(--ink3); }
ol > li::marker { color: var(--teal); font-variant-numeric: tabular-nums; }

a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Long URLs may break anywhere — 320px insurance. Table cells break only inside a word
   that cannot fit, so a narrow column never splits "membership" in two. */
a { overflow-wrap: anywhere; }
td { overflow-wrap: break-word; }

/* The kicker: the app's red-square label over a section. */
.kicker {
  display: flex; align-items: center; gap: 11px;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.3;
  color: var(--ink2); font-weight: 500; margin: 0 0 18px;
}
.kicker::before { content: ""; width: 6px; height: 6px; background: var(--red); flex: none; }
[lang="ar"] .kicker { letter-spacing: 0; font-size: 13px; line-height: 1.6; }

/* One scale for every section title on the home page. */
.band-title {
  font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.12;
  color: var(--ink); margin: 0; max-width: 20em; text-wrap: balance;
}
.home[lang="ar"] .band-title { letter-spacing: 0; font-size: 25px; line-height: 1.55; }
@media (min-width: 561px) {
  .band-title { font-size: 38px; }
  .home[lang="ar"] .band-title { font-size: 31px; }
}
@media (min-width: 980px) {
  .band-title { font-size: 46px; line-height: 1.06; }
  .home[lang="ar"] .band-title { font-size: 37px; line-height: 1.5; }
}

/* ══ home ══════════════════════════════════════════════════════════ */

/* the first screen */
.hero-grid { padding-top: 28px; }
.home h1 { font-size: 39px; line-height: 1.05; letter-spacing: -0.04em; margin: 0; }
.home[lang="ar"] h1 { font-size: 31px; line-height: 1.5; letter-spacing: 0; }
/* each line balances on its own, so a phone never leaves one word alone; the premise sits
   back in grey and the answer comes forward in white */
.home h1 .l { display: block; text-wrap: balance; }
.home h1 .l:first-child { color: var(--ink2); }
.home .tick {
  display: block; width: 60px; height: 5px; border-radius: 3px; background: var(--red);
  box-shadow: 0 0 18px rgba(227, 25, 55, 0.55); margin: 24px 0 22px;
}
.home[lang="ar"] .tick { margin: 16px 0 18px; }
.home .lede { font-size: 17px; line-height: 1.6; margin: 0; max-width: 31em; text-wrap: pretty; }
.home .lede strong { font-weight: 500; }
.home[lang="ar"] .lede { font-size: 16px; line-height: 2; }

.get { margin-top: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
/* A status, not a button: a teal-tinted badge (the site's buttons are grey glass), no lift,
   no hover, no pointer, so nobody taps it expecting the App Store. */
.soon {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 15px 7px 13px;
  border-radius: 999px; border: 1px solid rgba(95, 184, 163, 0.26); background: rgba(95, 184, 163, 0.07);
  color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.3; cursor: default;
}
.soon i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px rgba(95, 184, 163, 0.85); flex: none; }
.home[lang="ar"] .soon { font-size: 14.5px; line-height: 1.6; padding: 5px 13px 5px 16px; }
@media (max-width: 360px) { .soon { font-size: 14px; padding-inline: 12px 14px; } }
/* Two short lines of facts: the phone it needs, then the two reasons to try it. Each fact keeps
   its words together; the dot before a fact that starts a new line falls in the clipped margin,
   so a narrow phone never shows a line that begins or ends with a lone separator. */
.get-note { font-size: 14px; color: var(--ink2); line-height: 1.65; padding-inline-start: 4px; overflow: hidden; }
.get-note .specs { list-style: none; display: flex; flex-wrap: wrap; margin: 0; margin-inline-start: -15px; padding: 0; }
.get-note .specs li { position: relative; margin: 0; padding-inline-start: 15px; white-space: nowrap; }
.get-note .specs li::before { content: "\B7"; position: absolute; inset-inline-start: 0; width: 15px; text-align: center; color: var(--ink3); }
.get-note .perks { margin-top: 2px; }
.get-note .perks li { color: var(--teal); font-weight: 500; }
.home[lang="ar"] .get-note { font-size: 14px; line-height: 1.95; }

/* the picture: three bank texts become a line in the month */
.hero-art { position: relative; isolation: isolate; margin-top: 52px; }
/* the money glow under the card, as the app draws it under its hero figures */
.hero-art::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -14% 0 -10% 16%;
  background: radial-gradient(closest-side, rgba(95, 184, 163, 0.17), rgba(95, 184, 163, 0.05) 60%, transparent);
}
.home[lang="ar"] .hero-art::before { inset: -14% 16% -10% 0; }
.stage { margin: 0; display: grid; grid-template-columns: 1fr; align-items: center; }
.texts { position: relative; width: 86%; height: 172px; }
.bubble {
  position: absolute; left: 0; right: 0; margin: 0;
  background: #23252c; color: #eceef1; border-radius: 16px 16px 16px 5px;
  padding: 11px 15px; font-size: 13.5px; line-height: 1.45; white-space: pre-line;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 14px 30px rgba(0, 0, 0, 0.5);
}
.bubble .from { display: block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink3); margin-bottom: 4px; }
.bubble.b3 { top: 0; transform: scale(0.88); transform-origin: top left; background: #15161a; color: #5d626b; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4); }
.bubble.b3 .from { color: #4a4e56; }
.bubble.b2 { top: 25px; transform: scale(0.94); transform-origin: top left; background: #1b1d22; color: #80858d; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); }
.bubble.b2 .from { color: #5d626b; }
.bubble.b1 { top: 52px; }
.flow { display: flex; align-items: center; justify-content: center; height: 50px; }
.flow svg { width: 40px; height: 28px; overflow: visible; filter: drop-shadow(0 0 7px rgba(95, 184, 163, 0.5)); transform: rotate(90deg); }

.month {
  position: relative;
  background: rgba(22, 21, 25, 0.78); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 18px;
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 34px 70px -24px rgba(0, 0, 0, 0.8), 0 0 80px rgba(95, 184, 163, 0.10);
  padding: 15px 17px 14px; line-height: 1.45; color: var(--ink2);
  font-family: var(--latin); direction: ltr; text-align: left;
}
.newrow { display: flex; align-items: center; gap: 11px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.newrow .ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; background: rgba(95, 184, 163, 0.16); color: var(--teal); }
.newrow .ico svg { width: 18px; height: 18px; }
.newrow .who { flex: 1; min-width: 0; }
.newrow .name { font-size: 14.5px; color: var(--ink); font-weight: 500; line-height: 1.25; }
.newrow .meta { font-size: 11.5px; color: var(--ink3); }
.newrow .amt { font-size: 16px; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.live { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px rgba(95, 184, 163, 0.8); margin-inline-end: 5px; vertical-align: 1px; }
.month .k { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink2); margin-top: 12px; }
.month .fig { font-size: 36px; font-weight: 600; letter-spacing: -0.04em; color: var(--ink); line-height: 1.1; margin-top: 2px; font-variant-numeric: tabular-nums; text-shadow: 0 0 24px rgba(255, 255, 255, 0.12); }
.month .fig small { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--ink2); margin-inline-start: 5px; text-shadow: none; }
.cats { margin-top: 10px; display: grid; gap: 6px; }
.cat { display: grid; grid-template-columns: 108px 1fr 38px; align-items: center; gap: 9px; font-size: 12px; }
.cat .n { white-space: nowrap; }
.cat .bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.cat .bar i { display: block; height: 100%; border-radius: 3px; transform-origin: left center; }
.cat .v { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.pace { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--ink); display: flex; align-items: center; gap: 7px; text-wrap: pretty; }
.pace b { color: var(--teal); font-weight: 600; }
.pace svg { width: 14px; height: 14px; color: var(--teal); flex: none; }
.stage-note { margin: 12px 0 0; text-align: end; font-size: 12.5px; color: var(--ink3); }

/* Arabic picture: Kufi bubbles right to left; the card keeps the app's own geometry */
.home[lang="ar"] .texts { height: 188px; }
.home[lang="ar"] .bubble { line-height: 1.6; text-align: right; border-radius: 16px 16px 5px 16px; font-family: var(--kufi); font-size: 12.5px; }
.home[lang="ar"] .bubble .from { letter-spacing: 0; font-size: 10.5px; }
.home[lang="ar"] .bubble.b3, .home[lang="ar"] .bubble.b2 { transform-origin: top right; }
.home[lang="ar"] .month { font-family: "Space Grotesk", "Noto Kufi Arabic", sans-serif; font-size: 15px; line-height: 1.5; }
.home[lang="ar"] .month .k { letter-spacing: 0; font-size: 11.5px; text-transform: none; }
.home[lang="ar"] .cat { font-size: 12px; }
.home[lang="ar"] .stage-note { letter-spacing: 0; }

@media (min-width: 561px) {
  .hero-grid { padding-top: 56px; }
  .home h1 { font-size: 54px; }
  .home[lang="ar"] h1 { font-size: 42px; line-height: 1.45; }
  .home .lede { font-size: 19px; }
  .home[lang="ar"] .lede { font-size: 17.5px; }
  .hero-art { max-width: 640px; margin: 64px auto 0; }
}
/* the texts sit beside the month once the card has room for its bars */
@media (min-width: 680px) {
  .stage { grid-template-columns: 200px 46px 1fr; }
  .texts { width: auto; height: 178px; }
  .home[lang="ar"] .texts { height: 190px; }
  .flow { height: auto; }
  .flow svg { transform: none; }
  .home[lang="ar"] .flow svg { transform: scaleX(-1); }
}

/* computer: headline and picture share the first screen */
@media (min-width: 1080px) {
  .hero-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) 600px; gap: 64px; align-items: center;
    min-height: min(calc(100vh - 110px), 660px); padding: 8px 0 24px;
  }
  .home h1 { font-size: clamp(50px, 4.3vw, 64px); line-height: 1.03; }
  .home[lang="ar"] h1 { font-size: clamp(42px, 3.6vw, 52px); line-height: 1.42; }
  .home .tick { width: 72px; margin: 30px 0 28px; }
  .home[lang="ar"] .tick { margin: 20px 0 24px; }
  .home .lede { font-size: 20px; }
  .home[lang="ar"] .lede { font-size: 18px; }
  .get { margin-top: 38px; }
  .soon { font-size: 15.5px; }
  .hero-art { margin-top: 0; max-width: none; }
  .stage { grid-template-columns: 202px 40px 1fr; }
  .bubble { font-size: 13px; }
  .hero-art .pace { font-size: 12.4px; }
}

/* sections */
.band { margin-top: var(--section); }
.band.how { margin-top: calc(var(--section) * 0.7); }
.band-head { margin-bottom: 40px; }
@media (min-width: 980px) { .band-head { margin-bottom: 56px; } }

/* three steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; }
.steps li { position: relative; margin: 0; display: grid; grid-template-columns: 48px 1fr; column-gap: 20px; }
.steps .chip {
  grid-row: 1 / span 3; width: 48px; height: 48px; border-radius: 13px;
  display: grid; place-items: center; color: var(--teal);
  background: var(--glass); border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 26px rgba(95, 184, 163, 0.10);
}
.steps .chip svg { width: 22px; height: 22px; }
/* the same dashed teal line as the picture's arrow, joining the steps */
.steps li:not(:last-child)::after {
  content: ""; position: absolute; inset-inline-start: 23px; top: 58px; bottom: -26px; width: 2px;
  background: repeating-linear-gradient(180deg, rgba(95, 184, 163, 0.45) 0 3px, transparent 3px 8px);
}
.steps .num { font-size: 12px; font-weight: 500; color: var(--teal); letter-spacing: 0.14em; font-variant-numeric: tabular-nums; line-height: 1.4; padding-top: 2px; }
.steps h3 { font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; line-height: 1.3; margin: 4px 0 6px; }
.steps p { font-size: 15.5px; line-height: 1.6; margin: 0; max-width: 24em; text-wrap: pretty; }
.home[lang="ar"] .steps h3 { letter-spacing: 0; line-height: 1.6; font-size: 18.5px; margin-top: 0; }
.home[lang="ar"] .steps p { font-size: 14.5px; line-height: 1.95; }
@media (min-width: 700px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .steps li { display: block; }
  .steps .chip { margin-bottom: 26px; }
  .steps li:not(:last-child)::after {
    inset-inline-start: 64px; inset-inline-end: -24px; top: 23px; bottom: auto; width: auto; height: 2px;
    background: repeating-linear-gradient(90deg, rgba(95, 184, 163, 0.45) 0 3px, transparent 3px 8px);
  }
}
@media (min-width: 980px) {
  .steps { gap: 56px; }
  .steps li:not(:last-child)::after { inset-inline-end: -32px; }
  .steps h3 { font-size: 23px; }
  .home[lang="ar"] .steps h3 { font-size: 21px; }
  .steps p { font-size: 16.5px; }
  .home[lang="ar"] .steps p { font-size: 15.5px; }
}

/* the real app, in a phone's own frame. The frame is drawn with shadows, so it takes
   no layout room and the screenshot itself is untouched. */
.gallery { position: relative; isolation: isolate; }
.gallery::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 58%; width: min(1100px, 100%); height: 760px; transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side, rgba(95, 184, 163, 0.13), rgba(95, 184, 163, 0.04) 55%, transparent);
}
.shots {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin-inline: calc(-1 * var(--gutter)); padding: 14px var(--gutter) 34px; scroll-padding-inline: var(--gutter);
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}
/* each screen is a link to its own image (without the script) or to a larger view (with it) */
.shots > .shot { display: block; flex: 0 0 clamp(236px, calc((100% - 44px) / 2.6), 290px); scroll-snap-align: start; color: inherit; text-decoration: none; border-radius: 34px; }
.shots > .shot:hover { text-decoration: none; }
.js .shots > .shot { cursor: zoom-in; }
.shots > .shot:focus-visible { outline-offset: -2px; }
.shots figure { margin: 0; }
@media (max-width: 560px) { .shots { gap: 16px; } .shots > .shot { flex-basis: min(68vw, 280px); } }
.shots img {
  display: block; width: 100%; height: auto; border-radius: 30px; background: #000;
  box-shadow:
    0 0 0 7px #050506,
    0 0 0 8px rgba(255, 255, 255, 0.16),
    0 0 0 9px rgba(0, 0, 0, 0.6),
    0 34px 60px -14px rgba(0, 0, 0, 0.85);
}
.shots figure, .shots figcaption { padding-inline: 9px; }
.shots figure { padding-top: 9px; }
.shots figcaption { margin-top: 24px; font-size: 14px; color: var(--ink2); text-align: center; line-height: 1.4; text-wrap: balance; }
.home[lang="ar"] .shots figcaption { font-size: 13.5px; line-height: 1.8; text-align: center; }
/* a small "enlarge" mark after each caption, once the larger view exists */
.js .shots figcaption::after {
  content: ""; display: inline-block; width: 13px; height: 13px; margin-inline-start: 8px; vertical-align: -1px;
  background: var(--ink3); transition: background-color 0.2s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.shots > .shot:hover figcaption { color: var(--ink); }
.shots > .shot:hover figcaption::after { background: var(--teal); }

/* buttons that move the row, beside the title wherever the row scrolls */
.shot-nav { display: none; gap: 10px; }
@media (min-width: 561px) {
  .gallery .band-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; }
  .gallery .band-head > * { grid-column: 1; }
  .js .gallery.scrolls .shot-nav { display: flex; grid-column: 2; grid-row: 1 / span 2; align-self: end; }
}
.shot-nav button {
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0; appearance: none; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--border); background: var(--glass); color: var(--ink);
  transition: background-color 0.2s, border-color 0.2s, opacity 0.2s;
}
.shot-nav button:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); }
.shot-nav button[aria-disabled="true"] { opacity: 0.35; cursor: default; background: var(--glass); border-color: var(--border); }
.shot-nav svg { width: 18px; height: 18px; }
[dir="rtl"] .shot-nav svg { transform: scaleX(-1); }

/* a computer gets all five in a gentle arc, wider than the text column */
@media (min-width: 1180px) {
  .shots {
    --w: min(1320px, calc(100vw - 112px));
    width: var(--w); margin-inline: calc((100% - var(--w)) / 2);
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 34px;
    overflow: visible; padding: 14px 0 0; align-items: start;
  }
  .shots img { border-radius: 34px; }
  .shots > .shot:nth-child(1), .shots > .shot:nth-child(5) { margin-top: 64px; }
  .shots > .shot:nth-child(2), .shots > .shot:nth-child(4) { margin-top: 24px; }
}

/* the larger view: one screen at a time, swipe or arrow keys, Escape or the cross to close */
.lb {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; color: var(--ink); overflow: hidden;
  display: none; grid-template-rows: auto minmax(0, 1fr);
  --lb-h: min(calc(100vh - 150px), calc((100vw - 40px) * 2.1733));
}
@supports (height: 100dvh) { .lb { --lb-h: min(calc(100dvh - 150px), calc((100vw - 40px) * 2.1733)); } }
.lb[open] { display: grid; }
.lb::backdrop { background: rgba(6, 7, 9, 0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lb-top { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 6px 20px; }
.lb[dir="rtl"] .lb-top { padding: 8px 20px 6px 12px; }
.lb-count { font-size: 13px; color: var(--ink2); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; direction: ltr; unicode-bidi: isolate; }
.lb-fig { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; touch-action: pan-y pinch-zoom; }
.lb-fig img {
  display: block; height: var(--lb-h); width: auto; aspect-ratio: 600 / 1304; border-radius: 30px; background: #000;
  box-shadow: 0 0 0 7px #050506, 0 0 0 8px rgba(255, 255, 255, 0.16), 0 40px 80px -20px rgba(0, 0, 0, 0.9);
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
/* phone: the caption sits between the two arrows on the bottom line */
.lb-fig figcaption {
  height: 72px; display: flex; align-items: center; justify-content: center; padding: 6px 76px 0;
  font-size: 14px; line-height: 1.4; color: var(--ink2); text-align: center;
}
.lb[lang="ar"] .lb-fig figcaption { font-family: var(--kufi); font-size: 13.5px; }
.lb button {
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0; appearance: none; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--border); background: rgba(26, 24, 27, 0.8); color: var(--ink);
  transition: background-color 0.2s, opacity 0.2s;
}
.lb button:hover { background: rgba(255, 255, 255, 0.1); }
.lb button[aria-disabled="true"] { opacity: 0.3; cursor: default; background: rgba(26, 24, 27, 0.8); }
.lb button svg { width: 20px; height: 20px; }
.lb-prev, .lb-next { position: absolute; bottom: max(14px, calc((100% - var(--lb-h) - 62px - 72px) / 2 + 13px)); }
.lb-prev { left: 20px; }
.lb-next { right: 20px; }
.lb-next svg, .lb[dir="rtl"] .lb-prev svg { transform: scaleX(-1); }
.lb[dir="rtl"] .lb-next svg { transform: none; }
.lb[dir="rtl"] .lb-prev { left: auto; right: 20px; }
.lb[dir="rtl"] .lb-next { right: auto; left: 20px; }
/* wider screens: the arrows stand either side of the screen */
@media (min-width: 700px) and (min-aspect-ratio: 4 / 5) {
  .lb-fig figcaption { height: 56px; padding: 4px 0 0; }
  .lb-prev, .lb-next { bottom: auto; top: 50%; margin-top: -23px; }
  .lb-prev { left: max(24px, calc(50% - 330px)); }
  .lb-next { right: max(24px, calc(50% - 330px)); }
  .lb[dir="rtl"] .lb-prev { left: auto; right: max(24px, calc(50% - 330px)); }
  .lb[dir="rtl"] .lb-next { right: auto; left: max(24px, calc(50% - 330px)); }
}
@media (prefers-reduced-motion: no-preference) {
  .lb[open] { animation: yb-fade 0.2s ease-out; }
  .lb[open] .lb-fig img { animation: yb-zoom 0.28s var(--ease); }
}
@keyframes yb-zoom { from { opacity: 0; scale: 0.94; } }

/* the promise */
.promise {
  position: relative; isolation: isolate; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.promise::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 0; width: min(640px, 100%); height: 420px; transform: translate(-50%, -30%);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.045), transparent);
}
.promise .lock {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 1px solid var(--border); background: var(--glass); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 12px rgba(255, 255, 255, 0.025), 0 0 0 26px rgba(255, 255, 255, 0.014);
  margin-bottom: 40px;
}
.promise .lock svg { width: 26px; height: 26px; }
.promise h2 { font-size: 30px; letter-spacing: -0.03em; line-height: 1.12; margin: 0 auto; max-width: 14em; text-wrap: balance; }
.promise p { font-size: 16.5px; line-height: 1.7; margin: 18px auto 0; max-width: 34em; text-wrap: pretty; }
.promise p a { white-space: nowrap; }
.home[lang="ar"] .promise, .home[lang="ar"] .promise p { text-align: center; }
.home[lang="ar"] .promise h2 { letter-spacing: 0; line-height: 1.55; font-size: 25px; }
.home[lang="ar"] .promise p { font-size: 15px; line-height: 2; }
@media (min-width: 561px) {
  .promise h2 { font-size: 40px; }
  .home[lang="ar"] .promise h2 { font-size: 33px; }
  .promise p { font-size: 18px; }
  .home[lang="ar"] .promise p { font-size: 16.5px; }
}
@media (min-width: 980px) {
  .promise .lock { width: 76px; height: 76px; margin-bottom: 48px; }
  .promise .lock svg { width: 30px; height: 30px; }
  .promise h2 { font-size: 52px; line-height: 1.05; }
  .home[lang="ar"] .promise h2 { font-size: 42px; line-height: 1.45; }
  .promise p { font-size: 19px; }
  .home[lang="ar"] .promise p { font-size: 17.5px; }
}

/* price */
.price-grid { display: grid; gap: 40px; align-items: start; }
.free p { margin: 16px 0 0; font-size: 16px; line-height: 1.7; max-width: 30em; text-wrap: pretty; }
.free .kicker + .band-title { margin-top: 0; }
.home[lang="ar"] .free p { font-size: 15px; line-height: 2; }
.plans { display: grid; gap: 14px; }
.plan {
  display: flex; flex-direction: column; gap: 4px; position: relative;
  background: var(--glass); border: 1px solid var(--border); border-radius: 18px; padding: 22px 22px 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.plan.best {
  border-color: rgba(95, 184, 163, 0.42); background: rgba(17, 32, 29, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 70px -26px rgba(95, 184, 163, 0.45);
}
.plan-name { color: var(--ink2); font-weight: 500; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.4; }
.plan.best .plan-name { color: var(--teal); }
.home[lang="ar"] .plan-name { letter-spacing: 0; font-size: 14px; line-height: 1.8; }
.plan-price {
  color: var(--ink); font-weight: 600; font-size: 34px; letter-spacing: -0.035em; line-height: 1.15;
  font-variant-numeric: tabular-nums; font-family: var(--latin); margin-top: 10px;
}
.home[lang="ar"] .plan-price { font-family: "Space Grotesk", "Noto Kufi Arabic", sans-serif; }
.plan-price .cur { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--ink2); }
.plan-price small { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--ink3); }
.plan-sub { font-size: 14px; color: var(--ink3); line-height: 1.55; margin-top: 8px; text-wrap: pretty; }
.plan.best .plan-sub { color: var(--teal); }
.home[lang="ar"] .plan-sub { font-size: 13.5px; line-height: 1.9; }
.plan-note { margin: 4px 0 0; font-size: 14px; color: var(--ink3); text-wrap: pretty; }
.home[lang="ar"] .plan-note { line-height: 1.9; font-size: 13.5px; }
@media (min-width: 600px) {
  .plans { grid-template-columns: 1fr 1fr; }
  .plan-note { grid-column: 1 / -1; }
}
/* "/ month" and "/ year" stay with their figure */
.plan-price small { white-space: nowrap; }
@media (min-width: 980px) {
  .plan { padding: 28px 28px 30px; min-height: 220px; }
  .plan-price { font-size: 42px; margin-top: 22px; }
  .plan-price .cur { font-size: 17px; }
  .free p { font-size: 17px; }
  .home[lang="ar"] .free p { font-size: 16px; }
}
/* the words beside the plans only once each plan has room for "SAR 179.99 / year" on one line
   (between 980 and 1240 the figure used to break as "179.99 /" over "year") */
@media (min-width: 1240px) {
  .price-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 80px; }
  .plans { margin-top: 38px; }
}

/* questions */
.qa { display: grid; gap: 30px; align-items: start; }
.faq { border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 0; color: var(--ink); font-size: 17px; font-weight: 500; line-height: 1.4;
  display: flex; justify-content: space-between; gap: 22px; align-items: center; transition: color 0.2s;
  text-wrap: balance; /* a question that wraps never leaves its last word alone */
}
.faq summary::-webkit-details-marker { display: none; }
/* a drawn plus in a ring; open turns it into a close mark */
.faq summary::after {
  content: ""; width: 30px; height: 30px; flex: none; border-radius: 50%; border: 1px solid var(--border);
  color: var(--ink2);
  background:
    linear-gradient(currentColor, currentColor) center / 11px 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.6px 11px no-repeat;
  transition: transform 0.3s var(--ease), border-color 0.2s, color 0.2s, background-color 0.2s;
}
.faq summary:hover::after { border-color: rgba(255, 255, 255, 0.24); color: var(--ink); }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--ink); background-color: rgba(255, 255, 255, 0.05); }
.faq summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 4px; }
.faq summary:active { color: var(--ink2); }
.faq details p { margin: -2px 0 24px; font-size: 16px; line-height: 1.7; max-width: 40em; text-wrap: pretty; }
@media (min-width: 561px) { .faq details p { padding-inline-end: 52px; } }
.home[lang="ar"] .faq summary { font-size: 16px; line-height: 1.8; }
.home[lang="ar"] .faq details p { font-size: 15px; line-height: 2; }
@media (min-width: 980px) {
  .qa { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 80px; }
  .qa .band-title { position: sticky; top: calc(var(--head-c) + 32px); }
  .faq summary { font-size: 19px; padding: 24px 0; }
  .home[lang="ar"] .faq summary { font-size: 17px; }
  .faq details p { font-size: 16.5px; }
  .home[lang="ar"] .faq details p { font-size: 15.5px; }
}

/* the three links */
.doors { margin-top: var(--section); display: grid; gap: 12px; }
.door {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  background: rgba(255, 255, 255, 0.025); border: 1px solid var(--hairline); border-radius: 18px;
  padding: 22px 64px 22px 24px; color: var(--ink); text-decoration: none;
  transition: background-color 0.25s, border-color 0.25s;
}
html[data-lang="ar"] .door { padding: 22px 24px 22px 64px; }
.door:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--border); text-decoration: none; }
.door:active { background: rgba(255, 255, 255, 0.08); }
.door .t { font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; }
html[data-lang="ar"] .door .t { letter-spacing: 0; font-size: 17px; line-height: 1.8; }
.door .sub { font-size: 14px; color: var(--ink3); line-height: 1.5; }
html[data-lang="ar"] .door .sub { line-height: 1.8; }
.door .mark {
  position: absolute; top: 50%; inset-inline-end: 22px; margin-top: -16px;
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--hairline); color: var(--ink2); transition: transform 0.25s var(--ease), color 0.2s, border-color 0.2s;
}
.door .mark svg { width: 15px; height: 15px; }
html[data-lang="ar"] .door .mark svg { transform: scaleX(-1); }
.door:hover .mark { color: var(--ink); border-color: var(--border); transform: translateX(3px); }
html[data-lang="ar"] .door:hover .mark { transform: translateX(-3px); }
/* side by side only where each tile has room for its line (a tablet stacks them; the address never breaks) */
@media (min-width: 980px) { .doors { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

/* ── footer ── */
footer.site {
  margin-top: 96px; padding-top: 18px; border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: 0 22px; align-items: center;
  font-size: 13px; color: var(--ink3); line-height: 1.6;
}
/* every footer link is a full finger-height target */
footer.site a { display: inline-flex; align-items: center; min-height: 44px; }
footer.site .lockup.small { margin-inline-end: 6px; gap: 9px; }
footer.site .lockup.small .latin { font-size: 13px; }
footer.site .lockup.small .arabic { font-size: 15px; }
footer.site .lockup.small .dot { width: 5px; height: 5px; box-shadow: none; }
footer.site a { color: var(--ink3); transition: color 0.2s; }
footer.site a:hover { color: var(--ink); text-decoration: none; }
footer.site .quiet { color: var(--ink3); }
footer.site .spacer { flex: 1; }
@media (max-width: 760px) {
  footer.site { margin-top: 72px; }
  footer.site .spacer { flex-basis: 100%; height: 0; }
}

/* ══ the reading pages: privacy, terms, support ════════════════════ */
.doc-body { max-width: 740px; font-size: 16px; }
.doc-body h1 { font-size: 34px; letter-spacing: -0.035em; line-height: 1.1; margin: 22px 0 0; }
.doc-body h1::after {
  content: ""; display: block; width: 52px; height: 4px; border-radius: 2px; background: var(--red);
  box-shadow: 0 0 14px rgba(227, 25, 55, 0.5); margin: 22px 0 20px;
}
[lang="ar"] .doc-body h1 { letter-spacing: 0; line-height: 1.5; font-size: 29px; }
[lang="ar"] .doc-body h1::after { margin-top: 14px; }
.date { font-size: 13px; color: var(--ink3); margin-bottom: 34px; }
[lang="ar"] .date { font-size: 12.5px; }
.doc-body h2 {
  font-size: 20px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3;
  margin: 52px 0 14px; padding-top: 30px; border-top: 1px solid var(--hairline);
}
[lang="ar"] .doc-body h2 { letter-spacing: 0; font-size: 18.5px; line-height: 1.7; }
.doc-body p, .doc-body li { text-wrap: pretty; }
[lang="ar"] .doc-body table { font-size: 13.5px; }

/* the facts table (the app's privacy screen, verbatim anatomy) */
.facts {
  width: 100%; border-collapse: separate; border-spacing: 0; margin: 22px 0 28px;
  background: var(--glass); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden; font-size: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.facts td { padding: 13px 18px; border-top: 1px solid var(--hairline-soft); vertical-align: top; }
.facts tr:first-child td { border-top: none; }
.facts td:first-child { color: var(--ink2); }
.facts td:last-child { color: var(--ink); text-align: end; }
.facts td:first-child { width: 46%; }
/* on a phone each fact stacks: the question over its answer */
@media (max-width: 560px) {
  .facts, .facts tbody, .facts tr, .facts td { display: block; }
  .facts tr { padding: 13px 16px; border-top: 1px solid var(--hairline-soft); }
  .facts tr:first-child { border-top: none; }
  .facts td { padding: 0; border: none; }
  .facts td:first-child { font-size: 13px; width: auto; }
  .facts td:last-child { text-align: start; margin-top: 2px; }
}

table:not(.facts) { width: 100%; border-collapse: collapse; margin: 20px 0 26px; font-size: 14px; }
table:not(.facts) th {
  text-align: start; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink3); font-weight: 500; padding: 0 14px 10px;
}
[lang="ar"] table:not(.facts) th { letter-spacing: 0; font-size: 12.5px; }
table:not(.facts) td { padding: 12px 14px; border-top: 1px solid var(--hairline); vertical-align: top; }
table:not(.facts) tr > :first-child { padding-inline-start: 0; }
table:not(.facts) tr > :last-child { padding-inline-end: 0; }
table:not(.facts) td:first-child { color: var(--ink); }
/* on a phone each row becomes one short card: what it is, then the rest beneath */
@media (max-width: 560px) {
  table:not(.facts), table:not(.facts) tbody, table:not(.facts) tr, table:not(.facts) td { display: block; }
  table:not(.facts) tr:has(th) { display: none; }
  table:not(.facts) tr { padding: 13px 0; border-top: 1px solid var(--hairline); }
  table:not(.facts) td { padding: 0; border: none; }
  table:not(.facts) td + td { margin-top: 3px; color: var(--ink2); }
}

@media (min-width: 561px) {
  .doc-body h1 { font-size: 44px; }
  [lang="ar"] .doc-body h1 { font-size: 36px; }
}
@media (min-width: 980px) {
  .lockup { gap: 15px; }
  .lockup .latin { font-size: 27px; }
  .lockup .dot { width: 8px; height: 8px; }
  .lockup .arabic { font-size: 32px; }

  .doc-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 88px; align-items: start; }
  .doc-body { font-size: 17px; line-height: 1.75; }
  [lang="ar"] .doc-body { font-size: 16px; line-height: 2.05; }
  .doc-body h1 { font-size: 54px; margin-top: 30px; }
  [lang="ar"] .doc-body h1 { font-size: 44px; }
  .doc-body h2 { font-size: 23px; margin-top: 60px; }
  [lang="ar"] .doc-body h2 { font-size: 20.5px; }
}

/* The contents of a policy: a sticky column beside the text on a computer; on a tablet or
   phone the same list drops from the header's contents button, the section you are in marked. */
.toc-title { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink3); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; line-height: 1.4; }
.toc-title::before { content: ""; width: 5px; height: 5px; background: var(--red); flex: none; }
[lang="ar"] .toc-title { letter-spacing: 0; font-size: 13px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-inline-start: 1px solid var(--hairline); }
.toc li { margin: 0; }
.toc ol a {
  display: block; padding: 7px 0; padding-inline-start: 16px; margin-inline-start: -1px; border-inline-start: 2px solid transparent;
  color: var(--ink2); font-size: 13.5px; line-height: 1.45; text-decoration: none; transition: color 0.2s, border-color 0.2s;
}
[lang="ar"] .toc ol a { padding-block: 6px; font-size: 13.5px; line-height: 1.8; }
.toc ol a:hover { color: var(--ink); text-decoration: none; }
.toc ol a.on { color: var(--ink); border-inline-start-color: var(--red); }
.toc-home { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; font-size: 13px; color: var(--ink3); }
.toc-home:hover { color: var(--ink); text-decoration: none; }
@media (min-width: 980px) {
  .toc {
    position: sticky; top: calc(var(--head-c) + 16px); padding-top: 44px;
    max-height: calc(100vh - var(--head-c) - 32px); overflow-y: auto; scrollbar-width: none;
  }
  .toc ol a { padding-block: 9px; }
  [lang="ar"] .toc ol a { padding-block: 8px; }
}
@media (max-width: 979px) {
  .toc { display: none; }
  .menu-open .toc {
    display: block; position: fixed; z-index: 49; left: 0; right: 0; top: var(--hb, 58px);
    max-height: calc(100vh - var(--hb, 58px)); max-height: calc(100dvh - var(--hb, 58px)); overflow-y: auto;
    padding: 20px var(--gutter) 14px; background: #0e0f12;
    border-bottom: 1px solid var(--hairline); box-shadow: 0 40px 60px -30px rgba(0, 0, 0, 0.9);
  }
  .menu-open .toc > * { max-width: 740px; }
  .toc ol a { display: flex; align-items: center; min-height: 44px; padding-block: 6px; font-size: 15.5px; }
  [lang="ar"] .toc ol a { font-size: 15px; padding-block: 4px; }
}

/* ── 404 ── */
.lost { min-height: min(62vh, 560px); display: flex; flex-direction: column; justify-content: center; padding: 48px 0; }
.lost-code {
  font-size: 96px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; color: transparent;
  -webkit-text-stroke: 1.2px rgba(255, 255, 255, 0.22); margin: 0 0 26px; font-variant-numeric: tabular-nums;
}
.lost h1 { font-size: 34px; letter-spacing: -0.035em; line-height: 1.1; margin: 0; text-wrap: balance; }
.lost .tick { display: block; width: 52px; height: 4px; border-radius: 2px; background: var(--red); box-shadow: 0 0 14px rgba(227, 25, 55, 0.5); margin: 24px 0 28px; }
.lost .back {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 999px;
  border: 1px solid var(--border); background: rgba(255, 255, 255, 0.035); color: var(--ink); font-weight: 500;
  transition: background-color 0.2s, border-color 0.2s;
}
.lost .back:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.2); text-decoration: none; }
.lost .back svg { width: 15px; height: 15px; color: var(--teal); }
.lost [lang="ar"] h1 { font-size: 30px; letter-spacing: 0; line-height: 1.5; }
.lost [lang="ar"] .tick { margin: 18px 0 26px; }
.lost [lang="ar"] .back svg { transform: scaleX(-1); }
@media (min-width: 561px) {
  .lost-code { font-size: 150px; }
  .lost h1 { font-size: 52px; }
  .lost [lang="ar"] h1 { font-size: 44px; line-height: 1.45; }
}


/* ── motion: quiet, and only for people who have not asked for less. Every animation ends
   on the element's normal state, so nothing depends on it to be seen. ── */
@media (prefers-reduced-motion: no-preference) {
  /* the first screen: the texts arrive, the line flows, the month fills */
  .bubble.b3 { animation: yb-drop 0.6s var(--ease) 0.1s both; }
  .bubble.b2 { animation: yb-drop 0.6s var(--ease) 0.25s both; }
  .bubble.b1 { animation: yb-drop 0.6s var(--ease) 0.4s both; }
  .flow svg path:first-child { animation: yb-flow 1.4s linear infinite; }
  .newrow { animation: yb-fade 0.5s var(--ease) 0.75s both; }
  .newrow .ico { animation: yb-ping 1.6s var(--ease) 0.95s both; }
  .cat .bar i { animation: yb-grow 0.9s var(--ease) both; }
  .cat:nth-child(1) .bar i { animation-delay: 0.8s; }
  .cat:nth-child(2) .bar i { animation-delay: 0.86s; }
  .cat:nth-child(3) .bar i { animation-delay: 0.92s; }
  .cat:nth-child(4) .bar i { animation-delay: 0.98s; }
  .cat:nth-child(5) .bar i { animation-delay: 1.04s; }
  .soon i::after {
    content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(95, 184, 163, 0.7);
    animation: yb-pulse 2.6s ease-out 1.6s infinite both;
  }

  /* Nothing further down animates on scroll: a scroll-tied reveal leaves sections invisible
     in a full-page screenshot (Safari's included) and in anything that never scrolls. */
  .shots img { transition: translate 0.4s var(--ease); }
  @media (hover: hover) { .shots > .shot:hover img { translate: 0 -6px; } }
}
@keyframes yb-drop { from { opacity: 0; translate: 0 -16px; } }
@keyframes yb-fade { from { opacity: 0; } }
@keyframes yb-flow { to { stroke-dashoffset: -14; } }
@keyframes yb-grow { from { scale: 0 1; } }
@keyframes yb-ping { 0% { box-shadow: 0 0 0 0 rgba(95, 184, 163, 0.45); } 70%, 100% { box-shadow: 0 0 0 12px rgba(95, 184, 163, 0); } }
@keyframes yb-pulse { 0% { opacity: 0.9; scale: 0.6; } 70%, 100% { opacity: 0; scale: 1.6; } }