/*
 * The whole site's stylesheet: the landing page and the three documents.
 *
 * NO PICTURES. Everything that looks like the app is drawn here, in HTML and
 * CSS, from the app's own palette (Palette.generated.swift) — so it is sharp
 * at every size, weighs nothing, turns dark with the page, and can never show
 * a screen the app no longer has.
 *
 * Logical properties throughout (inline-start, not left): the same rules lay
 * out the Arabic page right to left and the English one left to right.
 */

:root {
  --brand: #00685D;
  --brand-2: #008376;
  --deep: #00201C;
  --deep-2: #003B35;
  --mint: #81F3E5;
  --mint-2: #85D5C7;
  --gold: #FABD00;
  --neg: #BA1A1A;
  --pos: #006A62;

  --bg: #F8FAFA;
  --surface: #FFFFFF;
  --surface-2: #F2F4F4;
  --surface-3: #ECEEEE;
  --ink: #191C1D;
  --muted: #3D4946;
  --faint: #6F7977;
  --line: #DCE3E1;
  --accent: #00685D;
  --accent-soft: #00685D14;
  --on-accent: #FFFFFF;
  --shadow: 0 1px 2px #00201C0F, 0 12px 40px -12px #00201C29;

  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --max: 1180px;
  --gutter: clamp(16px, 4vw, 40px);

  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B1211;
    --surface: #131B1A;
    --surface-2: #17201F;
    --surface-3: #1D2726;
    --ink: #DEE4E2;
    --muted: #AEBDB9;
    --faint: #7F8E8B;
    --line: #243230;
    --accent: #70D8C8;
    --accent-soft: #70D8C81A;
    --on-accent: #00201C;
    --neg: #FFB4AB;
    --pos: #66D9CC;
    --shadow: 0 1px 2px #0006, 0 16px 48px -16px #000A;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
[lang="en"] body { line-height: 1.6; }
img, svg { display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }

.skip {
  position: absolute; inset-inline-start: 16px; top: -60px; z-index: 100;
  background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 10px;
  transition: top .2s;
}
.skip:focus { top: 12px; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ─────────────────────────── the bar ─────────────────────────── */

.bar {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  transition: background .35s, box-shadow .35s, backdrop-filter .35s;
}
.bar-in {
  display: flex; align-items: center; gap: 24px;
  height: 72px;
}
.bar.solid {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(1.6) blur(18px);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: 0 1px 0 var(--line);
}
.bar:not(.solid) { color: #fff; }
.bar.solid .logo { color: var(--accent); }
.bar nav { display: flex; gap: 4px; margin-inline-start: auto; }
.bar nav a {
  text-decoration: none; font-size: 15px; padding: 8px 12px; border-radius: 999px;
  opacity: .85; transition: opacity .2s, background .2s;
}
.bar nav a:hover { opacity: 1; background: #ffffff1f; }
.bar.solid nav a:hover { background: var(--accent-soft); }
.lang {
  text-decoration: none; font-size: 14px; font-weight: 600;
  border: 1px solid currentColor; border-radius: 999px; padding: 5px 14px;
  opacity: .9;
}
.bar .cta-mini {
  text-decoration: none; font-size: 14px; font-weight: 600;
  background: #fff; color: var(--brand); border-radius: 999px; padding: 8px 16px;
  white-space: nowrap;
}
.bar.solid .cta-mini { background: var(--brand); color: #fff; }
@media (max-width: 900px) { .bar nav { display: none; } .bar .lang { margin-inline-start: auto; } }
@media (max-width: 420px) { .bar .cta-mini { display: none; } }

.logo { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.logo-mark { width: 34px; height: 34px; }
.logo-word { height: 26px; width: auto; }

/* ─────────────────────────── the hero ─────────────────────────── */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  color: #fff;
  background: radial-gradient(120% 90% at 80% 0%, #00584F 0%, var(--deep-2) 45%, var(--deep) 100%);
  padding-block: 132px 96px;
  min-height: min(100svh, 980px);
  display: flex; align-items: center;
}
/* The aurora: three slow colour fields drifting under everything. */
.aurora { position: absolute; inset: -20%; z-index: -2; filter: blur(60px); opacity: .75; }
.aurora i {
  position: absolute; border-radius: 50%; mix-blend-mode: screen;
  animation: drift 22s var(--ease) infinite alternate;
}
.aurora i:nth-child(1) { width: 46vw; height: 46vw; background: #00A38F; inset-inline-start: 50%; top: 5%; }
.aurora i:nth-child(2) { width: 38vw; height: 38vw; background: #0E7C70; inset-inline-start: 5%; top: 40%; animation-duration: 28s; animation-delay: -6s; }
.aurora i:nth-child(3) { width: 30vw; height: 30vw; background: #2FBFA8; inset-inline-start: 30%; top: 60%; opacity: .5; animation-duration: 34s; animation-delay: -12s; }
@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6vw, -4vw) scale(1.15); }
  100% { transform: translate(-5vw, 5vw) scale(.9); }
}
/* A ledger's ruled lines, receding. */
.grid-floor {
  position: absolute; inset-inline: -10%; bottom: -10%; height: 55%; z-index: -1;
  background-image:
    linear-gradient(#ffffff14 1px, transparent 1px),
    linear-gradient(90deg, #ffffff14 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(600px) rotateX(62deg);
  transform-origin: bottom;
  mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  animation: floor 6s linear infinite;
}
@keyframes floor { to { background-position: 0 56px, 0 0; } }
/* Figures rising like a ledger being written. */
.rain { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.rain span {
  position: absolute; bottom: -40px; font-weight: 600; color: #ffffff;
  opacity: 0; font-variant-numeric: tabular-nums; direction: ltr;
  animation: rise linear infinite;
}
@keyframes rise {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: var(--o, .14); }
  80% { opacity: var(--o, .14); }
  100% { transform: translateY(-110vh); opacity: 0; }
}

.hero-in {
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 48px;
  width: 100%;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; letter-spacing: .01em;
  background: #ffffff14; border: 1px solid #ffffff26; border-radius: 999px;
  padding: 6px 14px 6px 8px;
  backdrop-filter: blur(8px);
}
[dir="rtl"] .eyebrow { padding: 6px 8px 6px 14px; }
.eyebrow b {
  background: var(--mint); color: var(--deep); border-radius: 999px; padding: 1px 10px; font-size: 12px;
}
.hero h1 {
  font-size: clamp(44px, 7.2vw, 88px); line-height: 1.08; font-weight: 700;
  margin-block: 22px 22px; letter-spacing: -.01em;
}
[lang="ar"] .hero h1 { line-height: 1.2; letter-spacing: 0; }
.hero h1 .glow {
  background: linear-gradient(100deg, var(--mint) 0%, #fff 40%, var(--mint-2) 70%, var(--mint) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 7s linear infinite;
}
@keyframes sheen { to { background-position: -250% 0; } }
.hero .lede { font-size: clamp(18px, 2vw, 21px); color: #D5E9E5; max-width: 34ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; align-items: center; }

.store {
  display: inline-flex; align-items: center; gap: 12px;
  background: #000; color: #fff; text-decoration: none;
  border-radius: 14px; padding: 10px 20px 10px 18px; min-height: 58px;
  border: 1px solid #ffffff2e;
  transition: transform .25s var(--ease), box-shadow .25s;
  position: relative;
}
.store:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px #000c; }
.store svg { width: 26px; height: 26px; }
.store small { display: block; font-size: 11px; opacity: .8; line-height: 1.2; }
.store strong { display: block; font-size: 19px; line-height: 1.2; font-family: -apple-system, 'SF Pro Display', system-ui, sans-serif; }
.store .soon {
  position: absolute; top: -10px; inset-inline-end: -8px;
  background: var(--gold); color: #2A1F00; font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 2px 9px;
}
.ghost {
  display: inline-flex; align-items: center; gap: 8px; min-height: 58px;
  text-decoration: none; font-weight: 600; padding-inline: 18px; border-radius: 14px;
  color: #fff; border: 1px solid #ffffff40; transition: background .2s;
}
.ghost:hover { background: #ffffff14; }
.ghost svg { width: 18px; height: 18px; }
.hero-notes { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; font-size: 14px; color: #B6D6D0; }
.hero-notes span { display: inline-flex; align-items: center; gap: 6px; }
.hero-notes svg { width: 16px; height: 16px; color: var(--mint); }

.hero-stage { position: relative; display: grid; place-items: center; min-height: 640px; perspective: 1400px; }
.halo {
  position: absolute; width: 520px; height: 520px; border-radius: 50%;
  background: conic-gradient(from 0deg, #81F3E500, #81F3E555, #FABD0033, #81F3E500 70%);
  filter: blur(40px); animation: spin 18s linear infinite; opacity: .8;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ring-lines { position: absolute; width: 640px; height: 640px; opacity: .35; }
.ring-lines circle { fill: none; stroke: #ffffff; stroke-width: 1; stroke-dasharray: 2 10; }
.ring-lines .r2 { animation: spin 60s linear infinite reverse; transform-origin: center; }
.ring-lines .r1 { animation: spin 90s linear infinite; transform-origin: center; }

/* Chips that float beside the phone: facts the app actually keeps. */
.chip {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  background: #ffffffE6; color: var(--ink);
  border-radius: 16px; padding: 10px 14px;
  box-shadow: 0 18px 40px -12px #0008;
  font-size: 13px; line-height: 1.35; font-weight: 500;
  backdrop-filter: blur(10px);
  animation: bob 6s ease-in-out infinite;
}
@media (prefers-color-scheme: dark) { .chip { background: #16201FE8; color: #DEE4E2; } }
.chip .dot { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.chip .dot svg { width: 18px; height: 18px; }
.chip b { display: block; font-size: 15px; }
.chip.c1 { top: 5%; inset-inline-end: -6%; }
.chip.c2 { top: 50%; inset-inline-start: -8%; animation-delay: -2s; }
.chip.c3 { bottom: 7%; inset-inline-end: -4%; animation-delay: -4s; }
@keyframes bob { 50% { transform: translateY(-12px); } }

/* ─────────────────────────── the phone ─────────────────────────── */

.phone {
  /* --n is the phone's width in pixels; --k scales the app's 402-point screen into it. */
  --n: 300;
  --w: calc(var(--n) * 1px);
  --k: calc(var(--n) * .93 / 402);
  position: relative; z-index: 2;
  width: var(--w); aspect-ratio: 9 / 19.5;
  border-radius: calc(var(--w) * .165);
  padding: calc(var(--w) * .035);
  background: linear-gradient(145deg, #3a4644, #0d1413 45%, #283230);
  box-shadow:
    inset 0 0 0 1.5px #5d6b69,
    inset 0 0 0 4px #0b1110,
    0 50px 90px -30px #000c,
    0 30px 60px -40px #00ffd540;
  /* No preserve-3d: in iOS Safari it lets the scaled screen escape the
     screen's rounded clip, and the app shows as a square pasted over the frame. */
  transition: transform .6s var(--ease);
}
.phone::before, .phone::after { /* side buttons */
  content: ''; position: absolute; width: 3px; border-radius: 2px; background: #29312f;
}
.phone::before { inset-inline-start: -3px; top: 22%; height: 9%; }
.phone::after { inset-inline-end: -3px; top: 28%; height: 14%; }
.screen {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: calc(var(--w) * .135);
  /* The clip again as a path: WebKit drops a radius clip around composited
     (transformed) children, and a clip-path it keeps. */
  clip-path: inset(0 round calc(var(--w) * .135));
  background: #F8FAFA; color: #191C1D;
  font-size: calc(var(--w) * .043);
  line-height: 1.35;
  isolation: isolate;
}
.island {
  position: absolute; top: 2.2%; left: 50%; transform: translateX(-50%); z-index: 20;
  width: 32%; height: 3.6%; background: #000; border-radius: 999px;
}
.status {
  position: absolute; top: 2.6%; inset-inline: 7%; z-index: 19;
  display: flex; justify-content: space-between; align-items: center;
  font-size: .78em; font-weight: 600; direction: ltr;
  font-family: -apple-system, system-ui, sans-serif;
}
.status .icons { display: flex; gap: 4px; align-items: center; }
.status .icons svg { display: block; height: 1em; width: auto; }
.screen.dark-top .status { color: #fff; }
.glare {
  position: absolute; inset: 0; z-index: 30; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, #ffffff26 0%, #ffffff00 38%);
  mix-blend-mode: soft-light;
}

/* A scene is one screen of the app; the reel cross-fades between them. */
.scene {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .6s var(--ease), transform .6s var(--ease), visibility 0s .6s;
  transform: translateY(12px) scale(.985);
}
.scene.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/*
 * The app, drawn at its own size. A scene's canvas is the iPhone 17 Pro screen
 * in points (402 wide); every measure below is a point read off the reference
 * shots (docs/shots/2026-10-10), and the whole canvas is scaled to the phone
 * it sits in by --k. The colours are the app's palette (Palette.generated.swift).
 */
.app {
  position: absolute; top: 0; inset-inline-start: 0; width: 402px; height: 906px; overflow: hidden;
  transform: scale(var(--k)); transform-origin: top left;
  background: #F8FAFA; color: #191C1D; font-size: 15px; line-height: 1.35;
}
[dir="rtl"] .app { transform-origin: top right; }
.app .ion { display: block; width: 1em; height: 1em; flex: none; }
[dir="rtl"] .app .fwd, [dir="rtl"] .app .back { transform: scaleX(-1); }
.acard { background: #fff; border: 1px solid #BCC9C5; border-radius: 20px; }
.money { display: inline-flex; align-items: center; gap: .3em; }
.sar { display: block; flex: none; width: .66em; height: .74em; }
.money.row { font-size: 16px; font-weight: 600; gap: 6px; }
.money.row .sar { width: 12px; height: 13px; }
.app .neg { color: #BA1A1A; }
.ci { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 13%, #fff); }
.ci .ion { width: 18px; height: 18px; }
.bar8 { height: 8px; border-radius: 99px; background: #E1E3E3; overflow: hidden; }
.bar8 i { display: block; height: 100%; width: 0; border-radius: inherit; background: #00685D; transition: width 1.2s .2s var(--ease); }
.scene.on .bar8 i { width: var(--w); }
.lr { display: flex; align-items: center; gap: 12px; height: 40px; }
.lr b { flex: 1; min-width: 0; font-size: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr .pct { font-size: 14px; color: #3D4946; }

/* The home screen: the teal head, the balance card over its edge, the cards. */
.home .scroll { position: absolute; top: 0; inset-inline: 0; transition: transform 1.2s var(--ease); }
.home.scrolled .scroll { transform: translateY(-684px); }
.hero-bg { position: absolute; top: 0; inset-inline: 0; height: 360px; background: linear-gradient(180deg, #008376, #005047); border-radius: 0 0 36px 36px; }
.greet { position: relative; padding: 130px 24px 0; color: #fff; display: grid; }
.greet b { font-size: 22px; font-weight: 600; line-height: 30px; }
.greet span { font-size: 15px; line-height: 22px; opacity: .92; }
.greet small { font-size: 13px; line-height: 20px; opacity: .78; }
.bal { position: relative; margin: 22px 24px 0; height: 194px; padding: 16px 20px 0; background: #fff; border: 1px solid #BCC9C5; border-radius: 20px; box-shadow: 0 10px 30px -14px #00201C40; }
.bal .lbl { display: block; font-size: 15px; line-height: 22px; color: #3D4946; }
.bal .big { display: flex; margin-top: 12px; height: 56px; font-size: 44px; font-weight: 700; letter-spacing: -.5px; gap: 10px; }
.bal .big .sar { width: 17px; height: 19px; color: #3D4946; }
.pair { position: absolute; top: 121px; bottom: 0; inset-inline: 20px; border-top: 1px solid #DCE3E1; display: flex; }
.pair > div { flex: 1; display: grid; align-content: start; gap: 1px; padding-top: 12px; }
.pair > div + div { border-inline-start: 1px solid #DCE3E1; padding-inline-start: 18px; margin-block: 10px 16px; padding-top: 2px; }
.pair span { font-size: 15px; line-height: 22px; color: #3D4946; display: flex; align-items: center; gap: 7px; }
.pair span i { width: 8px; height: 8px; border-radius: 50%; background: #00685D; }
.pair .money { font-size: 16px; font-weight: 700; line-height: 22px; }
.pair .sar { width: 12px; height: 13px; }
.new-tx { margin: 16px 24px 0; height: 55px; border-radius: 16px; background: #00685D; color: #fff; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 19px; font-weight: 700; }
.new-tx .ion { width: 24px; height: 24px; }
.sec-h { margin: 34px 24px 0; height: 30px; display: flex; justify-content: space-between; align-items: center; }
.sec-h b { font-size: 22px; font-weight: 600; }
.sec-h span { font-size: 15px; font-weight: 600; color: #00685D; }
.accts { margin-top: 11px; padding-inline: 24px; display: flex; gap: 16px; }
.acct { position: relative; flex: 0 0 236px; height: 124px; border-radius: 20px; overflow: hidden; color: #fff; padding: 18px 20px; }
.acct .nm { display: block; font-size: 17px; font-weight: 500; }
.acct .ic { position: absolute; top: 16px; inset-inline-end: 16px; width: 38px; height: 38px; border-radius: 50%; background: #ffffff29; display: grid; place-items: center; }
.acct .ic .ion { width: 22px; height: 22px; }
.acct .money { position: absolute; bottom: 20px; inset-inline-start: 20px; font-size: 22px; font-weight: 600; gap: 8px; }
.acct .sar { width: 13px; height: 15px; opacity: .85; }
/* The card's own pattern: arcs on cash and savings, a fall of lines on the bank. */
.acct.arcs { background-image: repeating-radial-gradient(circle at 100% 140%, transparent 0 116px, #ffffff1c 116px 117.5px, transparent 117.5px 129px); }
[dir="rtl"] .acct.arcs { background-image: repeating-radial-gradient(circle at 0 140%, transparent 0 116px, #ffffff1c 116px 117.5px, transparent 117.5px 129px); }
.acct.lines { background-image: repeating-linear-gradient(105deg, transparent 0 33px, #ffffff24 33px 34.5px); }
.month { margin: 33px 24px 0; padding: 20px; }
.mh { display: flex; justify-content: space-between; align-items: center; height: 30px; font-size: 16px; color: #3D4946; }
.down { display: inline-flex; align-items: center; gap: 4px; background: #DCEBE8; color: #00685D; border-radius: 99px; padding: 2px 12px; font-size: 15px; font-weight: 700; }
.down .ion { width: 14px; height: 14px; }
.mv { display: flex; margin-top: 12px; height: 44px; font-size: 34px; font-weight: 700; gap: 8px; }
.mv .sar { width: 14px; height: 16px; color: #3D4946; }
.month .bar8 { margin-top: 16px; }
.month p { margin-top: 12px; font-size: 15px; line-height: 22px; font-weight: 500; color: #00685D; }
.grow-c { margin: 35px 24px 0; height: 84px; padding: 0 18px; border-radius: 20px; background: #E3EFEC; display: flex; align-items: center; gap: 14px; }
.grow-c .gi { width: 38px; height: 38px; border-radius: 50%; background: #C9E2DD; color: #00685D; display: grid; place-items: center; }
.grow-c .gi .ion { width: 20px; height: 20px; }
.grow-c div { flex: 1; }
.grow-c b { display: block; font-size: 17px; font-weight: 700; color: #005048; }
.grow-c div span { display: block; font-size: 13px; line-height: 19px; color: #3D4946; }
.grow-c .fwd { width: 18px; height: 18px; color: #00685D; }
.list { margin: 12px 24px 0; padding: 8px 0; }
.tx { display: flex; align-items: center; gap: 12px; height: 51px; padding: 0 20px; }
.tx + .tx { border-top: 1px solid #E1E3E3; }
.tx div { flex: 1; }
.tx b { display: block; font-size: 16px; font-weight: 500; line-height: 21px; }
.tx small { font-size: 13px; font-weight: 600; color: #3D4946; }
.tops { margin: 14px 24px 0; display: grid; gap: 18px; }
.tops .bar8 { margin-top: 6px; }
.topbar { position: absolute; top: 0; inset-inline: 0; z-index: 2; height: 128px; padding: 70px 24px 0; display: flex; justify-content: space-between; align-items: flex-start; color: #fff; }
.topbar::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .7s; background: linear-gradient(180deg, #00837A 0 64%, #00837A00); }
.home.scrolled .topbar::before { opacity: 1; }
.topbar b { font-size: 20px; font-weight: 600; line-height: 40px; }
.btns { display: flex; gap: 10px; }
.btns i { width: 40px; height: 40px; border-radius: 50%; background: #ffffff26; display: grid; place-items: center; }
.btns .ion { width: 22px; height: 22px; }
.tabs { position: absolute; bottom: 67px; inset-inline: 19px 20px; z-index: 3; height: 63px; display: flex; align-items: center; gap: 12px; }
.tab-pill { flex: 1; height: 63px; border-radius: 99px; background: #F2F4F3F2; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 12px 30px -10px #00201C4D, inset 0 0 0 1px #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 10px; }
.tab { height: 51px; min-width: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #191C1D; border-radius: 99px; }
.tab .ion { width: 24px; height: 24px; }
.tab.on { background: #D5E4E0; color: #00685D; padding: 0 16px; }
.tab.on b { font-size: 14px; font-weight: 600; }
.tab-add { width: 54px; height: 54px; border-radius: 50%; background: #00685D; color: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 8px 20px -6px #00685D99; }
.tab-add .ion { width: 28px; height: 28px; }

/* A new transaction: the sheet as it opens, then filled in. */
.grab { position: absolute; top: 76px; left: 181px; width: 40px; height: 5px; border-radius: 3px; background: #BCC9C5; }
.eh { position: absolute; top: 88px; inset-inline: 24px; height: 40px; display: flex; align-items: center; gap: 14px; }
.eh b { flex: 1; font-size: 21px; font-weight: 600; }
.cb { width: 40px; height: 40px; border-radius: 50%; background: #E6E8E8; display: grid; place-items: center; transition: background .4s, color .4s; }
.cb .ion { width: 22px; height: 22px; }
.cb.ok { background: #ECEEEE; color: #BCC9C5; }
.entry.ready .cb.ok { background: #00685D; color: #fff; }
.modes { position: absolute; top: 160px; inset-inline: 24px; height: 55px; display: flex; overflow: hidden; background: #fff; border: 1px solid #BCC9C5; border-radius: 12px; }
.modes span { flex: 1; display: grid; justify-items: center; align-content: center; gap: 1px; font-size: 16px; line-height: 21px; }
.modes span + span { border-inline-start: 1px solid #DCE3E1; }
.modes .ion { width: 18px; height: 18px; color: #00685D; }
.modes .on { background: #00685D; color: #fff; }
.modes .on .ion { color: #fff; }
.lh { position: absolute; inset-inline: 24px; height: 32px; display: flex; justify-content: space-between; align-items: center; font-size: 15px; color: #3D4946; }
.lh > .ion { width: 20px; height: 20px; color: #191C1D; }
.paste { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 8px; background: #DDEBE8; color: #00685D; font-weight: 600; }
.paste .ion { width: 16px; height: 16px; }
.det { position: absolute; top: 288px; inset-inline: 24px; height: 119px; padding: 0 18px; }
.det > div { height: 59px; display: flex; align-items: center; gap: 8px; font-size: 16px; color: #3D4946; }
.det > div > span:first-child { flex: 1; }
.det .amt { border-bottom: 1px solid #E1E3E3; }
.det .fwd { width: 16px; height: 16px; color: #191C1D; }
.det .typed { display: inline-flex; align-items: center; gap: 6px; font-size: 20px; font-weight: 700; color: #191C1D; }
.det .typed[hidden], .det .ph[hidden] { display: none; }
.det .typed .sar { width: 13px; height: 14px; color: #3D4946; }
.det .dt { gap: 6px; }
.pill { flex: 0 1 auto; min-width: 0; padding: 6px 12px; border: 1px solid #BCC9C5; border-radius: 8px; background: #fff; font-size: 15px; font-weight: 600; color: #191C1D; white-space: nowrap; max-width: 168px; overflow: hidden; text-overflow: ellipsis; }
.pill.num, .pill.off { flex: none; }
.pill.off { border-color: transparent; background: #EDF3F2; color: #8FB5AF; font-weight: 500; }
.split { position: absolute; top: 438px; inset-inline: 24px; height: 28px; display: flex; align-items: center; gap: 12px; font-size: 17px; }
.split .ion { width: 26px; height: 26px; }
.froms { position: absolute; top: 537px; inset-inline: 24px; height: 56px; display: flex; gap: 10px; }
.froms span { flex: 1; display: grid; justify-items: center; align-content: center; gap: 2px; border: 2px solid transparent; border-radius: 12px; font-size: 14px; font-weight: 600; background: color-mix(in srgb, var(--c) 14%, #fff); }
.froms .ion { width: 20px; height: 20px; color: var(--c); }
.froms .on { border-color: #00685D; background: #DCE8E5; }
.entry .cats { position: absolute; top: 654px; inset-inline: 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px 8px; }
.entry .cat { min-height: 50px; padding: 5px 3px; display: grid; justify-items: center; align-content: center; gap: 4px; text-align: center; border: 2px solid transparent; border-radius: 12px; font-size: 12.5px; font-weight: 600; line-height: 1.2; background: color-mix(in srgb, var(--c) 13%, #fff); transition: border-color .3s, transform .3s var(--ease); }
.entry .cat .ion { width: 20px; height: 20px; color: var(--c); }
.entry .cat.pick { border-color: var(--c); transform: scale(1.04); }
.save { position: absolute; top: 784px; inset-inline: 24px; height: 55px; border-radius: 16px; background: #00685D; color: #fff; opacity: .42; display: grid; place-items: center; font-size: 19px; font-weight: 700; transition: opacity .4s, transform .15s; }
.entry.ready .save { opacity: 1; }
.save.hit { transform: scale(.97); }

/* Reports: the month's total, and where it went. */
.rh { position: absolute; top: 76px; inset-inline: 24px; height: 40px; display: flex; justify-content: space-between; align-items: center; }
.rh b { font-size: 23px; font-weight: 600; }
.rh .btns i { background: #E6E8E8; }
.total { position: absolute; top: 138px; inset-inline: 24px; height: 213px; padding: 0 28px; }
.th { margin-top: 33px; height: 36px; display: flex; justify-content: space-between; align-items: center; font-size: 16px; color: #3D4946; }
.opt { width: 36px; height: 36px; border-radius: 50%; background: #DDEBE8; color: #00685D; display: grid; place-items: center; }
.opt .ion { width: 20px; height: 20px; }
.tv { display: flex; margin-top: 21px; height: 52px; font-size: 44px; font-weight: 700; gap: 4px; }
.tv .sar { width: 30px; height: 34px; }
.per { margin-top: 10px; display: flex; align-items: center; gap: 12px; font-size: 17px; color: #3D4946; }
.per .ion { width: 18px; height: 18px; }
.per .back { color: #00685D; }
.bycat { position: absolute; top: 360px; inset-inline: 24px; height: 640px; padding: 0 28px; }
.bycat .lbl { display: block; margin-top: 20px; font-size: 16px; line-height: 22px; color: #3D4946; }
.donut { position: relative; width: 148px; height: 148px; margin: 24px auto 0; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 16; transition: stroke-dasharray 1.3s var(--ease); }
.donut .mid { position: absolute; inset: 0; justify-content: center; font-size: 17px; gap: 5px; }
.donut .mid .sar { width: 13px; height: 14px; }
.lg { margin-top: 14px; }
.donut + .lg { margin-top: 24px; }
.lg .lr { height: 36px; }
.lg .bar8 { margin-top: 2px; }
.go { width: 32px; height: 32px; border-radius: 50%; background: #DDEBE8; color: #00685D; display: grid; place-items: center; flex: none; }
.go .ion { width: 16px; height: 16px; }
.screen:has(.scene[data-scene="home"].on) .status { color: #fff; }

.neg { color: #BA1A1A; }
.pos { color: #006A62; }

/* The say-it scene. */
.say { position: absolute; inset: 0; background: linear-gradient(180deg, #00201C, #003B35 55%, #00584F); color: #fff; padding: 18% 7% 0; }
.say .quote { font-size: 1.02em; line-height: 1.55; min-height: 4.8em; }
.say .quote .caret { display: inline-block; width: 2px; height: 1em; background: #81F3E5; vertical-align: -.15em; animation: blink 1s steps(2) infinite; }
.wave { display: flex; gap: .22em; align-items: center; justify-content: center; height: 3em; margin: 1em 0; }
.wave i { width: .28em; border-radius: 99px; background: #81F3E5; height: 20%; animation: wave 1s ease-in-out infinite; }
@keyframes wave { 50% { height: 100%; } }
.fill { display: grid; gap: .45em; }
.fill div {
  display: flex; justify-content: space-between; align-items: center;
  background: #ffffff14; border: 1px solid #ffffff22; border-radius: .8em; padding: .55em .8em; font-size: .78em;
  opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s var(--ease);
}
.fill div.in { opacity: 1; transform: none; }
.fill span { opacity: .7; }
.fill b { color: #81F3E5; }
.mic {
  position: absolute; bottom: 7%; left: 50%; transform: translateX(-50%);
  width: 4.2em; height: 4.2em; border-radius: 50%; background: #81F3E5; color: #00201C;
  display: grid; place-items: center;
}
.mic::before, .mic::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #81F3E5; animation: ping 2s var(--ease) infinite; }
.mic::after { animation-delay: 1s; }
@keyframes ping { from { transform: scale(1); opacity: .8; } to { transform: scale(2.1); opacity: 0; } }
.mic svg { width: 1.8em; height: 1.8em; }

/* ─────────────────────────── sections ─────────────────────────── */

section { position: relative; }
.sec { padding-block: clamp(72px, 10vw, 128px); }
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent); font-weight: 700; font-size: 14px; letter-spacing: .02em;
}
.kicker::before { content: ''; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.h2 { font-size: clamp(32px, 4.6vw, 54px); line-height: 1.18; font-weight: 700; margin-block: 14px 16px; letter-spacing: -.01em; }
[lang="ar"] .h2 { line-height: 1.3; letter-spacing: 0; }
.sub { font-size: clamp(17px, 1.6vw, 19px); color: var(--muted); max-width: 60ch; }
.center { text-align: center; }
.center .sub { margin-inline: auto; }
.soon-tag {
  display: inline-block; font-size: 12px; font-weight: 700; vertical-align: middle;
  background: #FABD0026; color: #8A6500; border: 1px solid #FABD0066;
  border-radius: 999px; padding: 2px 10px; margin-inline-start: 8px;
}
@media (prefers-color-scheme: dark) { .soon-tag { color: var(--gold); } }

/* Reveal on scroll — only when script is there to undo it. */
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv.d1 { transition-delay: .08s; } .js .rv.d2 { transition-delay: .16s; } .js .rv.d3 { transition-delay: .24s; }

/* The ribbon of facts under the hero. */
.ribbon { border-block: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.ribbon-track { display: flex; gap: 48px; width: max-content; padding-block: 18px; animation: marquee 38s linear infinite; }
[dir="rtl"] .ribbon-track { animation-name: marquee-rtl; }
.ribbon:hover .ribbon-track { animation-play-state: paused; }
.ribbon span { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--muted); font-weight: 500; }
.ribbon svg { width: 20px; height: 20px; color: var(--accent); }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes marquee-rtl { to { transform: translateX(50%); } }

/* The bento of features. */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin-top: 48px; }
.card {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px; min-height: 250px;
  display: flex; flex-direction: column;
  transition: transform .5s var(--ease), box-shadow .5s, border-color .5s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.card::after { /* the light that follows the pointer */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent 60%);
}
.card:hover::after { opacity: 1; }
.card h3 { font-size: 21px; line-height: 1.35; margin-bottom: 6px; }
.card p { color: var(--muted); font-size: 15.5px; }
.card .art { margin-top: auto; padding-top: 22px; }
.s2 { grid-column: span 2; } .s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s6 { grid-column: span 6; }
@media (max-width: 980px) { .bento { grid-template-columns: repeat(2, 1fr); } .s2, .s3 { grid-column: span 1; } .s4, .s6 { grid-column: span 2; } }
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; } .s2, .s3, .s4, .s6 { grid-column: span 1; } }
.card-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 16px; }
.card-ic svg { width: 24px; height: 24px; }

/* Card art: currencies. */
.fx { display: flex; flex-wrap: wrap; gap: 8px; }
.fx span {
  display: inline-flex; gap: 8px; align-items: center; font-weight: 600; font-size: 14px;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px 6px 6px; background: var(--surface-2);
}
[dir="rtl"] .fx span { padding: 6px 6px 6px 12px; }
.fx i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; color: #fff; background: var(--brand); }
.fx span:nth-child(2) i { background: #1E6BD6; } .fx span:nth-child(3) i { background: #7A4DD8; } .fx span:nth-child(4) i { background: #D88A1E; } .fx span:nth-child(5) i { background: #C2415B; }
.fx-rate { margin-top: 14px; font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.fx-rate b { color: var(--ink); }
.pin { width: 16px; height: 16px; color: var(--accent); }

/* Card art: the bank message becoming an entry. */
.sms { display: grid; gap: 10px; }
.bubble {
  background: var(--surface-3); border-radius: 18px; border-end-start-radius: 6px;
  padding: 10px 14px; font-size: 14px; color: var(--muted); max-width: 92%;
}
.sms .arrow { color: var(--accent); justify-self: center; }
.sms .arrow svg { width: 22px; height: 22px; transform: rotate(90deg); }
.parsed { display: flex; gap: 8px; flex-wrap: wrap; }
.parsed span { background: var(--accent-soft); color: var(--accent); border-radius: 10px; padding: 4px 10px; font-size: 13.5px; font-weight: 600; }
.card.lit .parsed span { animation: pop .5s var(--ease) both; }
.card.lit .parsed span:nth-child(2) { animation-delay: .12s; } .card.lit .parsed span:nth-child(3) { animation-delay: .24s; } .card.lit .parsed span:nth-child(4) { animation-delay: .36s; }
@keyframes pop { from { opacity: 0; transform: scale(.8) translateY(6px); } }

/* Card art: the budget bar — a bar, as the app draws it, never a ring. */
.budget { display: grid; gap: 10px; }
.budget .txt { font-size: 14px; color: var(--muted); display: flex; align-items: baseline; gap: 8px; }
.budget .txt b { font-size: 24px; color: var(--ink); line-height: 1.2; }
.budget .bbar { height: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.budget .bbar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width 1.6s var(--ease); }
.card.in .budget .bbar i, html:not(.js) .budget .bbar i { width: var(--w); }
.budget .today { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.pill-calm { display: inline-block; font-size: 12px; font-weight: 700; background: var(--accent-soft); color: var(--accent); border-radius: 99px; padding: 2px 10px; }

/* Card art: recurring. */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; direction: ltr; }
.cal i { aspect-ratio: 1; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; font-style: normal; font-size: 11px; color: var(--faint); }
.cal i.m { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.card.lit .cal i.m { animation: pop .5s var(--ease) both; }

/* Card art: split. */
.split-art { display: flex; align-items: center; gap: 12px; }
.bill { flex: 1; border: 1.5px dashed var(--line); border-radius: 16px; padding: 12px; text-align: center; }
.bill b { font-size: 22px; display: block; }
.bill small { color: var(--faint); }
.shares { display: grid; gap: 6px; flex: 1.2; }
.shares div { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; flex: none; }
.shares b { margin-inline-start: auto; }

/* Card art: export. */
.files { display: flex; gap: 14px; }
.file {
  width: 86px; height: 104px; border-radius: 12px; position: relative; background: var(--surface-2);
  border: 1px solid var(--line); padding: 34px 10px 10px; display: grid; gap: 6px; align-content: start;
  transition: transform .5s var(--ease);
}
.file::before { content: attr(data-kind); position: absolute; top: 8px; inset-inline-start: 8px; font-size: 11px; font-weight: 800; color: #fff; background: var(--k); border-radius: 6px; padding: 1px 6px; }
.file i { height: 6px; border-radius: 3px; background: var(--line); }
.file i:nth-child(2) { width: 70%; } .file i:nth-child(3) { width: 85%; }
.card:hover .file:nth-child(1) { transform: rotate(-6deg) translateY(-4px); }
.card:hover .file:nth-child(2) { transform: rotate(5deg) translateY(-8px); }
.card:hover .file:nth-child(3) { transform: rotate(-2deg) translateY(-2px); }

/* Card art: lock. */
.face { width: 96px; height: 96px; margin-inline: auto; color: var(--accent); }
.face path, .face rect { stroke-dasharray: 60; stroke-dashoffset: 60; }
.card.lit .face path, .card.lit .face rect { animation: draw 1.2s var(--ease) forwards; }
.card.lit .face path:nth-child(n+5) { animation-delay: .5s; }

/* Card art: due. */
.dues { display: grid; gap: 8px; }
.dues div { display: flex; align-items: center; gap: 10px; font-size: 14px; background: var(--surface-2); border-radius: 12px; padding: 8px 12px; }
.dues .bell { width: 18px; height: 18px; color: var(--gold); flex: none; }
.card.lit .dues .bell { animation: ring 1.4s .4s ease-in-out 2; transform-origin: top center; }
@keyframes ring { 10%, 30% { transform: rotate(14deg); } 20%, 40% { transform: rotate(-14deg); } 50% { transform: none; } }
.dues b { margin-inline-start: auto; }
.dues small { color: var(--faint); display: block; font-size: 12px; }

/* Card art: keypad. */
.mini-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; direction: ltr; max-width: 220px; }
.mini-pad i { height: 34px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; font-style: normal; font-weight: 600; }
.card.lit .mini-pad i.h { animation: tap .5s ease both; }
@keyframes tap { 40% { background: var(--mint); color: var(--deep); transform: scale(.92); } }

/* ─── the split screen sections (people, shared, say-it, friends) ─── */

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.duo.flip > :first-child { order: 2; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; } .duo.flip > :first-child { order: 0; } }
.points { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.points li { display: flex; gap: 14px; align-items: flex-start; }
.points li svg { width: 22px; height: 22px; color: var(--accent); flex: none; margin-top: 4px; }
.points b { display: block; }
.points span { color: var(--muted); font-size: 15.5px; }

.panel {
  position: relative; border-radius: var(--r-lg); padding: clamp(20px, 3vw, 32px);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.panel.deep { background: linear-gradient(160deg, #003B35, #00201C); color: #fff; border-color: #ffffff1a; }

/* People. */
.people { display: grid; gap: 10px; }
.person {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2);
  transform: translateX(0); opacity: 1;
}
.js .people .person { opacity: 0; transform: translateX(-24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js [dir="rtl"] .people .person, [dir="rtl"] .js .people .person { transform: translateX(24px); }
.people.in .person { opacity: 1 !important; transform: none !important; }
.people.in .person:nth-child(2) { transition-delay: .1s; } .people.in .person:nth-child(3) { transition-delay: .2s; } .people.in .person:nth-child(4) { transition-delay: .3s; }
.person .av { width: 42px; height: 42px; font-size: 16px; }
.person .t { flex: 1; }
.person .t small { display: block; color: var(--faint); font-size: 13px; }
.person .a { font-weight: 700; font-size: 17px; }
.net-line { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line); font-weight: 600; }

/* Shared accounts: the trip, and who pays whom. */
.trip-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.trip-head b { font-size: 19px; }
.trip-head small { display: block; opacity: .7; font-size: 13px; }
.avs { display: flex; }
.avs .av { width: 34px; height: 34px; border: 2px solid #00201C; margin-inline-start: -8px; }
.settle { position: relative; height: 210px; }
.settle svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.settle .node { position: absolute; display: grid; justify-items: center; gap: 6px; font-size: 13px; transform: translate(-50%, -50%); }
[dir="rtl"] .settle .node { transform: translate(50%, -50%); }
.settle .node .av { width: 52px; height: 52px; font-size: 18px; box-shadow: 0 0 0 4px #ffffff14; }
.settle path { fill: none; stroke: #81F3E5; stroke-width: 2; stroke-dasharray: 6 8; animation: flow 1.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -28; } }
.settle .tag { position: absolute; transform: translate(-50%, -50%); background: #81F3E5; color: #00201C; font-weight: 700; font-size: 13px; border-radius: 99px; padding: 2px 10px; white-space: nowrap; }
[dir="rtl"] .settle .tag { transform: translate(50%, -50%); }
.trip-foot { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 14px; border-top: 1px solid #ffffff1f; font-size: 14px; opacity: .9; }

/* Say it: the phone again, on its own stage. */
.stage-dark {
  background: radial-gradient(100% 80% at 50% 0%, #00584F 0%, #00201C 70%);
  color: #fff; overflow: hidden;
}
.stage-dark .sub, .stage-dark .points span { color: #B6D6D0; }
.stage-dark .kicker, .stage-dark .points li svg { color: var(--mint); }
.stage-dark .phone { --n: 290; margin-inline: auto; }

/* Friends: two phones and the notice between them. */
.friends-art { position: relative; height: 340px; }
.notice {
  position: absolute; width: min(320px, 88%); background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 16px; box-shadow: var(--shadow);
  display: grid; gap: 10px;
}
.notice .who { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--faint); }
.notice .who .av { width: 30px; height: 30px; }
.notice p { font-weight: 600; font-size: 16px; }
.notice .acts { display: flex; gap: 8px; }
.notice .acts span { flex: 1; text-align: center; border-radius: 12px; padding: 7px; font-size: 14px; font-weight: 600; }
.notice .acts .ok { background: var(--accent); color: var(--on-accent); }
.notice .acts .no { background: var(--surface-3); }
.notice.n1 { top: 6%; inset-inline-start: 0; }
.notice.n2 { bottom: 4%; inset-inline-end: 0; }
.js .friends-art .notice { opacity: 0; transition: opacity .7s var(--ease), transform .9s var(--ease); }
.js .friends-art .notice.n1 { transform: translateY(20px) rotate(-2deg); }
.js .friends-art .notice.n2 { transform: translateY(-30px) scale(.94); }
.friends-art.in .notice { opacity: 1 !important; transform: none !important; }
.friends-art.in .notice.n2 { transition-delay: .7s; }
.friends-art .link-line { position: absolute; inset: 0; width: 100%; height: 100%; }
.friends-art .link-line path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 7; opacity: .6; animation: flow 1.4s linear infinite; }
.paper { position: absolute; top: 44%; left: 50%; width: 38px; height: 38px; margin: -19px; border-radius: 12px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; box-shadow: 0 10px 24px -8px var(--accent); }
.paper svg { width: 20px; height: 20px; }
.friends-art.in .paper { animation: fly 3.2s var(--ease) infinite; }
@keyframes fly { 0% { transform: translate(-90px, -90px) scale(.6); opacity: 0; } 20% { opacity: 1; } 70% { transform: translate(80px, 80px) scale(1); opacity: 1; } 100% { transform: translate(90px, 90px) scale(.6); opacity: 0; } }
[dir="rtl"] .friends-art.in .paper { animation-name: fly-rtl; }
@keyframes fly-rtl { 0% { transform: translate(90px, -90px) scale(.6); opacity: 0; } 20% { opacity: 1; } 70% { transform: translate(-80px, 80px) scale(1); opacity: 1; } 100% { transform: translate(-90px, 90px) scale(.6); opacity: 0; } }

/* Grow: the calculator. */
.grow { background: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--gold) 7%, var(--bg))); }
.calc { display: grid; gap: 22px; }
.ctl label { display: flex; justify-content: space-between; font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.ctl label output { color: var(--accent); font-variant-numeric: tabular-nums; }
.choices { display: flex; gap: 8px; flex-wrap: wrap; }
.choices button {
  flex: 1; min-width: 88px; min-height: 44px; border: 1px solid var(--line); background: var(--surface-2);
  border-radius: 12px; padding: 8px 10px; cursor: pointer; font-weight: 600; font-size: 14px;
  transition: background .2s, color .2s, border-color .2s;
}
.choices button small { display: block; font-weight: 500; opacity: .75; font-size: 12px; }
.choices button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
input[type=range] { width: 100%; accent-color: var(--brand); height: 28px; }
.result { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.result div { background: var(--surface-2); border-radius: 16px; padding: 12px 14px; min-width: 0; }
@media (max-width: 520px) { .result { grid-template-columns: 1fr 1fr; } .result .big { grid-column: span 2; order: -1; } }
.result small { display: block; color: var(--faint); font-size: 13px; }
.result b { font-size: 20px; white-space: nowrap; }
.result .big b { color: var(--accent); font-size: 22px; }
.chart { width: 100%; height: 200px; }
.chart .area { fill: url(#growFill); }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; }
.chart .base { fill: none; stroke: var(--faint); stroke-width: 2; stroke-dasharray: 4 6; }
.disclaimer { font-size: 13.5px; color: var(--faint); border-inline-start: 3px solid var(--gold); padding-inline-start: 12px; margin-top: 18px; }
.rate-line { font-size: 14px; color: var(--muted); min-height: 3em; }

/* The reel: the app in one minute, like a film with chapters. */
.reel { background: var(--deep); color: #fff; overflow: hidden; }
.reel .sub { color: #B6D6D0; }
.reel .kicker { color: var(--mint); }
.reel-in { display: grid; grid-template-columns: 1fr auto; gap: clamp(32px, 6vw, 96px); align-items: center; }
@media (max-width: 900px) { .reel-in { grid-template-columns: 1fr; } }
.reel .phone { --n: 320; }
@media (max-width: 420px) { .reel .phone, .hero .phone { --n: 270; } }
.chapters { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 6px; }
.chapters button {
  width: 100%; text-align: start; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center;
  background: none; border: 0; border-radius: 16px; padding: 14px 16px; cursor: pointer; color: #B6D6D0;
  transition: background .3s, color .3s;
}
.chapters button:hover { background: #ffffff0d; }
.chapters button[aria-current="true"] { background: #ffffff14; color: #fff; }
.chapters .n { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #ffffff33; display: grid; place-items: center; font-size: 14px; grid-row: span 2; }
.chapters button[aria-current="true"] .n { background: var(--mint); color: var(--deep); border-color: var(--mint); }
.chapters b { font-size: 17px; }
.chapters small { font-size: 14px; opacity: .85; }
.chapters .prog { grid-column: 2; height: 3px; background: #ffffff1f; border-radius: 99px; overflow: hidden; }
.chapters .prog i { display: block; height: 100%; width: 0; background: var(--mint); }
.reel-ctl { display: flex; gap: 10px; margin-top: 18px; }
.reel-ctl button {
  display: inline-flex; align-items: center; gap: 8px; background: #ffffff14; border: 1px solid #ffffff2a;
  border-radius: 999px; padding: 8px 16px; min-height: 44px; cursor: pointer; color: #fff; font-weight: 600; font-size: 14px;
}
.reel-ctl svg { width: 16px; height: 16px; }

/* Privacy band. */
.privacy { background: #0B1211; color: #DEE4E2; overflow: hidden; }
.privacy .sub { color: #9FB2AE; }
.privacy .kicker { color: var(--mint); }
.vault { position: relative; width: min(360px, 80vw); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; }
.vault .orbit { position: absolute; inset: 0; border-radius: 50%; border: 1px solid #81F3E526; }
.vault .orbit.o2 { inset: 14%; border-style: dashed; animation: spin 40s linear infinite; }
.vault .orbit.o3 { inset: 28%; border-color: #81F3E540; }
.vault .core {
  width: 36%; aspect-ratio: 1; border-radius: 30%; display: grid; place-items: center;
  background: linear-gradient(145deg, #00685D, #003B35); box-shadow: 0 0 80px -10px #81F3E599, inset 0 1px 0 #ffffff33;
}
.vault .core svg { width: 46%; height: 46%; color: #fff; }
.vault .sat {
  position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px; border-radius: 14px;
  background: #16201F; border: 1px solid #81F3E533; display: grid; place-items: center; color: var(--mint);
  animation: orbit 24s linear infinite;
}
.vault .sat svg { width: 20px; height: 20px; }
.vault .sat:nth-child(5) { animation-delay: -8s; } .vault .sat:nth-child(6) { animation-delay: -16s; }
@keyframes orbit { from { transform: rotate(0) translateX(min(160px, 36vw)) rotate(0); } to { transform: rotate(360deg) translateX(min(160px, 36vw)) rotate(-360deg); } }
.leaves { display: grid; gap: 12px; margin-top: 28px; }
.leaves div { display: flex; gap: 12px; align-items: flex-start; background: #ffffff08; border: 1px solid #ffffff12; border-radius: 16px; padding: 14px 16px; }
.leaves svg { width: 20px; height: 20px; color: var(--mint); flex: none; margin-top: 3px; }
.leaves b { display: block; color: #fff; }
.leaves span { font-size: 15px; color: #9FB2AE; }
.nots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.nots span { border: 1px solid #ffffff22; border-radius: 999px; padding: 6px 14px; font-size: 14px; display: inline-flex; gap: 8px; align-items: center; }
.nots svg { width: 14px; height: 14px; color: #FFB4AB; }

/* Free. */
.free { text-align: center; overflow: hidden; }
.free .big0 {
  font-size: clamp(96px, 16vw, 200px); font-weight: 700; line-height: 1; letter-spacing: -.04em;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 20%, transparent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Questions. */
.faq { max-width: 820px; margin: 40px auto 0; display: grid; gap: 12px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; transition: border-color .3s, box-shadow .3s; }
.faq details[open] { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: var(--shadow); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 600; font-size: 17px; display: flex; gap: 16px; align-items: center; min-height: 56px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; margin-inline-start: auto; width: 10px; height: 10px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg) translateY(-3px); transition: transform .3s var(--ease); flex: none; }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq .ans { padding: 0 22px 20px; color: var(--muted); }

/* The last call. */
.final { position: relative; overflow: hidden; color: #fff; text-align: center; background: radial-gradient(90% 120% at 50% 110%, #00A38F 0%, #00584F 35%, #00201C 80%); }
.final .mark-big { width: 104px; height: 104px; margin: 0 auto 26px; border-radius: 24px; background: #fff; display: grid; place-items: center; box-shadow: 0 30px 60px -20px #000a; }
.final .mark-big svg { width: 100%; height: 100%; }
.final .mark-big rect.bar-l { transform-origin: center; transform: scaleX(0); transition: transform 1s var(--ease); }
.final .mark-big circle { transform: translateY(-120px); opacity: 0; transition: transform .9s .6s cubic-bezier(.34, 1.56, .64, 1), opacity .3s .6s; }
.final.in .mark-big rect.bar-l { transform: none; }
.final.in .mark-big circle { transform: none; opacity: 1; }
.final .sub { color: #CFE7E2; margin-inline: auto; }
.final .hero-cta { justify-content: center; }

/* Footer. */
footer { background: var(--surface); border-top: 1px solid var(--line); padding-block: 56px 32px; font-size: 15px; }
.foot { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
@media (max-width: 760px) { .foot { grid-template-columns: 1fr 1fr; } .foot > :first-child { grid-column: span 2; } }
.foot .logo { color: var(--accent); }
.foot p { color: var(--muted); margin-top: 12px; max-width: 34ch; }
.foot h4 { margin: 0 0 12px; font-size: 14px; color: var(--faint); font-weight: 600; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.foot a { text-decoration: none; color: var(--ink); }
.foot a:hover { color: var(--accent); }
.foot .social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.foot .social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); color: var(--muted); transition: color .2s, border-color .2s; }
.foot .social a:hover, .foot .social a:focus-visible { color: var(--accent); border-color: var(--accent); }
.foot .social svg { width: 20px; height: 20px; }
.copy { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--faint); font-size: 14px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ─────────────────────────── documents ─────────────────────────── */

.doc-hero { background: radial-gradient(120% 120% at 80% 0%, #00584F, #00201C 70%); color: #fff; padding: 128px 0 56px; position: relative; overflow: hidden; isolation: isolate; }
.doc-hero h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.25; }
.doc-hero .meta { margin-top: 12px; color: #B6D6D0; }
.doc-body { max-width: 780px; margin-inline: auto; padding: 48px var(--gutter) 96px; }
.gist { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; margin-top: -84px; position: relative; box-shadow: var(--shadow); }
.gist h2 { font-size: 18px; margin-bottom: 14px; color: var(--accent); }
.gist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.gist li { display: flex; gap: 12px; }
.gist li svg { width: 22px; height: 22px; color: var(--accent); flex: none; margin-top: 3px; }
.gist b { display: block; }
.gist span { color: var(--muted); font-size: 15.5px; }
.doc-body ol { padding-inline-start: 1.4em; margin: 40px 0 0; display: grid; gap: 18px; }
.doc-body ol li { padding-inline-start: .4em; }
.doc-body ol li::marker { color: var(--accent); font-weight: 700; }
.doc-foot { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--faint); font-size: 15px; display: grid; gap: 6px; }
.doc-foot a { color: var(--accent); }
.prev-note { margin-top: 20px; background: #FABD001A; border: 1px solid #FABD0055; border-radius: 16px; padding: 14px 16px; font-size: 15px; }
.prev-note a { color: var(--accent); font-weight: 600; }
.support-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.support-list li { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; }
.support-list b { display: block; margin-bottom: 4px; }
.support-list span { color: var(--muted); }
.mail-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; background: var(--brand); color: #fff; text-decoration: none; font-weight: 600; border-radius: 14px; padding: 14px 22px; }
.mail-cta svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
  .hero { padding-block: 112px 64px; }
  .hero-in { grid-template-columns: 1fr; text-align: center; }
  .hero .lede { margin-inline: auto; }
  .hero-cta, .hero-notes { justify-content: center; }
  /* One column: the chips leave the phone's sides, where they covered its
     frame, and sit above and below it instead. */
  .hero-stage {
    min-height: 0; margin-top: 12px; padding-block: 8px;
    grid-template-columns: auto auto; justify-content: center; gap: 28px 12px;
  }
  .hero-stage .phone { grid-column: 1 / -1; grid-row: 2; }
  .chip { position: relative; inset: auto; }
  .chip.c1 { grid-column: 1 / -1; grid-row: 1; }
  .chip.c2, .chip.c3 { grid-row: 3; }
  .ring-lines { width: 520px; height: 520px; }
}
@media (max-width: 520px) {
  .chip { font-size: 12px; padding: 8px 10px; }
  .chip .dot { width: 28px; height: 28px; }
  .chip.c2 { display: none; }
  .chip.c3 { grid-column: 1 / -1; }
  .halo { width: 360px; height: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
  .rain, .aurora { display: none; }
}

/* Shared account: what each member is owed or owes, around a zero line. */
.settle-bars { display: grid; gap: 14px; margin-block: 8px 4px; }
.sb { display: grid; grid-template-columns: 34px 64px 1fr 76px; align-items: center; gap: 10px; font-size: 14px; }
.sb .av { width: 34px; height: 34px; border: 0; margin: 0; }
.sb .axis { position: relative; height: 10px; border-radius: 99px; background: #ffffff14; }
.sb .axis::before { content: ''; position: absolute; inset-block: -5px; inset-inline-start: 50%; width: 2px; background: #ffffff55; }
.sb .axis i { position: absolute; top: 0; bottom: 0; width: 0; border-radius: 99px; transition: width 1.2s var(--ease); }
.sb .axis i.up { inset-inline-start: 50%; background: var(--mint); }
.sb .axis i.dn { inset-inline-end: 50%; background: #FFB4AB; }
.settle-bars.in .axis i { width: var(--w); }
.settle-bars.in .sb:nth-child(2) .axis i { transition-delay: .12s; } .settle-bars.in .sb:nth-child(3) .axis i { transition-delay: .24s; } .settle-bars.in .sb:nth-child(4) .axis i { transition-delay: .36s; }
.sb b { text-align: end; }
.sb b.up { color: var(--mint); } .sb b.dn { color: #FFB4AB; }
html:not(.js) .settle-bars .axis i { width: var(--w); }

.bar:not(.solid) .logo { --logo-cut: #013E37; }
.bar.solid .logo { --logo-cut: var(--bg); }
footer .logo { --logo-cut: var(--surface); }
.doc-hero ~ * .logo, .bar .logo { color: inherit; }
.bar.solid .logo { color: var(--accent); }
.scene.dark { background: #00201C; }
.screen:has(.scene.dark.on) .status { color: #fff; }
.person .neg, .net-line .neg { color: var(--neg); }
.person .pos, .net-line .pos { color: var(--pos); }
.hero .phone { --n: 318; }

[dir="rtl"] .leaves svg, [dir="rtl"] .ghost-arrow { transform: scaleX(-1); }
.phone .screen { text-align: start; }
@media (max-width: 900px) {
  .reel-in > .phone { order: -1; margin-inline: auto; }
  .chapters { margin-top: 20px; }
  .chapters small { display: none; }
  .chapters button { padding: 10px 12px; }
}
.amount .v { direction: ltr; }

/* ─────────────────────── the invitation page ─────────────────────── */

.invite { background: #00201C; }
.invite .bar { color: #fff; }
.inv {
  min-height: 100svh; display: grid; place-items: center; position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 120% at 80% 0%, #00584F, #00201C 70%); color: #fff;
  padding: 104px var(--gutter) 48px;
}
.inv-card { width: min(560px, 100%); display: grid; gap: 18px; }
.inv .kicker { color: var(--mint); }
.inv h1 { font-size: clamp(30px, 6vw, 44px); line-height: 1.25; }
.inv-lede { color: #B6D6D0; font-size: 17px; }
.inv-open {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; margin-top: 8px;
  background: var(--mint); color: #00201C; text-decoration: none; font-weight: 700; font-size: 18px; border-radius: 16px;
}
.inv-open svg { width: 20px; height: 20px; }
[dir="rtl"] .inv-open svg { transform: scaleX(-1); }
.inv-code {
  margin-top: 16px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px;
  background: #ffffff0f; border: 1px solid #ffffff24; border-radius: 16px; padding: 14px 16px;
}
.inv-label { grid-column: 1 / -1; font-size: 13px; color: #B6D6D0; }
.inv-code b { font-size: 30px; letter-spacing: .14em; font-variant-numeric: tabular-nums; font-family: ui-monospace, 'SF Mono', Menlo, monospace; justify-self: start; }
.inv-code button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-inline: 14px;
  background: none; border: 1px solid #ffffff40; border-radius: 12px; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.inv-code button svg { width: 16px; height: 16px; }
.inv-code button:hover { background: #ffffff14; }
.inv-hint { font-size: 14px; color: #B6D6D0; }
.inv-bad { background: #BA1A1A2e; border: 1px solid #FFB4AB66; color: #FFDAD6; border-radius: 14px; padding: 14px 16px; }
.inv-foot { margin-top: 28px; padding-top: 24px; border-top: 1px solid #ffffff1f; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; color: #B6D6D0; font-size: 15px; }
.inv-home { margin-inline-start: auto; color: var(--mint); font-weight: 600; text-decoration: none; }
.prev-note .when { display: inline-block; margin-bottom: 6px; margin-inline-end: 6px; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 1px 10px; }
.prev-note .when.now { background: var(--accent); color: var(--on-accent); }
.prev-note .when.soon { background: #FABD0040; }
.prev-note .when.past { background: var(--surface-3); color: var(--muted); }