/* Nimra — nimra.app
   The app's look on the web (2026-10, the iPhone-like redesign): a warm
   off-white ground, white cards with soft shadows and large rounded corners,
   gold pills for actions, the system font (SF Pro on Apple devices, Inter
   elsewhere), navy for the logo and the dark bands, and the line-art cast
   (brand/art in the app repo) on its sand discs. */

:root {
  --paper: #f5f2ec;
  --surface: #ffffff;
  --sand: #e9e1d0;
  --line: #ece5d8;
  --line-2: #e2d9c8;
  --ink: #17202a;
  --ink-2: #4a4f57;
  --grey: #8a847a;
  --navy: #0a3055;
  --night: #071e36;
  --night-2: #0d2a49;
  --night-line: #1f3d5e;
  --star: #f7f2e8;
  --haze: #a3b4c8;
  --gold: #b0894f;
  --gold-bright: #c9a24b;
  --gold-ink: #8c6a34;
  --gold-soft: #f3ead9;
  --ok: #1f9c5a;

  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, "IBM Plex Sans Arabic", sans-serif;
  --arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, sans-serif;
  /* Former mono slots (labels, numbers) now use the display face. */
  --mono: var(--display);

  --s-1: clamp(.82rem, .8rem + .1vw, .9rem);
  --s0: clamp(1rem, .97rem + .15vw, 1.08rem);
  --s1: clamp(1.15rem, 1.07rem + .4vw, 1.4rem);
  --s2: clamp(1.45rem, 1.25rem + .9vw, 2rem);
  --s3: clamp(1.9rem, 1.5rem + 1.9vw, 3.1rem);
  --s4: clamp(2.4rem, 1.5rem + 3.6vw, 4.7rem);

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1220px;
  --head: 64px;
  --r: 26px;
  --r-sm: 16px;
  --pill: 999px;
  --shadow: 0 1px 2px rgba(107, 84, 50, .05), 0 14px 36px rgba(107, 84, 50, .09);
  --shadow-lift: 0 2px 4px rgba(107, 84, 50, .06), 0 22px 48px rgba(107, 84, 50, .13);
  --shadow-gold: var(--shadow);
  --night-shadow: 0 16px 40px rgba(2, 12, 24, .35);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head) + 16px); overflow-x: clip; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--s0)/1.6 var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-optical-sizing: auto; overflow-x: clip;
}
img, canvas, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.08; letter-spacing: -.028em; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--display); font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; background: var(--gold); color: #fff; padding: 8px 14px; z-index: 100; border-radius: var(--pill); }
.skip:focus { top: 8px; }

/* Small caps label with a gold tick, as on the app's art cards ("— CREDIT") */
.tag, .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 .74rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink);
}
.tag::before, .eyebrow::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: var(--gold); flex: none; }
.on-night .tag, .on-night .eyebrow { color: var(--gold-bright); }

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--gold); color: #fff; text-decoration: none; cursor: pointer;
  padding: 15px 26px; border: 0; border-radius: var(--pill);
  font: 600 1rem/1 var(--display); letter-spacing: -.01em;
  box-shadow: 0 8px 20px rgba(176, 137, 79, .28);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.btn:hover { background: #a37c45; box-shadow: 0 10px 26px rgba(176, 137, 79, .34); }
.btn:active { transform: scale(.98); }
.btn.ghost { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.btn.ghost:hover { background: #fff; box-shadow: var(--shadow-lift); }
.btn.small { padding: 11px 18px; font-size: .92rem; }
.link-arrow { font: 600 .98rem var(--display); color: var(--gold-ink); text-decoration: none; }
.link-arrow:hover { color: var(--ink); }
.on-night .btn { box-shadow: 0 8px 22px rgba(0, 0, 0, .25); }
.on-night .link-arrow { color: var(--gold-bright); }

.store-badges { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.store-badges .badge { display: block; line-height: 0; border-radius: 10px; transition: transform .15s, opacity .15s; }
.store-badges .badge:hover { transform: translateY(-1px); opacity: .92; }
.store-badges img { height: 54px; width: auto; }
button.badge { position: relative; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.badge .soon {
  position: absolute; top: -10px; inset-inline-end: -10px; padding: 5px 9px;
  background: var(--gold); color: #fff; border-radius: var(--pill); box-shadow: 0 4px 10px rgba(176, 137, 79, .3);
  font: 600 .64rem/1 var(--display); letter-spacing: .02em; white-space: nowrap;
}

/* ── Waitlist pop-up ─────────────────────────────────── */
/* The app on the night side (a call ringing, a voicemail written out), the form on the
   white side. A white card with only a form gave nobody a reason to leave an email. */
dialog.waitlist {
  width: min(860px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; margin: auto; overflow: hidden auto;
  background: var(--surface); color: var(--ink); border: 0; border-radius: 28px;
  box-shadow: 0 30px 80px rgba(7, 30, 54, .32);
}
dialog.waitlist::backdrop { background: color-mix(in srgb, var(--night) 45%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* minmax(0, …): an auto column grew 19px past the padding in Arabic on phones */
dialog.waitlist[open] { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); animation: wl-in .45s cubic-bezier(.2, .8, .2, 1); }
dialog.waitlist[open]::backdrop { animation: wl-fade .3s ease-out; }
@keyframes wl-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes wl-fade { from { opacity: 0; } }
/* Opened by itself, the pop-up takes focus as a whole: a ring on the X looked like a mistake. */
dialog.waitlist:focus { outline: none; }
.wl-close {
  position: absolute; z-index: 5; top: 14px; inset-inline-end: 14px; width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--paper); border: 0; border-radius: 50%; font: 400 1.3rem/1 var(--text); color: var(--ink-2); cursor: pointer;
}
.wl-close:hover { color: var(--ink); background: var(--line); }

.wl-art { position: relative; isolation: isolate; overflow: hidden; min-height: 480px; background: var(--night); }
.wl-mark { position: absolute; top: 26px; inset-inline-start: 28px; height: 30px; width: auto; }
.wl-disc { position: absolute; width: 330px; aspect-ratio: 1; left: 50%; top: 66%; translate: -50% -50%; border-radius: 50%; background: var(--night-2); }
.wl-disc::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--gold-bright) 55%, transparent); animation: spin 60s linear infinite; }
.wl-phone {
  position: absolute; width: 214px; left: 50%; top: 182px; translate: -50% 0; padding: 7px; border-radius: 38px;
  background: #0b1521; box-shadow: 0 26px 60px rgba(0, 6, 16, .45), inset 0 0 0 1.5px rgba(255, 255, 255, .1);
}
.wl-phone img { width: 100%; border-radius: 31px; background: #f3efe6; }
/* Notifications on glass, as on the home page's hero */
.wl-call, .wl-vm {
  position: absolute; z-index: 2; display: grid; gap: 2px; min-width: 0; font-family: var(--display); color: var(--ink);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 20px; box-shadow: 0 16px 36px rgba(0, 6, 16, .38);
  opacity: 0; transform: translateY(-12px) scale(.96); animation: pop .5s cubic-bezier(.2, .8, .2, 1.2) forwards, bob 6s ease-in-out infinite;
}
.wl-call { top: 92px; inset-inline: 20px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; padding-inline-start: 12px; animation-delay: .45s, 1s; }
.wl-call .av {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--paper); color: var(--gold-ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line-2);
}
.wl-call .who { display: grid; gap: 1px; min-width: 0; }
.wl-call small, .wl-vm small {
  font-size: .64rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wl-call b { font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; }
/* The answer button rings: a pulse around it, the handset shaking. */
.wl-call .pick { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ok); color: #fff; animation: ping 1.6s infinite; }
.wl-call .pick svg { width: 19px; height: 19px; animation: wl-ring 2.4s ease-in-out infinite; }
@keyframes wl-ring { 0%, 48%, 100% { rotate: 0deg; } 6%, 18%, 30% { rotate: -16deg; } 12%, 24%, 36% { rotate: 16deg; } 42% { rotate: -6deg; } }
.wl-vm { top: 322px; inset-inline-end: 14px; max-width: 214px; padding: 11px 15px; animation-delay: 1.3s, 1.8s; }
.wl-vm b { font-size: .96rem; font-weight: 600; letter-spacing: -.01em; }
.wl-vm span { font-family: var(--text); font-size: .82rem; line-height: 1.35; color: var(--ink-2); }

/* minmax(0, 1fr): an auto column takes the email box's own width (about 225px) as its floor
   and pushed the whole form past the pop-up's edge on phones. */
.wl-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: center; padding: clamp(28px, 4.5vw, 48px) clamp(24px, 4.5vw, 44px); }
.wl-body h2 { font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.25rem); }
.wl-body .wl-text { color: var(--ink-2); font-size: var(--s1); line-height: 1.45; }
/* On iPhone already: the App Store badge first, the email box is for Android. */
.wl-body .store-badges img { height: 48px; }
.wl-body .wl-android { font-size: var(--s0); margin-top: 4px; }
/* The email box and its button in one pill */
dialog.waitlist .join {
  flex-wrap: nowrap; gap: 6px; max-width: none; margin-top: 6px; padding: 6px; border-radius: var(--pill);
  background: var(--paper); border: 1px solid var(--line-2); transition: border-color .15s, box-shadow .15s;
}
dialog.waitlist .join:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 16%, transparent); }
dialog.waitlist .join input { flex: 1 1 0; width: 0; padding: 11px 14px; background: none; border: 0; color: var(--ink); }
dialog.waitlist .join input::placeholder { color: var(--grey); }
dialog.waitlist .join .btn { flex: none; padding: 14px 22px; }
dialog.waitlist .join-msg { color: var(--gold-ink); }
/* On the page the empty line holds the space so nothing jumps; in the pop-up it was a hole. */
dialog.waitlist .join-msg:empty { display: none; }
/* Joined: the form steps aside for the answer. */
dialog.waitlist.joined .join { display: none; }
dialog.waitlist .join-msg.ok {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px;
  background: var(--gold-soft); color: var(--ink); font-size: var(--s0); font-weight: 600;
}
dialog.waitlist .join-msg.ok::before {
  content: "✓"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--gold); color: #fff; font-size: .95rem;
}
dialog.waitlist .wl-follow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px;
  padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--s-1);
}

/* Phones: the app becomes a band across the top. */
@media (max-width: 760px) {
  dialog.waitlist[open] { grid-template-columns: minmax(0, 1fr); }
  .wl-art { min-height: 0; height: 200px; }
  .wl-mark { display: none; }
  /* The phone moves to the far side so the voicemail card doesn't cover its number. */
  .wl-disc { width: 260px; top: 100%; left: 66%; }
  .wl-phone { width: 144px; top: 74px; left: 66%; padding: 5px; border-radius: 28px; }
  [dir="rtl"] .wl-disc, [dir="rtl"] .wl-phone { left: 34%; }
  .wl-phone img { border-radius: 23px; }
  .wl-call { top: 14px; inset-inline: 14px 58px; gap: 10px; padding: 8px; padding-inline-start: 10px; border-radius: 18px; }
  .wl-call .av, .wl-call .pick { width: 34px; height: 34px; }
  .wl-call .pick svg { width: 16px; height: 16px; }
  .wl-call b { font-size: .95rem; }
  .wl-vm { top: 88px; inset-inline: 14px auto; max-width: 168px; padding: 9px 12px; border-radius: 16px; }
  .wl-vm b { font-size: .88rem; }
  .wl-vm span { font-size: .74rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .wl-body { padding: 22px 22px 20px; gap: 12px; }
  .wl-body .wl-text { font-size: var(--s0); }
}
@media (max-width: 760px) and (max-height: 700px) { .wl-art { height: 172px; } .wl-vm { top: 84px; } }
@media (max-width: 400px) { .wl-call .ln { display: none; } }
@media (max-width: 350px) {
  dialog.waitlist .join { flex-wrap: wrap; border-radius: 24px; }
  dialog.waitlist .join .btn { flex: 1 1 100%; }
}

/* ── Utility bar + header ───────────────────────────── */
.util { background: var(--night); color: var(--haze); font: 500 .78rem/1 var(--text); }
.util .wrap { display: flex; align-items: center; gap: 22px; height: 36px; }
.util .news { display: flex; align-items: center; gap: 14px; min-width: 0; }
.util .news span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.util .news .short { display: none; }
@media (max-width: 560px) { .util .news .long { display: none; } .util .news .short { display: inline; } }
.util .news button, .util .news .go {
  flex: none; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 600;
  color: var(--gold-bright);
}
.util .news button:hover, .util .news .go:hover { color: var(--star); }
.util nav { margin-inline-start: auto; display: flex; gap: 20px; align-items: center; }
.util nav a { line-height: 1; }
.util a { color: var(--star); text-decoration: none; }
.util a:hover { color: var(--gold-bright); }

/* Frosted bar, like the iPhone's. The blur sits on ::before: a backdrop-filter
   on the header itself would shrink the fixed mobile menu to the bar's height. */
.site-head { position: sticky; top: 0; z-index: 60; border-bottom: 1px solid transparent; transition: border-color .25s; }
.site-head::before {
  content: ""; position: absolute; inset: 0 0 -1px; z-index: -1;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px);
  transition: background .25s;
}
.site-head.solid { border-bottom-color: var(--line); }
.site-head.solid::before { background: color-mix(in srgb, var(--paper) 86%, transparent); }
.site-head .bar { display: flex; align-items: center; gap: 8px; height: var(--head); }
.brand { display: flex; align-items: center; text-decoration: none; margin-inline-end: 18px; }
.brand img { height: 38px; width: auto; }
.nav { display: flex; align-items: stretch; height: 100%; }
.nav > .item { position: static; display: flex; }
.nav-link {
  display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 14px; background: none; border: 0; cursor: pointer;
  font: 500 .95rem var(--text); color: var(--ink-2); text-decoration: none; position: relative;
}
.nav-link:hover, .item.open .nav-link, .nav-link[aria-current="page"] { color: var(--ink); }
.nav-link::after { content: ""; position: absolute; inset-inline: 14px; bottom: 12px; height: 2px; border-radius: 2px; background: var(--gold); transform: scaleX(0); transition: transform .2s; }
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link .chev { width: 10px; height: 10px; transition: transform .2s; }
.item.open .nav-link .chev { transform: rotate(180deg); }
.head-end { margin-inline-start: auto; display: flex; align-items: center; gap: 18px; }
.lang { font: 600 .9rem var(--arabic); color: var(--ink-2); text-decoration: none; }
.lang[lang="en"] { font-family: var(--text); }
.lang:hover { color: var(--ink); }
.menu-btn { display: none; }

/* Mega menu */
.mega {
  position: absolute; inset-inline: 0; top: 100%; background: color-mix(in srgb, var(--surface) 94%, transparent);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-top: 1px solid var(--line); border-radius: 0 0 28px 28px;
  box-shadow: 0 30px 60px -24px rgba(23, 32, 42, .25);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s;
}
.item.open .mega { opacity: 1; visibility: visible; transform: none; }
.mega .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.1fr); gap: 36px; padding-block: 28px 34px; }
.mega .col-title, .foot-grid .col-title { margin-top: 0; text-wrap: balance; }
.mega .col-title { font: 600 .74rem var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 10px; }
.mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega li a { display: grid; gap: 2px; padding: 10px 12px; margin-inline: -12px; text-decoration: none; border-radius: 14px; }
.mega li a:hover { background: var(--paper); }
.mega li b { font: 600 .98rem var(--display); }
.mega li span { font-size: .86rem; color: var(--grey); }
.mega .promo { position: relative; display: grid; grid-template-columns: 1fr 42%; align-items: end; background: var(--paper); border-radius: 22px; overflow: hidden; text-decoration: none; min-height: 200px; }
.mega .promo .copy { padding: 22px; display: grid; gap: 10px; align-self: center; }
.mega .promo strong { font: 700 1.2rem/1.2 var(--display); letter-spacing: -.02em; }
.mega .promo em { font: 600 .88rem var(--display); font-style: normal; color: var(--gold-ink); justify-self: start; }
.mega .promo .pic { position: relative; height: 100%; }
.mega .promo .pic::before { content: ""; position: absolute; width: 190px; aspect-ratio: 1; border-radius: 50%; background: var(--sand); inset-inline-end: -40px; bottom: -60px; }
.mega .promo img { position: relative; width: 100%; height: 180px; object-fit: contain; object-position: bottom; }

@media (max-width: 1000px) {
  .util nav { display: none; }
  .util .wrap { justify-content: center; }
  .menu-btn {
    display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; background: var(--surface);
    border: 0; border-radius: var(--pill); padding: 9px 14px; font: 600 .9rem var(--display); color: var(--ink); cursor: pointer; box-shadow: var(--shadow);
  }
  .head-end { display: none; }
  .nav {
    position: fixed; inset: calc(var(--head) + var(--util, 34px)) 0 0 0; height: auto; background: var(--paper);
    flex-direction: column; overflow-y: auto; padding: 8px var(--gutter) 28px; display: none;
    border-top: 1px solid var(--line);
  }
  .nav.open { display: flex; }
  .nav > .item { flex-direction: column; border-bottom: 1px solid var(--line); }
  .nav-link { height: auto; padding: 18px 0; font-size: 1.08rem; color: var(--ink); justify-content: space-between; width: 100%; }
  .nav-link::after { display: none; }
  .mega { position: static; opacity: 1; visibility: visible; transform: none; display: none; border: 0; border-radius: 0; box-shadow: none; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .item.open .mega { display: block; }
  .mega .wrap { grid-template-columns: 1fr; gap: 18px; padding: 0 0 18px; }
  .mega .promo { display: none; }
  .nav .drawer-end { display: grid; gap: 18px; padding-top: 24px; }
}
@media (min-width: 1001px) { .nav .drawer-end { display: none; } }

/* ── Sections ────────────────────────────────────────── */
section { position: relative; }
.sec { padding-block: clamp(72px, 9vw, 128px); }
.sec-head { max-width: 760px; display: grid; gap: 16px; }
.sec-head h2 { font-size: var(--s3); }
.sec-head p { color: var(--ink-2); font-size: var(--s1); line-height: 1.5; }
.sec-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.on-night { background: var(--night); color: var(--star); }
.on-night .sec-head p { color: var(--haze); }

/* ── Hero ────────────────────────────────────────────── */
.hero { padding-block: clamp(40px, 6vw, 72px) clamp(56px, 7vw, 96px); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.hero-copy { display: grid; gap: 22px; justify-items: start; }
/* sized so "The number that" always fits its column: "works for you." can't wrap, and "that" must not sit alone */
.hero h1 { font-size: clamp(2.5rem, .8rem + 4.2vw, 4.4rem); letter-spacing: -.035em; line-height: 1.02; max-width: 16ch; }
.hero h1 .tag { display: flex; width: max-content; max-width: 100%; margin-bottom: 22px; line-height: 1.2; }
.hero h1 .u { position: relative; white-space: nowrap; color: var(--navy); }
.hero h1 .u svg { position: absolute; inset-inline: -2%; bottom: -.16em; width: 104%; height: .32em; overflow: visible; }
.hero h1 .u path { fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.1s .5s cubic-bezier(.6,0,.2,1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.lede { font-size: var(--s1); color: var(--ink-2); line-height: 1.5; max-width: 44ch; }
.offer {
  display: flex; align-items: stretch; background: var(--surface); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden;
}
.offer .price { background: var(--navy); color: var(--star); padding: 14px 18px; display: grid; align-content: center; }
.offer .price small { font: 600 .68rem var(--display); letter-spacing: .12em; color: var(--gold-bright); text-transform: uppercase; }
.offer .price b { font: 700 1.55rem/1.1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.offer .price b span { font-size: .82rem; font-weight: 500; color: var(--haze); letter-spacing: 0; }
.offer ul { list-style: none; margin: 0; padding: 12px 18px; display: grid; gap: 4px; align-content: center; font: 500 .9rem var(--text); color: var(--ink-2); }
.offer li::before { content: "✓"; color: var(--gold); margin-inline-end: 8px; font-weight: 700; }
.hero .ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }

/* The hero stage: sand disc, the animated character, floating cards */
.stage { position: relative; aspect-ratio: 1; width: 100%; max-width: 600px; justify-self: center; }
.stage .disc { position: absolute; inset: 9% 6% 3% 6%; border-radius: 50%; background: var(--sand); }
.stage .disc::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--gold) 55%, transparent); animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.anim { position: relative; width: 100%; aspect-ratio: 1; }
.anim canvas, .anim img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.anim { isolation: auto; }
.anim img { transition: opacity .3s; }
.anim.ready img { opacity: 0; }
/* The floating cards: notifications on glass, like the app's. */
.chip {
  position: absolute; z-index: 2; background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 18px; box-shadow: 0 12px 30px rgba(23, 32, 42, .12);
  padding: 11px 15px; display: grid; gap: 3px; font-family: var(--display); min-width: 0;
  opacity: 0; transform: translateY(10px) scale(.96); animation: pop .5s cubic-bezier(.2,.8,.2,1.2) forwards, bob 6s ease-in-out infinite;
}
.chip small { font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }
.chip b { font-size: .98rem; font-weight: 600; letter-spacing: -.01em; }
.chip span { font-family: var(--text); font-size: .82rem; color: var(--ink-2); max-width: 24ch; line-height: 1.35; }
.chip .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-inline-end: 6px; box-shadow: 0 0 0 0 rgba(31,156,90,.5); animation: ping 1.6s infinite; }
.chip.c1 { top: 8%; inset-inline-start: -2%; animation-delay: .9s, 1.4s; }
.chip.c2 { top: 44%; inset-inline-end: -4%; animation-delay: 1.5s, 2s; }
.chip.c3 { bottom: 8%; inset-inline-start: 4%; animation-delay: 2.1s, 2.6s; }
.chip .code { font-size: 1.3rem; font-weight: 600; letter-spacing: .1em; color: var(--ink); font-variant-numeric: tabular-nums; }
@keyframes pop { to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(31,156,90,.55); } 80%, 100% { box-shadow: 0 0 0 8px rgba(31,156,90,0); } }

@media (max-width: 880px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .stage { max-width: 440px; order: -1; margin-top: -8px; }
  .chip { padding: 9px 12px; border-radius: 16px; }
  .chip span { display: none; }
  .chip.c2 { inset-inline-end: 0; }
}

/* ── Promise band ────────────────────────────────────── */
.band { background: var(--night); color: var(--star); }
.band ul { list-style: none; margin-inline: auto; padding-block: 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.band li { display: grid; gap: 2px; padding-inline-start: 16px; border-inline-start: 2px solid var(--gold); }
.band b { font: 700 var(--s2)/1.1 var(--display); letter-spacing: -.03em; }
.band span { color: var(--haze); font-size: var(--s-1); }
@media (max-width: 760px) { .band ul { grid-template-columns: repeat(2, 1fr); } }

/* ── Plans ───────────────────────────────────────────── */
.plans-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 52px; align-items: stretch; }
.plan {
  position: relative; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow);
  padding: clamp(24px, 2.6vw, 34px); display: grid; gap: 16px; align-content: start;
}
.plan .flag { position: absolute; top: -12px; inset-inline-start: 24px; background: var(--gold); color: #fff; font: 600 .7rem var(--display); letter-spacing: .06em; padding: 6px 12px; border-radius: var(--pill); text-transform: uppercase; box-shadow: 0 6px 14px rgba(176, 137, 79, .3); }
.plan h3 { font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.plan .amount { font: 700 clamp(2.4rem, 2rem + 1.6vw, 3.3rem)/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.plan .amount small { font-size: .98rem; font-weight: 500; letter-spacing: 0; color: var(--grey); }
.plan p { color: var(--ink-2); }
.plan ul { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.plan li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: .97rem; }
.plan li::before { content: "✓"; font-weight: 700; color: var(--gold); }
.plan .packs { display: flex; flex-wrap: wrap; gap: 8px; }
.plan .packs span { font: 600 1rem var(--display); padding: 8px 14px; background: var(--paper); border-radius: var(--pill); font-variant-numeric: tabular-nums; }
.plan .btn { justify-self: start; margin-top: 4px; }
.plan.featured { background: var(--navy); color: var(--star); box-shadow: var(--night-shadow); }
.plan.featured h3 { color: var(--gold-bright); }
.plan.featured .amount small, .plan.featured p { color: var(--haze); }
.plan.featured ul { border-top-color: var(--night-line); }
.plan.featured li::before { color: var(--gold-bright); }
.plans-note { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px 26px; font: 500 .9rem var(--text); color: var(--ink-2); }
.plans-note span::before { content: "·"; color: var(--gold); margin-inline-end: 10px; font-weight: 700; }
@media (max-width: 900px) { .plans-grid { grid-template-columns: 1fr; max-width: 520px; } }

/* ── Scroll chapters: the character moves as you scroll ─ */
.chapters-intro { padding-block: clamp(72px, 9vw, 120px) 8px; }
/* The pinned layer gets a solid surface: the frames blend with multiply and
   a sticky element is its own blending group. */
.chapters { background: var(--surface); }
.chapter { height: 200vh; }
.chapter .stick { position: sticky; top: var(--head); height: calc(100svh - var(--head)); min-height: 520px; background: var(--surface); display: flex; align-items: center; }
.chapter .grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.chapter:nth-of-type(even) .grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.chapter:nth-of-type(even) .stage { order: -1; }
.chapter .copy { display: grid; gap: 18px; max-width: 520px; }
.chapter .count { font: 600 .82rem var(--display); color: var(--grey); letter-spacing: .04em; }
.chapter .count b { color: var(--ink); }
.chapter h3 { font-size: var(--s3); }
.chapter .copy > p { font-size: var(--s1); color: var(--ink-2); line-height: 1.5; }
.chapter .feats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chapter .feats li { font: 500 .86rem var(--text); background: var(--paper); border-radius: var(--pill); padding: 8px 14px; color: var(--ink); }
.chapter .stage { max-width: min(640px, 72svh); }
.chapter .progress { height: 3px; border-radius: 3px; background: var(--line); position: relative; max-width: 220px; overflow: hidden; }
.chapter .progress i { position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--p, 0) * 100%); background: var(--gold); border-radius: 3px; }
/* text lines arrive with the scroll */
.js .chapter .copy > * { opacity: .12; transform: translateY(14px); transition: opacity .5s, transform .5s; }
.js .chapter .copy > .count, .js .chapter .copy > .progress { opacity: 1; transform: none; }
.js .chapter.lit .copy > * { opacity: 1; transform: none; }
.js .chapter.lit .copy > *:nth-child(3) { transition-delay: .08s; }
.js .chapter.lit .copy > *:nth-child(4) { transition-delay: .16s; }
.js .chapter.lit .copy > *:nth-child(5) { transition-delay: .24s; }
/* a line drawing that draws itself with the scroll (flight path, call waves) */
.trace { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: visible; }
.trace path { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); }
.trace .dash { stroke-dasharray: .012 .012; stroke-dashoffset: 0; opacity: calc(var(--p, 0) * 1.6); }
.trace .plane { offset-path: var(--route); offset-distance: calc(var(--p, 0) * 100%); offset-rotate: auto; fill: var(--navy); opacity: min(1, calc(var(--p, 0) * 6)); }
@media (max-width: 880px) {
  .chapter { height: 180vh; }
  .chapter .grid, .chapter:nth-of-type(even) .grid { grid-template-columns: 1fr; align-content: center; gap: 8px; }
  .chapter:nth-of-type(even) .stage { order: 0; }
  .chapter .stage { order: -1 !important; max-width: min(360px, 44svh); }
  .chapter h3 { font-size: var(--s2); }
  .chapter .copy { gap: 12px; }
  .chapter .copy > p { font-size: var(--s0); }
}

.trace .plane-shape { stroke: none; }
[data-follow] { opacity: 0; transition: opacity .3s; }

/* ── The app: real screens (status and gesture bars cropped off) ── */
.screens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 36px); margin-top: 52px; padding-bottom: 36px; }
.screen { margin: 0; display: grid; gap: 16px; align-content: start; }
.screen img { width: 100%; border-radius: 28px; box-shadow: var(--shadow-lift); background: var(--paper); outline: 1px solid rgba(23, 32, 42, .06); }
.screen figcaption { display: grid; gap: 4px; }
.screen figcaption b { font: 600 1.02rem/1.25 var(--display); letter-spacing: -.01em; }
.screen figcaption span { color: var(--ink-2); font-size: .93rem; line-height: 1.45; }
.screens .screen:nth-child(even) { translate: 0 36px; }
@media (max-width: 900px) {
  .screens { grid-template-columns: repeat(4, 64vw); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 28px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .screens::-webkit-scrollbar { display: none; }
  .screens .screen { scroll-snap-align: start; }
  .screens .screen:nth-child(even) { translate: none; }
}

/* ── What is Nimra + three steps ─────────────────────── */
.what .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.what-copy { display: grid; gap: 18px; justify-items: start; }
.what h2 { font-size: var(--s3); }
.what .answer { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.6rem); line-height: 1.45; color: var(--ink); max-width: 34ch; letter-spacing: -.01em; }
.steps { margin: 0; padding: 0; list-style: none; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.steps li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center; padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.6vw, 30px); }
.steps li + li { border-top: 1px solid var(--line); }
.steps .n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: var(--star); font: 600 1rem var(--display); }
.steps h3 { font-size: var(--s1); letter-spacing: -.02em; }
.steps p { color: var(--ink-2); font-size: .97rem; margin-top: 4px; }
@media (max-width: 880px) { .what .wrap { grid-template-columns: 1fr; } }

/* ── Who it's for ────────────────────────────────────── */
.uses { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); margin-top: 48px; }
.uses.three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; }
.use { display: grid; grid-template-rows: auto 1fr; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s; }
.use:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.use .thumb { position: relative; aspect-ratio: 1 / .82; background: var(--paper); overflow: hidden; }
.use .thumb::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--sand); left: 50%; top: 62%; translate: -50% -50%; }
.use .thumb img { position: relative; width: 100%; height: 100%; object-fit: contain; object-position: bottom; padding-top: 8px; }
.use .body { display: grid; gap: 6px; align-content: start; padding: 16px 18px 20px; }
.use b { font: 600 1.02rem/1.25 var(--display); letter-spacing: -.01em; }
.use .body > span { color: var(--ink-2); font-size: .93rem; line-height: 1.45; }
.use .body::after { content: "→"; font: 600 1rem var(--display); color: var(--gold-ink); margin-top: 4px; }
[dir="rtl"] .use .body::after { content: "←"; }
@media (max-width: 1100px) { .uses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .uses, .uses.three { grid-template-columns: repeat(5, 62vw); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 22px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .uses.three { grid-template-columns: repeat(3, 62vw); }
  .uses::-webkit-scrollbar { display: none; }
  .use { scroll-snap-align: start; }
}

/* ── Features grid ───────────────────────────────────── */
.features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 52px; }
.feature { padding: clamp(20px, 2.4vw, 28px); background: var(--surface); border-radius: 22px; box-shadow: var(--shadow); display: grid; gap: 10px; align-content: start; transition: transform .2s, box-shadow .2s; }
.feature:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.feature svg { width: 30px; height: 30px; stroke: var(--gold-ink); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.feature h3 { font-size: 1.06rem; font-weight: 600; letter-spacing: -.015em; }
.feature p { color: var(--ink-2); font-size: .95rem; line-height: 1.55; }
@media (max-width: 1000px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }

/* ── Straight answers ────────────────────────────────── */
.honest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 52px; }
.honest-col { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: clamp(24px, 3vw, 36px); display: grid; gap: 16px; align-content: start; }
.honest-col h3 { font-size: var(--s1); }
.honest-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.honest-col li { display: grid; grid-template-columns: 24px 1fr; gap: 8px; color: var(--ink-2); }
.honest-col li b { color: var(--ink); }
.honest-col li::before { content: "✓"; font-weight: 700; color: var(--ok); }
.honest-col.no li::before { content: "–"; color: var(--gold-ink); }
.honest-col a { color: var(--gold-ink); text-decoration: none; font-weight: 500; }
.honest-col a:hover { text-decoration: underline; }
@media (max-width: 760px) { .honest-grid { grid-template-columns: 1fr; } }

/* ── FAQ ─────────────────────────────────────────────── */
.faq-list { margin-top: 44px; max-width: 880px; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding-inline: clamp(18px, 3vw, 30px); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 0; }
.faq-list summary { cursor: pointer; list-style: none; padding: 20px 44px 20px 0; font: 600 var(--s0)/1.4 var(--display); letter-spacing: -.01em; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); font: 500 1.2rem/1 var(--text); color: var(--gold-ink); transition: transform .2s; }
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-list .a { padding: 0 0 22px; color: var(--ink-2); max-width: 70ch; display: grid; gap: 12px; }
.faq-list .a a { color: var(--gold-ink); text-decoration: none; font-weight: 500; }
.faq-list .a a:hover { text-decoration: underline; }
[dir="rtl"] .faq-list summary { padding: 20px 0 20px 44px; }
.faq-list summary:hover { color: var(--navy); }
.more { margin-top: 28px; }

/* ── Closing ─────────────────────────────────────────── */
.closing { background: var(--night); color: var(--star); overflow: hidden; }
.closing .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(24px, 5vw, 72px); align-items: center; padding-block: clamp(64px, 8vw, 110px); }
.closing .inner { display: grid; gap: 20px; justify-items: start; }
.closing h2 { font-size: var(--s3); }
.closing p { color: var(--haze); font-size: var(--s1); }
.closing .android-note { font-size: var(--s0); margin-top: 8px; }
.closing .stage { max-width: 460px; }
.closing .stage .disc { background: var(--star); border-radius: 50%; inset: 6%; }
.closing .stage .disc::after { border-color: color-mix(in srgb, var(--gold-bright) 60%, transparent); }
.join { display: flex; gap: 10px; flex-wrap: wrap; width: 100%; max-width: 520px; }
.join input { flex: 1 1 240px; min-width: 0; background: var(--night-2); border: 1px solid var(--night-line); color: var(--star); padding: 15px 20px; font: inherit; border-radius: var(--pill); }
.join input:focus { outline: none; border-color: var(--gold-bright); }
.join input::placeholder { color: var(--haze); }
.join-lead { font-size: var(--s-1) !important; }
.join-msg { min-height: 1.5em; font-size: var(--s-1); color: var(--gold-bright); }
@media (max-width: 880px) { .closing .wrap { grid-template-columns: 1fr; } .closing .stage { order: -1; max-width: 320px; } }

/* ── Footer ──────────────────────────────────────────── */
.site-foot { background: var(--night); color: var(--haze); border-top: 1px solid var(--night-line); padding-block: 64px 36px; font-size: .95rem; }
.foot-grid { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 32px; }
.foot-grid .col-title { font: 600 .74rem var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 14px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-grid a { text-decoration: none; }
.foot-grid a:hover { color: var(--star); }
.foot-brand { display: grid; gap: 16px; align-content: start; justify-items: start; }
.foot-brand img { height: 56px; width: auto; }
.foot-brand p { color: var(--star); font: 600 1.02rem var(--display); letter-spacing: -.01em; }
.foot-base { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--night-line); display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; font-size: .84rem; }
.foot-base .legal { max-width: 70ch; }
.foot-base a { text-decoration: none; }
.foot-base a:hover { color: var(--star); }
.foot-grid.ar { grid-template-columns: 1.5fr repeat(3, 1fr); }
@media (max-width: 900px) { .foot-grid, .foot-grid.ar { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* Instagram and Facebook: round icon buttons, on the night footer and in the pop-up */
.social { display: flex; gap: 10px; }
.social a {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--night-line); color: var(--star); transition: color .15s, background .15s, border-color .15s;
}
.social a:hover { color: var(--night); background: var(--star); border-color: var(--star); }
.social svg { width: 20px; height: 20px; }
dialog.waitlist .social a { width: 38px; height: 38px; border-color: var(--line-2); color: var(--ink); }
dialog.waitlist .social a:hover { color: var(--ink); background: var(--paper); border-color: var(--line-2); }

/* ── Article pages (guides, pricing, legal) ──────────── */
.article-hero { padding-block: clamp(44px, 6vw, 76px) clamp(36px, 5vw, 60px); border-bottom: 1px solid var(--line); background: var(--paper); }
.article-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.article-hero .wrap > div:only-child, .article-hero .wrap > :not(.art):only-of-type { grid-column: 1 / -1; }
.article-hero .text { display: grid; gap: 16px; justify-items: start; }
.article-hero h1 { font-size: clamp(1.95rem, 1.35rem + 2.4vw, 3.4rem); max-width: 20ch; }
.article-hero .dek { font-size: var(--s1); color: var(--ink-2); max-width: 58ch; line-height: 1.5; }
.article-hero .art { position: relative; aspect-ratio: 1; max-width: 340px; width: 100%; justify-self: end; }
.article-hero .art::before { content: ""; position: absolute; inset: 8% 4% 2%; border-radius: 50%; background: var(--sand); }
.article-hero .art img { position: relative; width: 100%; height: 100%; object-fit: contain; }
.crumbs { font: 500 .82rem var(--text); color: var(--grey); display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs a { text-decoration: none; color: var(--ink-2); }
.crumbs a:hover { color: var(--ink); }
.meta-line { font: 500 .82rem var(--text); color: var(--grey); display: flex; gap: 18px; flex-wrap: wrap; }
@media (max-width: 760px) { .article-hero .wrap { grid-template-columns: 1fr; } .article-hero .art { order: -1; max-width: 200px; justify-self: start; } }

.prose { max-width: 740px; margin-inline: auto; padding-block: 56px 96px; font-size: 1.07rem; line-height: 1.75; color: #272c38; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: var(--s2); margin-top: 2.1em; }
.prose h3 { font-size: var(--s1); margin-top: 1.7em; letter-spacing: -.02em; }
.prose a { color: var(--gold-ink); text-decoration-color: color-mix(in srgb, var(--gold) 50%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-inline-start: 1.3em; }
.prose li + li { margin-top: .45em; }
.prose strong { color: var(--ink); }
.prose .callout { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow); padding: 20px 22px; color: var(--ink-2); }
.prose .callout b { color: var(--ink); }
.prose .table-wrap { overflow-x: auto; background: var(--surface); border-radius: 20px; box-shadow: var(--shadow); }
.prose table { width: 100%; border-collapse: collapse; font-size: .96rem; }
.prose th, .prose td { text-align: start; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose tr:last-child td { border-bottom: 0; }
.prose th { font: 600 .74rem var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); background: color-mix(in srgb, var(--paper) 60%, #fff); }
.prose code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .9em; background: var(--paper); padding: 2px 7px; border-radius: 6px; }
.prose figure { margin-block: 2em; }
.prose .lead-answer { font-size: 1.2rem; line-height: 1.6; color: var(--ink); border-inline-start: 3px solid var(--gold); padding-inline-start: 18px; }
.price-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; }
.price-cards > div { display: grid; gap: 4px; padding: 18px 18px 20px; align-content: start; }
.price-cards > div + div { border-inline-start: 1px solid var(--line); }
.price-cards small { font: 600 .7rem var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }
.price-cards b { font: 700 1.7rem/1.1 var(--display); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.price-cards span { font-size: .88rem; color: var(--ink-2); }
@media (max-width: 640px) {
  .price-cards { grid-template-columns: 1fr 1fr; }
  .price-cards > div:nth-child(3) { border-inline-start: 0; }
  .price-cards > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
.guide-more { padding-bottom: 80px; margin-top: -40px; color: var(--ink-2); }
.guide-more a { color: var(--gold-ink); text-decoration-color: color-mix(in srgb, var(--gold) 50%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.cta-band { background: var(--night); color: var(--star); border-radius: var(--r); box-shadow: var(--night-shadow); padding: clamp(26px, 4vw, 42px); display: grid; gap: 14px; margin-top: 2.4em; }
.cta-band h2 { margin: 0; color: var(--star); font-size: var(--s2); }
.cta-band p { color: var(--haze); }

.guide-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 24px; padding-block: 56px 96px; }
.guide-card { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; text-decoration: none; color: var(--ink); display: grid; grid-template-rows: auto 1fr; transition: transform .2s, box-shadow .2s; }
.guide-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.guide-card .thumb { position: relative; aspect-ratio: 16 / 10; background: var(--paper); overflow: hidden; }
.guide-card .thumb::before { content: ""; position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%; background: var(--sand); left: 50%; top: 58%; translate: -50% -50%; }
.guide-card .thumb img { position: relative; width: 100%; height: 100%; object-fit: contain; padding-top: 10px; }
.guide-card div.body { padding: 20px 22px 24px; display: grid; gap: 8px; align-content: start; }
.guide-card h2 { font-size: var(--s1); letter-spacing: -.02em; }
.guide-card p { color: var(--ink-2); font-size: .96rem; }

/* ── Reveal ──────────────────────────────────────────── */
.rise { transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .8s; }
.js .rise.pre { transform: translateY(24px); opacity: .01; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .chip, .wl-call, .wl-vm { opacity: 1; transform: none; }
  .hero h1 .u path { stroke-dashoffset: 0; }
  .js .rise.pre, .js .chapter .copy > * { transform: none; opacity: 1; }
  .chapter { height: auto; }
  .chapter .stick { position: static; height: auto; padding-block: 48px; }
}

/* ── Arabic ──────────────────────────────────────────── */
[dir="rtl"] body { font-family: var(--arabic); }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .nav-link, [dir="rtl"] .btn, [dir="rtl"] .tag, [dir="rtl"] .eyebrow, [dir="rtl"] .mega li b,
[dir="rtl"] .plan .amount small, [dir="rtl"] .feature h3, [dir="rtl"] .faq-list summary, [dir="rtl"] .foot-brand p,
[dir="rtl"] .util, [dir="rtl"] .offer ul, [dir="rtl"] .chapter .feats li, [dir="rtl"] .plans-note, [dir="rtl"] .chip small,
[dir="rtl"] .mega .col-title, [dir="rtl"] .foot-grid .col-title, [dir="rtl"] .link-arrow, [dir="rtl"] .mega .promo strong, [dir="rtl"] .mega .promo em,
[dir="rtl"] .chapter .count, [dir="rtl"] .steps .n, [dir="rtl"] .menu-btn, [dir="rtl"] .chip b, [dir="rtl"] .use b,
[dir="rtl"] .screen figcaption b, [dir="rtl"] .badge .soon {
  font-family: var(--arabic); letter-spacing: 0;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.3; }
[dir="rtl"] .hero h1 { letter-spacing: 0; line-height: 1.2; }
/* In Arabic the underline draws from the right and the plane flies right to left. */
[dir="rtl"] .hero h1 .u svg { transform: scaleX(-1); }
[dir="rtl"] .trace.route { transform: scaleX(-1); }
[dir="rtl"] .chip b.code, [dir="rtl"] .plan .packs span { direction: ltr; unicode-bidi: isolate; }
/* Arabic must never get Latin letter-spacing: it breaks the joining between
   letters. The Arabic face carries its own Latin digits. */
[dir="rtl"] { --mono: var(--arabic); --text: var(--arabic); --display: var(--arabic); }
[dir="rtl"] *, [dir="rtl"] *::before, [dir="rtl"] *::after { letter-spacing: 0 !important; }
[dir="rtl"] .tag, [dir="rtl"] .eyebrow, [dir="rtl"] .chip small, [dir="rtl"] .plan h3, [dir="rtl"] .plan .flag,
[dir="rtl"] .mega .col-title, [dir="rtl"] .foot-grid .col-title, [dir="rtl"] .wl-call small, [dir="rtl"] .wl-vm small { text-transform: none; font-weight: 700; }
[dir="rtl"] .wl-call small, [dir="rtl"] .wl-vm small { font-size: .74rem; }
[dir="rtl"] .tag, [dir="rtl"] .eyebrow { font-size: .9rem; }
[dir="rtl"] .plan h3 { font-size: 1rem; }
[dir="rtl"] .chip b.code, [dir="rtl"] .plan .packs span { font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif; }
[dir="rtl"] .hero h1 .tag { font-size: 1rem; margin-bottom: 18px; }
[dir="rtl"] .price-cards small { text-transform: none; font-size: .85rem; }
[dir="rtl"] .price-cards b { font-size: 1.5rem; }
[dir="rtl"] .what .answer { line-height: 1.7; }
[dir="rtl"] .prose { line-height: 1.9; }
[dir="rtl"] .prose .lead-answer { line-height: 1.85; }