/* Alpha Wealth — the website. "The book itself."
   Ink cover and part-openers, paper pages, brass only where the app uses it:
   the binding, the seal, the full stop. Ledger green/red for money direction only.
   Fonts are the app's three faces; nothing here is a fourth. */

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Amiri:wght@400;700&family=Tiro+Devanagari+Hindi&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Sans+Arabic:wght@400;500;600&family=IBM+Plex+Sans+Devanagari:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --ink: #14231e;
  --ink-2: #1d312a;
  --ink-3: #26382f;
  --paper: #f4f3ee;
  --paper-2: #ebe9e1;
  --card: #ffffff;
  --brass: #9c7b33;
  --brass-2: #c9a75c;
  --brass-soft: #f0e9d8;
  --brass-ink: #6d5620;
  --income: #1e6b4f;
  --income-soft: #e4efe9;
  --expense: #9e3a3f;
  --expense-soft: #f5e7e7;
  --amber-soft: #f5eeda;
  --amber-ink: #8a6d1f;
  --text: #29322e;
  --muted: #6f7772;
  --hairline: #dcd9cf;
  --on-ink: #f4f3ee;
  --on-ink-muted: #9fb0a8;
  --on-ink-hair: #3c5049;
  --display: 'Marcellus', 'Times New Roman', serif;
  --body: 'IBM Plex Sans', 'IBM Plex Sans Arabic', 'IBM Plex Sans Devanagari', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --pz: .86;               /* phone zoom, per context */
  --gutter: clamp(20px, 5vw, 72px);
  --spine-x: 30px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body); color: var(--text); background: var(--paper);
  line-height: 1.55; font-size: 17px; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--brass-soft); color: var(--ink); }

/* ───────────────────────── type ───────────────────────── */
h1, h2, h3, .display { font-family: var(--display); font-weight: 400; letter-spacing: 0; }
.mono, .amt { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.eyebrow {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass);
  font-weight: 500;
}
.lede { font-size: 20px; line-height: 1.5; color: var(--muted); }
strong { font-weight: 600; color: var(--ink); }
.ink strong { color: var(--on-ink); }
.in { color: var(--income); } .out { color: var(--expense); }

/* ───────────────────────── tones ───────────────────────── */
.ink { background: var(--ink); color: var(--on-ink); }
.ink .muted, .ink .lede { color: var(--on-ink-muted); }
.paper { background: var(--paper); color: var(--text); }
.wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }

/* the wordmark, brass full stop always */
.wordmark { font-family: var(--display); letter-spacing: .005em; direction: ltr; unicode-bidi: isolate; }
.wordmark i { font-style: normal; color: var(--brass); }

/* ───────────────────────── nav ───────────────────────── */
.nav {
  position: fixed; inset-inline: 0; inset-block-start: 0; z-index: 50;
  display: flex; align-items: center; gap: 28px;
  padding: 14px var(--gutter);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s;
  color: var(--on-ink);
  border-block-end: 1px solid transparent;
}
.nav.on-paper { color: var(--ink); background: rgba(244,243,238,.86); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-color: var(--hairline); }
.nav.on-ink { color: var(--on-ink); background: rgba(20,35,30,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: rgba(255,255,255,.06); }
.nav.top { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: transparent; }
.nav .wordmark { font-size: 24px; margin-inline-end: auto; }
.nav ul { display: flex; gap: 22px; list-style: none; font-size: 14.5px; }
.nav ul a { opacity: .78; padding-block: 6px; border-block-end: 1px solid transparent; transition: opacity .2s, border-color .2s; }
.nav ul a:hover, .nav ul a[aria-current] { opacity: 1; border-color: currentColor; }
.nav .lang { font-size: 13px; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid currentColor; border-radius: 999px; }
.nav .lang a { padding: 4px 10px; border-radius: 999px; opacity: .72; line-height: 1.2; }
.nav .lang a[lang="ar"] { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.nav .lang a[lang="hi"] { font-family: 'IBM Plex Sans Devanagari', sans-serif; }
.nav .lang a:hover { opacity: 1; }
.nav .lang a[aria-current] { opacity: 1; background: currentColor; }
.nav .lang a[aria-current] { color: var(--ink); background: var(--on-ink); }
.nav.on-paper .lang a[aria-current] { color: var(--paper); background: var(--ink); }
.nav ul .m-lang { display: none; }
.nav .cta { font-size: 14px; font-weight: 500; padding: 10px 16px; border-radius: 10px; background: currentColor; }
.nav .cta b { font-weight: 500; }
.nav.on-ink .cta b, .nav.top .cta b { color: var(--ink); }
.nav.on-paper .cta b { color: var(--paper); }
.nav .burger { display: none; width: 40px; height: 40px; border-radius: 10px; }
.nav .burger i { display: block; width: 18px; height: 1.5px; background: currentColor; margin: 4px auto; }
@media (max-width: 960px) {
  .nav { gap: 14px; }
  .nav ul { position: fixed; inset: 0; background: var(--ink); color: var(--on-ink); flex-direction: column; justify-content: center; align-items: center; gap: 22px; font-size: 26px; font-family: var(--display); transform: translateY(-100%); transition: transform .45s var(--ease); z-index: -1; }
  .nav.open ul { transform: none; }
  .nav .burger { display: block; }
  .nav .lang { display: none; }
  .nav ul .m-lang { display: flex; gap: 18px; font-family: var(--body); font-size: 15px; margin-block-start: 10px; }
  .nav ul .m-lang a[aria-current] { border-block-end: 1px solid var(--brass); }
}


/* ───────────────────────── Arabic and Hindi editions ─────────────────────────
   Marcellus has no Arabic or Devanagari, so each edition brings its own display
   face — Amiri (a Naskh with the same classical calm) and Tiro Devanagari Hindi.
   Joined and matra-bearing scripts must never be letter-spaced, and both want
   more leading than Latin. Numbers stay in Plex Mono, Western digits, always. */
html[lang="ar"] { --display: 'Amiri', 'Noto Naskh Arabic', serif; --body: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif; }
html[lang="hi"] { --display: 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', serif; --body: 'IBM Plex Sans Devanagari', 'IBM Plex Sans', system-ui, sans-serif; }
html[lang="ar"] :where(*:not(.mono):not(.amt):not(.amount):not(code):not(pre)), html[lang="hi"] :where(*:not(.mono):not(.amt):not(.amount):not(code):not(pre)) { letter-spacing: 0; }
html[lang="ar"] .wordmark, html[lang="hi"] .wordmark { font-family: 'Marcellus', serif; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { line-height: 1.32; }
html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3 { line-height: 1.34; }
html[lang="ar"] .cover h1, html[lang="hi"] .cover h1 { line-height: 1.28; }
html[lang="ar"] .part h2, html[lang="hi"] .part h2 { line-height: 1.22; }
html[lang="ar"] .backcover h2, html[lang="hi"] .backcover h2 { line-height: 1.24; }
html[lang="ar"] .step, html[lang="hi"] .step, html[lang="ar"] .lede, html[lang="hi"] .lede, html[lang="ar"] p, html[lang="hi"] p { line-height: 1.75; }
html[lang="ar"] .eyebrow, html[lang="ar"] .part .num, html[lang="ar"] .section-label, html[lang="hi"] .eyebrow, html[lang="hi"] .part .num, html[lang="hi"] .section-label { text-transform: none; font-weight: 500; }
html[lang="ar"] .folio { writing-mode: vertical-rl; transform: none; }
html[lang="hi"] .folio { writing-mode: vertical-rl; transform: rotate(180deg); }
/* Amiri sits small on the line — give the display sizes a nudge */
html[lang="ar"] .cover h1 { font-size: clamp(40px, 4.6vw, 68px); }
html[lang="ar"] .chapter h2 { font-size: clamp(32px, 3.5vw, 50px); }
html[lang="ar"] .part h2 { font-size: clamp(46px, 6vw, 84px); }
html[lang="ar"] .page-head h1 { font-size: clamp(38px, 4.9vw, 66px); }
html[lang="hi"] .page-head h1, html[lang="hi"] .cover h1 { font-size: clamp(36px, 4.2vw, 60px); }
/* charts read left→right in every language: the line and its axis stay LTR */
html[lang="ar"] .curve, html[lang="ar"] .axis, html[lang="ar"] .yb .bars, html[lang="ar"] .yb .months, html[lang="ar"] .yb2 .rowl { direction: ltr; }
/* mono figures inside RTL text keep their own direction */
html[lang="ar"] .amount, html[lang="ar"] .amt, html[lang="ar"] .mono, html[lang="ar"] .code, html[lang="ar"] .kv > :last-child, html[lang="ar"] .bignum, html[lang="ar"] .n-amt { direction: ltr; unicode-bidi: isolate; }

/* ───────────────────────── the spine + folio (signature) ───────────────────────── */
.spine {
  position: fixed; inset-block: 0; inset-inline-start: var(--spine-x); width: 1px; z-index: 40;
  background: rgba(156,123,51,.22); pointer-events: none;
}
.spine i {
  position: absolute; inset-inline-start: -.5px; inset-block-start: 0; width: 2px; height: 100%;
  background: linear-gradient(180deg, var(--brass), var(--brass-2) 50%, var(--brass));
  transform: scaleY(var(--progress, 0)); transform-origin: top; will-change: transform;
}
.folio {
  /* physical offsets on purpose: the folio's own writing mode is vertical, so logical insets would swap axes */
  position: fixed; left: calc(var(--spine-x) + 10px); bottom: 28px; z-index: 40;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); pointer-events: none;
  display: flex; align-items: center; gap: 10px; opacity: 0; transition: opacity .4s;
  writing-mode: vertical-rl; transform: rotate(180deg); max-height: 44vh; overflow: hidden; white-space: nowrap;
}
[dir="rtl"] .folio { left: auto; right: calc(var(--spine-x) + 10px); }
.folio.show { opacity: 1; }
.folio b { font-family: var(--display); font-weight: 400; color: var(--brass); font-size: 15px; text-transform: none; letter-spacing: .04em; }
.folio.on-ink { color: var(--on-ink-muted); }
@media (max-width: 960px) { .spine, .folio { display: none; } }

/* ───────────────────────── cover (hero) ───────────────────────── */
.cover { position: relative; min-height: 100svh; display: grid; align-items: center; padding-block: 132px 60px; overflow: hidden; }
.cover .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.cover h1 { font-size: clamp(38px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -.005em; text-wrap: balance; }
.cover h1 i { font-style: normal; color: var(--brass); }
.cover .lede { margin-block-start: 26px; max-width: 34ch; font-size: clamp(18px, 1.5vw, 21px); }
.cover .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 34px; align-items: center; }
.cover .quiet { margin-block-start: 30px; font-size: 13.5px; color: var(--on-ink-muted); display: flex; flex-wrap: wrap; gap: 8px 22px; }
.cover .quiet span::before { content: '◉'; color: var(--brass); font-size: 8px; vertical-align: 2px; margin-inline-end: 8px; }
.cover .phone-col { display: flex; justify-content: center; position: relative; }
.cover .phone-col::before {
  /* the one soft thing on the cover: a paper glow behind the phone, like a lamp on a desk */
  content: ''; position: absolute; inset: 10% -10% -10%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(244,243,238,.10), transparent 70%);
  pointer-events: none;
}
.cover .scroll-hint { position: absolute; inset-inline-start: 50%; inset-block-end: 26px; transform: translateX(-50%); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink-muted); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cover .scroll-hint i { width: 1px; height: 34px; background: linear-gradient(var(--brass), transparent); animation: drip 2.2s var(--ease) infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 960px) {
  .cover { padding-block: 108px 72px; }
  .cover .wrap { grid-template-columns: 1fr; }
  .cover .phone-col { order: 2; margin-block-start: 28px; --pz: .74; }
  .cover .scroll-hint { display: none; }
}

/* store buttons — drawn as type, no trademark art in a mockup */
.store {
  display: inline-flex; align-items: center; gap: 10px; border-radius: 12px; padding-block: 12px; padding-inline: 14px 18px;
  border: 1px solid transparent; line-height: 1.1; transition: transform .25s var(--ease), background .25s;
}
.store:hover { transform: translateY(-1px); }
.store small { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.store b { display: block; font-weight: 500; font-size: 16px; }
.store .glyph { font-size: 22px; line-height: 1; }
.ink .store { background: var(--paper); color: var(--ink); }
.ink .store.ghost { background: transparent; color: var(--on-ink); border-color: var(--on-ink-hair); }
.paper .store { background: var(--ink); color: var(--paper); }
.paper .store.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.textlink { font-size: 14.5px; opacity: .8; border-block-end: 1px solid currentColor; padding-block-end: 1px; }
.textlink:hover { opacity: 1; }

/* ───────────────────────── part opener (ink strip) ───────────────────────── */
.part {
  position: relative; padding-block: clamp(96px, 14vw, 180px) clamp(72px, 10vw, 140px);
  overflow: hidden;
}
.part .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: end; }
.part .num { font-family: var(--display); font-size: 15px; letter-spacing: .18em; color: var(--brass); margin-block-end: 26px; }
.part h2 { font-size: clamp(40px, 5.6vw, 76px); line-height: 1.04; text-wrap: balance; }
.part p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--on-ink-muted); max-width: 40ch; }
.part .binding-line {
  position: absolute; inset-inline: 0; inset-block-end: 0; height: 3px;
  background: linear-gradient(90deg, var(--brass), var(--brass-2) 40%, var(--brass));
  transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease);
}
[dir="rtl"] .part .binding-line { transform-origin: right; }
.part.vis .binding-line { transform: scaleX(1); }
@supports (animation-timeline: view()) {
  .part .binding-line { transition: none; animation: bind linear both; animation-timeline: view(); animation-range: entry 30% contain 40%; }
  @keyframes bind { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
@media (max-width: 960px) { .part .wrap { grid-template-columns: 1fr; } }

/* ───────────────────────── chapters ───────────────────────── */
.chapter { position: relative; padding-block: clamp(80px, 11vw, 150px); }
.chapter + .chapter { padding-block-start: 0; }
.chapter .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.chapter.flip .wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.chapter.flip .copy { order: 2; }
.chapter .copy { position: sticky; top: 120px; padding-block: 24px 60px; }
.chapter .stage { display: flex; justify-content: center; align-items: flex-start; min-height: 720px; }
.chapter .stage.two { gap: 28px; }
.chapter h2 { font-size: clamp(30px, 3.3vw, 46px); line-height: 1.1; text-wrap: balance; margin-block-start: 14px; }
.chapter .steps { margin-block-start: 30px; display: grid; gap: 4px; }
.step {
  position: relative; padding-block: 14px; padding-inline: 22px 18px; border-radius: 12px; font-size: 16.5px; line-height: 1.55; color: var(--muted);
  transition: color .5s, background .5s;
}
.step::before { content: ''; position: absolute; inset-inline-start: 0; inset-block: 16px; width: 2px; border-radius: 2px; background: var(--hairline); transition: background .5s; }
.step.on { color: var(--text); background: rgba(255,255,255,.55); }
.step.on::before { background: var(--brass); }
.step b { font-weight: 600; color: var(--ink); }
.chapter .more { margin-block-start: 26px; font-size: 14.5px; }
.chapter .more a { color: var(--brass-ink); border-block-end: 1px solid var(--brass); }
.aside { margin-block-start: 26px; padding: 16px 20px; border-inline-start: 3px solid var(--brass); background: var(--brass-soft); border-radius: 0 12px 12px 0; font-size: 14.5px; line-height: 1.55; color: var(--brass-ink); }
[dir="rtl"] .aside { border-radius: 12px 0 0 12px; }
@media (max-width: 960px) {
  .chapter .wrap, .chapter.flip .wrap { grid-template-columns: 1fr; }
  .chapter .copy, .chapter.flip .copy { position: static; order: 0; padding-block: 0 20px; }
  .chapter .stage { min-height: 0; --pz: .72; }
  .chapter .stage.two { flex-direction: column; align-items: center; }
  .watch-row { flex-direction: column; gap: 24px; margin-block-start: 0; }
  .nav .cta, .nav .wordmark, .nav .burger { flex-shrink: 0; white-space: nowrap; }
  .chapter { padding-block: 64px; }
}

/* ───────────────────────── phone frame ───────────────────────── */
.ph {
  width: 375px; height: 780px; flex-shrink: 0; position: relative;
  background: #0f1a16; border-radius: 52px; padding: 12px;
  box-shadow: 0 30px 70px rgba(20,35,30,.35), 0 2px 0 rgba(255,255,255,.06) inset, 0 0 0 1px rgba(255,255,255,.04);
  zoom: var(--pz);
  font-family: var(--body); font-size: 14px; color: var(--text); text-align: start;
}
.ph.small { height: 660px; }
.ph::before { /* the island */
  content: ''; position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
  width: 108px; height: 30px; border-radius: 20px; background: #0f1a16; z-index: 3;
}
.scr {
  position: relative; height: 100%; border-radius: 41px; overflow: hidden; background: var(--paper);
  display: flex; flex-direction: column;
}
.scr.dark { background: var(--ink); color: var(--on-ink); }
.sb { height: 54px; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 30px 8px; font-size: 13px; font-weight: 600; color: var(--ink); flex-shrink: 0; }
.ink-head .sb, .scr.dark .sb { color: var(--on-ink); }
.sb .sig { font-size: 11px; letter-spacing: 1px; }
.scroll { flex: 1; overflow: hidden; position: relative; }
.ink-head { background: var(--ink); color: var(--on-ink); flex-shrink: 0; }
.appbar { padding: 6px 20px 14px; display: flex; align-items: center; gap: 12px; }
.appbar h4 { font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--ink); flex: 1; }
.ink-head .appbar h4 { color: var(--on-ink); }
.appbar .back { font-size: 20px; color: var(--ink); }
.ink-head .appbar .back { color: var(--on-ink); }
.appbar .act { font-size: 17px; color: var(--muted); position: relative; }
.ink-head .appbar .act { color: var(--on-ink-muted); }
.appbar .act.brass { color: var(--brass-2); }
.act .dot { position: absolute; inset-block-start: -2px; inset-inline-end: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--brass); border: 1.5px solid var(--ink); }
.crumb-line { padding: 0 20px 12px; font-size: 12.5px; color: var(--on-ink-muted); }
.binding { height: 3px; background: linear-gradient(90deg, var(--brass), var(--brass-2) 40%, var(--brass)); flex-shrink: 0; }
.greet { display: flex; align-items: center; gap: 12px; padding: 4px 20px 12px; }
.greet .hi { font-size: 12px; color: var(--muted); }
.greet .nm { font-family: var(--display); font-size: 21px; color: var(--ink); }
.greet .icons { margin-inline-start: auto; display: flex; gap: 14px; font-size: 17px; color: var(--muted); }

.card { background: var(--card); border: 1px solid var(--hairline); border-radius: 14px; padding: 14px 16px; margin: 0 16px 12px; }
.card.tight { padding-block: 4px; }
.card h5 { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-block-end: 8px; }
.card.brass { border-color: #e2d5b4; background: #fdfbf4; }
.card.note { background: var(--brass-soft); border-color: #e2d5b4; color: #5d4a1e; font-size: 12.5px; line-height: 1.5; }
.card.ink { background: var(--ink); border-color: transparent; color: var(--on-ink); }
.card.red { border-color: #e5c9c9; }
.card.redl { border-inline-start: 3px solid var(--expense); }
.section-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 14px 20px 8px; }
.amount { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.amount.in { color: var(--income); } .amount.out { color: var(--expense); }
.approx { font-size: 11px; color: var(--muted); font-family: var(--mono); text-align: end; margin-block-start: 1px; }
.approx.start { text-align: start; }
.bignum { font-family: var(--mono); font-size: 28px; color: var(--ink); letter-spacing: -.01em; }
.ink-head .bignum { color: var(--on-ink); }
.bignum .cur { font-size: 13px; color: var(--muted); margin-inline-end: 6px; }
.ink-head .bignum .cur { color: var(--on-ink-muted); }
.gain { display: inline-block; white-space: nowrap; font-size: 11.5px; font-weight: 600; color: var(--income); background: var(--income-soft); border-radius: 8px; padding: 2px 8px; }
.loss { display: inline-block; white-space: nowrap; font-size: 11.5px; font-weight: 600; color: var(--expense); background: var(--expense-soft); border-radius: 8px; padding: 2px 8px; }
.ledger-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0 8px; border-block-end: 1px dotted var(--hairline); }
.ledger-row:last-child { border-block-end: none; }
.ledger-row > :first-child { flex: 1; min-width: 0; }
.ledger-row > :last-child { flex-shrink: 0; white-space: nowrap; }
.ledger-row .what { font-size: 14px; }
.ledger-row .who { font-size: 11.5px; color: var(--muted); margin-block-start: 2px; }
.ledger-row .amount { font-size: 14.5px; }
.seal {
  display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brass); background: var(--brass-soft); padding: 2px 7px; border-radius: 999px; vertical-align: 2px; font-family: var(--body); font-weight: 500;
}
.seal::before { content: '◉'; font-size: 8px; }
.seal.amber { color: var(--amber-ink); background: var(--amber-soft); }
.seal.amber::before { content: '⏳'; }
.seal.grey { color: var(--muted); background: #eceae3; }
.seal.grey::before { content: '◷'; }
.only { font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; background: var(--brass-soft); color: var(--brass-ink); border-radius: 999px; padding: 2px 7px; white-space: nowrap; font-weight: 500; }
.pill-tabs { display: flex; gap: 8px; padding: 12px 16px 12px; flex-shrink: 0; overflow: hidden; }
.pill { font-size: 12px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--hairline); color: var(--muted); background: var(--card); white-space: nowrap; }
.pill.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn { display: block; text-align: center; background: var(--ink); color: var(--paper); border-radius: 12px; padding: 13px; font-size: 14.5px; font-weight: 500; margin: 8px 16px; }
.btn.secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn.brassy { background: var(--brass); color: #fff; }
.btn.red { background: var(--expense); }
.btn.sm { padding: 9px 12px; font-size: 13px; margin: 0; }
.input { margin: 0 16px 12px; }
.input label { display: block; font-size: 11.5px; font-weight: 500; letter-spacing: .04em; color: var(--muted); margin-block-end: 6px; }
.input .box { background: var(--card); border: 1px solid var(--hairline); border-radius: 10px; padding: 12px 13px; font-size: 14.5px; display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.input .box.focus { border-color: var(--brass); box-shadow: 0 0 0 3px var(--brass-soft); }
.input .box .amount { font-size: 17px; }
.input .box .ph-text { color: #a39f92; }
.hint { font-size: 11.5px; color: var(--muted); margin: -4px 18px 12px; line-height: 1.45; }
.meter { height: 7px; border-radius: 4px; background: var(--expense-soft); overflow: hidden; display: flex; margin-block: 8px 5px; }
.meter .fill { background: var(--income); border-start-start-radius: 4px; border-end-start-radius: 4px; }
.meter.expense-only { background: #eceae3; }
.meter.expense-only .fill { background: var(--expense); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 12.5px; padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--hairline); color: var(--text); white-space: nowrap; }
.chip.on { border-color: var(--brass); background: var(--brass-soft); color: var(--brass-ink); }
.chip.deb.on { border-color: var(--expense); background: var(--expense-soft); color: #6d3033; }
.chip.dashed { border-style: dashed; color: var(--brass); }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--ink-2); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 15px; flex-shrink: 0; }
.avatar.brass { background: var(--brass); }
.avatar.soft { background: var(--brass-soft); color: var(--brass); }
.avatar.sm { width: 28px; height: 28px; font-size: 12px; }
.navbar { display: flex; border-block-start: 1px solid var(--hairline); background: var(--card); padding: 8px 8px 22px; flex-shrink: 0; }
.navbar div { flex: 1; text-align: center; font-size: 10.5px; color: var(--muted); }
.navbar div span { display: block; font-size: 19px; margin-block-end: 1px; }
.navbar .active { color: var(--ink); font-weight: 600; }
.fab { position: absolute; inset-block-end: 82px; inset-inline-end: 18px; height: 50px; min-width: 50px; padding: 0 16px; border-radius: 16px; background: var(--brass); color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; font-weight: 500; box-shadow: 0 10px 24px rgba(156,123,51,.4); z-index: 4; }
.fab .plus { font-size: 22px; line-height: 1; }
.kv { display: flex; justify-content: space-between; font-size: 13px; padding-block: 6px; border-block-end: 1px dotted var(--hairline); gap: 10px; }
.kv:last-child { border-block-end: none; }
.kv .k { color: var(--muted); white-space: nowrap; }
.kv > :last-child { text-align: end; font-size: 12.5px; }
.seg2 { display: flex; background: #e9e6dc; border-radius: 12px; padding: 3px; margin: 12px 16px 6px; }
.seg2 div { flex: 1; text-align: center; font-size: 13px; font-weight: 500; color: var(--muted); padding: 8px 0; border-radius: 10px; transition: background .35s var(--ease), color .35s; }
.seg2 .on { background: var(--ink); color: var(--paper); }
.seg2 .on.red { background: var(--expense); }
.diff { font-family: var(--mono); font-size: 13px; }
.diff .old { color: var(--expense); text-decoration: line-through; }
.diff .new { color: var(--income); }
.who-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-block-end: 1px dotted var(--hairline); }
.who-row:last-child { border-block-end: none; }
.who-row .n { font-size: 14px; font-weight: 500; color: var(--ink); }
.who-row .s { font-size: 11.5px; color: var(--muted); margin-block-start: 1px; line-height: 1.4; }
.who-row .go { margin-inline-start: auto; color: var(--brass); }
.role { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: #eceae3; color: var(--muted); margin-inline-start: 6px; vertical-align: 1px; }
.role.live { background: var(--income-soft); color: var(--income); }
.role.wait { background: var(--amber-soft); color: var(--amber-ink); }
.codecard { background: var(--ink); color: var(--on-ink); border-radius: 14px; margin: 0 16px 12px; padding: 14px 16px; }
.codecard .lab { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink-muted); }
.codecard .code { font-family: var(--mono); font-size: 26px; color: var(--brass-2); letter-spacing: .04em; margin-block: 6px 4px; }
.codecard .why { font-size: 11px; color: var(--on-ink-muted); line-height: 1.45; }
.empty { text-align: center; padding: 30px 28px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.empty .glyph { font-family: var(--display); font-size: 32px; color: var(--brass); display: block; margin-block-end: 8px; }
.empty .t { font-family: var(--display); font-size: 19px; color: var(--ink); margin-block-end: 6px; }
.feed-row { display: flex; gap: 12px; padding-block: 10px; border-block-end: 1px dotted var(--hairline); align-items: flex-start; }
.feed-row:last-child { border-block-end: none; }
.feed-ic { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.ic-ok { background: var(--income-soft); color: var(--income); }
.ic-wait { background: var(--amber-soft); color: var(--amber-ink); }
.ic-flag { background: var(--expense-soft); color: var(--expense); }
.ic-doc { background: var(--brass-soft); color: var(--brass); }
.ic-lock { background: #e9e6dc; color: var(--muted); }
.feed-row .t { font-size: 13.5px; }
.feed-row .s { font-size: 11.5px; color: var(--muted); margin-block-start: 2px; line-height: 1.4; }
.act-btns { display: flex; gap: 8px; margin-block-start: 10px; }
.act-btns .btn { flex: 1; margin: 0; padding: 8px; font-size: 12.5px; border-radius: 10px; }
.bubble { max-width: 84%; border-radius: 14px; padding: 9px 13px; font-size: 13.5px; line-height: 1.45; margin-block-end: 8px; }
.bubble .from { font-size: 10.5px; color: var(--brass); font-weight: 600; margin-block-end: 3px; }
.bubble.them { background: var(--card); border: 1px solid var(--hairline); border-start-start-radius: 4px; }
.bubble.me { background: var(--ink); color: var(--paper); margin-inline-start: auto; border-start-end-radius: 4px; }
.bubble.me .from { color: var(--on-ink-muted); }
.ref-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; background: var(--brass-soft); border: 1px solid #e2d5b4; color: var(--brass-ink); border-radius: 8px; padding: 3px 9px; margin-block-end: 6px; font-family: var(--mono); }
.bubble.me .ref-chip { background: #2a3d35; border-color: #3d5a50; color: #cfe6da; }
.req-card { max-width: 88%; background: var(--card); border: 1.5px solid var(--brass); border-radius: 14px; padding: 10px 13px; margin-block-end: 8px; }
.req-card .label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--brass); margin-block-end: 4px; }
.req-card .t { font-size: 13.5px; font-weight: 500; }
.req-card .s { font-size: 11.5px; color: var(--muted); margin-block-start: 3px; }
.day-mark { text-align: center; font-size: 10.5px; color: var(--muted); margin-block: 10px; }
.room-who { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.room-who span { font-size: 10.5px; padding: 3px 9px; border-radius: 999px; background: #eceae3; color: var(--muted); }
.composer { margin: 8px 16px 0; background: var(--card); border: 1px solid var(--hairline); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); }
.composer .send { margin-inline-start: auto; color: var(--brass); font-size: 16px; }
.att { display: flex; align-items: center; gap: 10px; padding-block: 8px; font-size: 13px; border-block-end: 1px dotted var(--hairline); }
.att:last-child { border-block-end: none; }
.att .n { width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; }
.att .go { color: var(--muted); }
.fold-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 16px 12px; }
.fold { position: relative; background: var(--card); border: 1px solid var(--hairline); border-radius: 14px; padding: 12px 12px 10px; min-height: 90px; display: flex; flex-direction: column; justify-content: space-between; }
.fold::before { content: ''; position: absolute; top: -5px; left: 14px; width: 38px; height: 6px; border-radius: 4px 4px 0 0; background: var(--card); border: 1px solid var(--hairline); border-block-end: none; }
.fold .g { font-size: 18px; color: var(--brass); }
.fold .name { font-size: 13.5px; font-weight: 500; color: var(--ink); margin-block-start: 8px; }
.fold .count { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.fold .flag { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; font-size: 9.5px; padding: 2px 7px; border-radius: 999px; background: var(--amber-soft); color: var(--amber-ink); }
.fold.unsorted { border-style: dashed; background: #fbfaf6; }
.shot { position: relative; height: 170px; border-radius: 12px; margin: 0 16px 12px; background: linear-gradient(#fff, #f6f4ee); border: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; overflow: hidden; }
.shot i { display: block; height: 5px; border-radius: 3px; background: #d9d5ca; width: 60%; }
.shot i.short { width: 42%; } .shot i.mid { width: 72%; }
.shot .total { margin-block-start: auto; font-family: var(--mono); font-size: 14px; color: var(--ink); display: flex; justify-content: space-between; }
.scanline { position: absolute; inset-inline: 0; height: 40px; top: 10px; background: linear-gradient(180deg, transparent, rgba(156,123,51,.18), transparent); border-block: 1px solid rgba(156,123,51,.45); opacity: 0; }
.src { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; padding: 3px 10px; border-radius: 999px; margin: 0 16px 10px; }
.src.phone { background: var(--income-soft); color: var(--income); }
.src.ai { background: var(--brass-soft); color: var(--amber-ink); }
.f-row { display: flex; align-items: baseline; gap: 10px; padding-block: 7px; border-block-end: 1px dotted var(--hairline); font-size: 13.5px; }
.f-row:last-child { border-block-end: none; }
.f-row .k { width: 84px; flex-shrink: 0; font-size: 12px; color: var(--muted); }
.f-row .v { flex: 1; color: var(--ink); }
.f-row .v.gap { color: #b9b3a4; font-style: italic; }
.f-row .type { font-size: 11px; color: var(--brass); }
.opt { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--hairline); border-radius: 11px; padding: 11px 13px; margin-block-end: 8px; font-size: 14px; }
.opt .g { color: var(--brass); font-size: 15px; width: 18px; text-align: center; }
.opt .s { display: block; font-size: 11.5px; color: var(--muted); }
.opt.on { border-color: var(--brass); box-shadow: 0 0 0 3px var(--brass-soft); }
.gate { border: 1.5px solid var(--hairline); border-radius: 16px; margin: 0 16px 12px; padding: 18px 16px; display: flex; gap: 14px; background: var(--card); align-items: flex-start; }
.gate .g { font-family: var(--display); font-size: 26px; width: 34px; flex-shrink: 0; }
.gate h6 { font-family: var(--display); font-weight: 400; font-size: 18px; color: var(--ink); }
.gate p { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-block-start: 3px; }
.gate.on { border-color: var(--brass); box-shadow: 0 0 0 3px var(--brass-soft); }
.gate.on-red { border-color: var(--expense); box-shadow: 0 0 0 3px var(--expense-soft); }
.cat-row { background: var(--card); border: 1.5px solid var(--hairline); border-radius: 14px; margin: 0 16px 8px; padding: 12px 14px; }
.cat-row .head { display: flex; align-items: center; gap: 12px; }
.cat-row .glyph { font-family: var(--display); font-size: 18px; color: var(--brass); width: 24px; }
.cat-row .name { font-size: 14.5px; font-weight: 500; flex: 1; }
.cat-row .hint2 { font-size: 11px; color: var(--muted); }
.cat-row .chev { color: var(--muted); }
.cat-row .subcats { display: flex; flex-wrap: wrap; gap: 7px; padding-block-start: 10px; }
.cat-row.open { border-color: var(--brass); }
.slot { background: var(--card); border: 1px dashed #c9c4b6; border-radius: 12px; min-height: 68px; display: flex; align-items: center; gap: 9px; padding: 10px 12px; font-size: 12.5px; color: #9a9689; }
.slot .plus { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--brass); color: var(--brass); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.pair { display: flex; gap: 10px; margin: 0 16px 12px; }
.pair > * { flex: 1 1 0; min-width: 0; margin: 0; }
.rowcard { background: var(--card); border: 1px solid var(--hairline); border-radius: 12px; margin: 0 16px 8px; padding: 12px 13px; display: flex; align-items: center; gap: 12px; font-size: 13.5px; }
.rowcard .ic { color: var(--brass); font-size: 15px; width: 18px; text-align: center; }
.rowcard .doc { width: 34px; height: 40px; border-radius: 5px; background: #f0ede4; border: 1px solid var(--hairline); font-size: 8.5px; font-weight: 600; color: var(--brass); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rowcard .doc.lined { background: repeating-linear-gradient(#fbfaf6, #fbfaf6 6px, #eee9dc 7px); }
.rowcard .s { display: block; font-size: 11.5px; color: var(--muted); margin-block-start: 1px; }
.rowcard .chev { margin-inline-start: auto; color: #b9b3a4; }
.rowcard .pin { margin-inline-start: auto; font-size: 11px; color: var(--brass); border: 1px solid var(--brass); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.rowcard .qd { margin-inline-start: auto; font-size: 11px; color: var(--muted); background: #eceae3; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.toggle { width: 40px; height: 24px; border-radius: 999px; background: #cfcdc4; position: relative; flex-shrink: 0; margin-inline-start: auto; }
.toggle::after { content: ''; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .3s var(--ease); }
.toggle.on { background: var(--brass); }
.toggle.on::after { transform: translateX(16px); }
[dir="rtl"] .toggle.on::after { transform: translateX(-16px); }
.set-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-block-end: 1px dotted var(--hairline); font-size: 13.5px; }
.set-row:last-child { border-block-end: none; }
.set-row .g { width: 22px; text-align: center; color: var(--muted); }
.set-row .s { display: block; font-size: 11.5px; color: var(--muted); }
.set-row .go { margin-inline-start: auto; color: var(--muted); }
.strip { margin: 0 16px 10px; padding: 8px 12px; border-radius: 10px; font-size: 12px; display: flex; align-items: center; gap: 8px; }
.strip.off { background: #eceae3; color: var(--muted); }
.strip.queue { background: var(--amber-soft); color: var(--amber-ink); }
.strip.ok { background: var(--income-soft); color: var(--income); }

/* sheets, scrims, taps, toasts */
.scrim { position: absolute; inset: 0; background: rgba(20,35,30,.42); opacity: 0; transition: opacity .35s; z-index: 5; pointer-events: none; }
.sheet {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 6; background: var(--paper);
  border-start-start-radius: 22px; border-start-end-radius: 22px; padding: 10px 0 24px;
  box-shadow: 0 -12px 40px rgba(20,35,30,.28); transform: translateY(105%);
  transition: transform .5s var(--ease);
}
.sheet .grab { width: 36px; height: 4px; border-radius: 2px; background: #d5d0c3; margin: 0 auto 12px; }
.sheet h6 { font-family: var(--display); font-weight: 400; font-size: 19px; color: var(--ink); padding: 0 20px; }
.sheet .why { font-size: 12.5px; color: var(--muted); padding: 6px 20px 12px; line-height: 1.5; }
.sheet .body { padding-inline: 20px; }
.sheet .body .card, .sheet .body .input, .sheet .body .btn { margin-inline: 0; }
.tap {
  position: absolute; z-index: 9; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  background: rgba(20,35,30,.28); box-shadow: 0 0 0 2px rgba(255,255,255,.55) inset; opacity: 0; pointer-events: none;
  inset-inline-start: var(--x); inset-block-start: var(--y); transform: scale(.4);
}
.ink-head .tap, .scr.dark .tap { background: rgba(244,243,238,.32); }
@keyframes tapping { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
.toast {
  position: absolute; inset-inline: 16px; inset-block-start: 62px; z-index: 8; background: var(--ink); color: var(--paper);
  border-radius: 14px; padding: 12px 14px; font-size: 13px; display: flex; gap: 10px; align-items: center;
  box-shadow: 0 14px 34px rgba(20,35,30,.35); transform: translateY(-140%); opacity: 0; transition: transform .5s var(--ease), opacity .4s;
}
.toast .from { font-family: var(--display); font-size: 14px; line-height: 1.2; }
.toast small { display: block; color: var(--on-ink-muted); font-size: 11px; line-height: 1.3; }
.toast .a { margin-inline-start: auto; color: var(--brass-2); font-family: var(--mono); font-size: 13px; white-space: nowrap; flex-shrink: 0; }
.snack { position: absolute; inset-inline: 16px; inset-block-end: 100px; z-index: 8; background: var(--ink); color: var(--paper); border-radius: 12px; padding: 11px 14px; font-size: 13px; display: flex; gap: 12px; align-items: center; transform: translateY(140%); opacity: 0; transition: transform .45s var(--ease), opacity .4s; }
.snack .u { margin-inline-start: auto; color: var(--brass-2); font-weight: 600; letter-spacing: .06em; font-size: 12px; }
.typing { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: bottom; max-width: 0; }
.caret::after { content: ''; display: inline-block; width: 1.5px; height: 1em; background: var(--brass); margin-inline-start: 2px; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.landing { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.stamp { display: inline-block; opacity: 0; transform: scale(1.6) rotate(-8deg); transition: opacity .3s, transform .35s cubic-bezier(.2, 1.4, .4, 1); }
.stamped { opacity: 1; transform: none; }
.hide { display: none !important; }
.faded { opacity: .35; }
.dim { filter: blur(1px); opacity: .5; }

/* generic step-driven visibility inside phones */
.ph .s1o, .ph .s2o, .ph .s3o, .ph .s4o, .ph .s5o, .ph .s6o, .ph .s7o, .ph .s8o { opacity: 0; transition: opacity .45s var(--ease), transform .45s var(--ease); }
[data-scene].s1 .s1o, [data-scene].s2 .s2o, [data-scene].s3 .s3o, [data-scene].s4 .s4o, [data-scene].s5 .s5o, [data-scene].s6 .s6o, [data-scene].s7 .s7o, [data-scene].s8 .s8o { opacity: 1; }
.ph .s1o.landing, .ph .s2o.landing, .ph .s3o.landing, .ph .s4o.landing, .ph .s5o.landing, .ph .s6o.landing, .ph .s7o.landing, .ph .s8o.landing { transform: translateY(8px); }
[data-scene].s1 .s1o.landing, [data-scene].s2 .s2o.landing, [data-scene].s3 .s3o.landing, [data-scene].s4 .s4o.landing, [data-scene].s5 .s5o.landing, [data-scene].s6 .s6o.landing, [data-scene].s7 .s7o.landing, [data-scene].s8 .s8o.landing { transform: none; }
.ph .s1x, .ph .s2x, .ph .s3x, .ph .s4x, .ph .s5x, .ph .s6x, .ph .s7x { transition: opacity .35s; }
[data-scene].s1 .s1x, [data-scene].s2 .s2x, [data-scene].s3 .s3x, [data-scene].s4 .s4x, [data-scene].s5 .s5x, [data-scene].s6 .s6x, [data-scene].s7 .s7x { opacity: 0; pointer-events: none; }
.ph .s1r, .ph .s2r, .ph .s3r, .ph .s4r, .ph .s5r, .ph .s6r, .ph .s7r { display: none; }
[data-scene].s1 .s1r, [data-scene].s2 .s2r, [data-scene].s3 .s3r, [data-scene].s4 .s4r, [data-scene].s5 .s5r, [data-scene].s6 .s6r, [data-scene].s7 .s7r { display: block; }

[data-scene].s1 .set-row.s1r, [data-scene].s1 .who-row.s1r, [data-scene].s1 .feed-row.s1r, [data-scene].s1 .ledger-row.s1r, [data-scene].s1 .rowcard.s1r, [data-scene].s1 .kv.s1r, [data-scene].s1 .att.s1r, [data-scene].s2 .set-row.s2r, [data-scene].s2 .who-row.s2r, [data-scene].s2 .feed-row.s2r, [data-scene].s2 .ledger-row.s2r, [data-scene].s2 .rowcard.s2r, [data-scene].s2 .kv.s2r, [data-scene].s2 .att.s2r, [data-scene].s3 .set-row.s3r, [data-scene].s3 .who-row.s3r, [data-scene].s3 .feed-row.s3r, [data-scene].s3 .ledger-row.s3r, [data-scene].s3 .rowcard.s3r, [data-scene].s3 .kv.s3r, [data-scene].s3 .att.s3r, [data-scene].s4 .set-row.s4r, [data-scene].s4 .who-row.s4r, [data-scene].s4 .feed-row.s4r, [data-scene].s4 .ledger-row.s4r, [data-scene].s4 .rowcard.s4r, [data-scene].s4 .kv.s4r, [data-scene].s4 .att.s4r, [data-scene].s5 .set-row.s5r, [data-scene].s5 .who-row.s5r, [data-scene].s5 .feed-row.s5r, [data-scene].s5 .ledger-row.s5r, [data-scene].s5 .rowcard.s5r, [data-scene].s5 .kv.s5r, [data-scene].s5 .att.s5r, [data-scene].s6 .set-row.s6r, [data-scene].s6 .who-row.s6r, [data-scene].s6 .feed-row.s6r, [data-scene].s6 .ledger-row.s6r, [data-scene].s6 .rowcard.s6r, [data-scene].s6 .kv.s6r, [data-scene].s6 .att.s6r, [data-scene].s7 .set-row.s7r, [data-scene].s7 .who-row.s7r, [data-scene].s7 .feed-row.s7r, [data-scene].s7 .ledger-row.s7r, [data-scene].s7 .rowcard.s7r, [data-scene].s7 .kv.s7r, [data-scene].s7 .att.s7r, [data-scene].s8 .set-row.s8r, [data-scene].s8 .who-row.s8r, [data-scene].s8 .feed-row.s8r, [data-scene].s8 .ledger-row.s8r, [data-scene].s8 .rowcard.s8r, [data-scene].s8 .kv.s8r, [data-scene].s8 .att.s8r, [data-scene].s9 .set-row.s9r, [data-scene].s9 .who-row.s9r, [data-scene].s9 .feed-row.s9r, [data-scene].s9 .ledger-row.s9r, [data-scene].s9 .rowcard.s9r, [data-scene].s9 .kv.s9r, [data-scene].s9 .att.s9r { display: flex; }
[data-scene].s1 span.s1r, [data-scene].s2 span.s2r, [data-scene].s3 span.s3r, [data-scene].s4 span.s4r, [data-scene].s5 span.s5r, [data-scene].s6 span.s6r, [data-scene].s7 span.s7r, [data-scene].s8 span.s8r, [data-scene].s9 span.s9r { display: inline; }
[data-scene].s1 .s1h, [data-scene].s2 .s2h, [data-scene].s3 .s3h, [data-scene].s4 .s4h, [data-scene].s5 .s5h, [data-scene].s6 .s6h, [data-scene].s7 .s7h { display: none; }
[data-scene].s1 .tap.t1, [data-scene].s2 .tap.t2, [data-scene].s3 .tap.t3, [data-scene].s4 .tap.t4, [data-scene].s5 .tap.t5, [data-scene].s6 .tap.t6, [data-scene].s7 .tap.t7, [data-scene].s8 .tap.t8, [data-scene].s9 .tap.t9 { animation: tapping .7s var(--ease) both; }
/* open at N (.oN), close at N (.cN) — close rules come after open rules so, at equal specificity, the later step wins */
[data-scene].s1 .sheet.o1, [data-scene].s2 .sheet.o2, [data-scene].s3 .sheet.o3, [data-scene].s4 .sheet.o4, [data-scene].s5 .sheet.o5, [data-scene].s6 .sheet.o6, [data-scene].s7 .sheet.o7, [data-scene].s8 .sheet.o8 { transform: none; transition-delay: .3s; }
[data-scene].s1 .scrim.o1, [data-scene].s2 .scrim.o2, [data-scene].s3 .scrim.o3, [data-scene].s4 .scrim.o4, [data-scene].s5 .scrim.o5, [data-scene].s6 .scrim.o6, [data-scene].s7 .scrim.o7, [data-scene].s8 .scrim.o8 { opacity: 1; transition-delay: .3s; }
[data-scene].s1 .sheet.c1, [data-scene].s2 .sheet.c2, [data-scene].s3 .sheet.c3, [data-scene].s4 .sheet.c4, [data-scene].s5 .sheet.c5, [data-scene].s6 .sheet.c6, [data-scene].s7 .sheet.c7, [data-scene].s8 .sheet.c8, [data-scene].s9 .sheet.c9 { transform: translateY(105%); transition-delay: 0s; }
[data-scene].s1 .scrim.c1, [data-scene].s2 .scrim.c2, [data-scene].s3 .scrim.c3, [data-scene].s4 .scrim.c4, [data-scene].s5 .scrim.c5, [data-scene].s6 .scrim.c6, [data-scene].s7 .scrim.c7, [data-scene].s8 .scrim.c8, [data-scene].s9 .scrim.c9 { opacity: 0; transition-delay: 0s; }
[data-scene].s1 .toast.o1, [data-scene].s2 .toast.o2, [data-scene].s3 .toast.o3, [data-scene].s4 .toast.o4, [data-scene].s5 .toast.o5, [data-scene].s6 .toast.o6, [data-scene].s7 .toast.o7, [data-scene].s8 .toast.o8 { transform: none; opacity: 1; }
[data-scene].s1 .toast.c1, [data-scene].s2 .toast.c2, [data-scene].s3 .toast.c3, [data-scene].s4 .toast.c4, [data-scene].s5 .toast.c5, [data-scene].s6 .toast.c6, [data-scene].s7 .toast.c7, [data-scene].s8 .toast.c8, [data-scene].s9 .toast.c9 { transform: translateY(-140%); opacity: 0; }
[data-scene].s1 .snack.o1, [data-scene].s2 .snack.o2, [data-scene].s3 .snack.o3, [data-scene].s4 .snack.o4, [data-scene].s5 .snack.o5, [data-scene].s6 .snack.o6, [data-scene].s7 .snack.o7, [data-scene].s8 .snack.o8 { transform: none; opacity: 1; }
[data-scene].s1 .snack.c1, [data-scene].s2 .snack.c2, [data-scene].s3 .snack.c3, [data-scene].s4 .snack.c4, [data-scene].s5 .snack.c5, [data-scene].s6 .snack.c6, [data-scene].s7 .snack.c7, [data-scene].s8 .snack.c8, [data-scene].s9 .snack.c9 { transform: translateY(140%); opacity: 0; }
[data-scene].s1 .stamp.o1, [data-scene].s2 .stamp.o2, [data-scene].s3 .stamp.o3, [data-scene].s4 .stamp.o4, [data-scene].s5 .stamp.o5, [data-scene].s6 .stamp.o6, [data-scene].s7 .stamp.o7, [data-scene].s8 .stamp.o8, [data-scene].s9 .stamp.o9 { opacity: 1; transform: none; }
.ph .s9o { opacity: 0; transition: opacity .45s var(--ease), transform .45s var(--ease); }
[data-scene].s9 .s9o { opacity: 1; }
.ph .s8x, .ph .s9x { transition: opacity .35s; }
[data-scene].s8 .s8x, [data-scene].s9 .s9x { opacity: 0; pointer-events: none; }
.ph .s8r, .ph .s9r { display: none; }
[data-scene].s8 .s8r, [data-scene].s9 .s9r { display: block; }
[data-scene].s8 .s8h, [data-scene].s9 .s9h { display: none; }
.ph .screenlayer { transition-delay: .3s; z-index: 5; }
.ph .screenlayer.l1, .ph .screenlayer.l2, .ph .screenlayer.l3, .ph .screenlayer.l4, .ph .screenlayer.l5, .ph .screenlayer.l6, .ph .screenlayer.l7, .ph .screenlayer.l8, .ph .screenlayer.l9 { transition-delay: .3s; }
[data-scene].s8 .screenlayer.l8, [data-scene].s9 .screenlayer.l9 { transform: none; }
[data-scene].s8 .screenlayer.fadein.l8, [data-scene].s9 .screenlayer.fadein.l9 { opacity: 1; }

/* ── curve drawing (hero, worth) ── */
.curve path.line { stroke-dasharray: 600; stroke-dashoffset: 600; }
.curve path.fill { opacity: 0; transition: opacity .8s .9s; }
.curve circle { opacity: 0; transition: opacity .3s; }
[data-scene].s1 .curve path.line { animation: draw 1.6s var(--ease) forwards; }
[data-scene].s1 .curve path.fill { opacity: 1; }
[data-scene].s1 .curve circle { opacity: 1; transition-delay: 1.4s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ── scene: hero (Home) ── */
.ph[data-scene="home"] .worthnum { transition: none; }
/* ── scene: book (assets ↔ debts) ── */
.ph[data-scene="book"] .side { transition: opacity .4s var(--ease), transform .45s var(--ease); }
.ph[data-scene="book"] .side.debts { position: absolute; inset: 0; opacity: 0; transform: translateX(24px); pointer-events: none; }
[dir="rtl"] .ph[data-scene="book"] .side.debts { transform: translateX(-24px); }
.ph[data-scene="book"].s2 .side.assets { opacity: 0; transform: translateX(-24px); }
[dir="rtl"] .ph[data-scene="book"].s2 .side.assets { transform: translateX(24px); }
.ph[data-scene="book"].s2 .side.debts { opacity: 1; transform: none; }
.ph[data-scene="book"].s2 .seg2 .a { background: transparent; color: var(--muted); }
.ph[data-scene="book"].s2 .seg2 .d { background: var(--expense); color: var(--paper); }
.ph[data-scene="book"].s4 .side.assets { opacity: 1; transform: none; }
.ph[data-scene="book"].s4 .side.debts { opacity: 0; transform: translateX(24px); }
[dir="rtl"] .ph[data-scene="book"].s4 .side.debts { transform: translateX(-24px); }
.ph[data-scene="book"].s4 .seg2 .a { background: var(--ink); color: var(--paper); }
.ph[data-scene="book"].s4 .seg2 .d { background: transparent; color: var(--muted); }
.ph[data-scene="book"] .cover-a, .ph[data-scene="book"] .cover-d { transition: opacity .4s; }
.ph[data-scene="book"] .cover-d { position: absolute; inset: 0; opacity: 0; }
.ph[data-scene="book"].s2 .cover-a { opacity: 0; }
.ph[data-scene="book"].s2 .cover-d { opacity: 1; }
.ph[data-scene="book"].s4 .cover-a { opacity: 1; }
.ph[data-scene="book"].s4 .cover-d { opacity: 0; }

/* ── scene: add (screens slide) ── */
.ph[data-scene="add"] .screenlayer, .ph[data-scene="value"] .screenlayer, .ph[data-scene="invite"] .screenlayer, .ph[data-scene="lang"] .screenlayer, .ph[data-scene="lock"] .screenlayer, .ph[data-scene="bk"] .screenlayer, .ph[data-scene="guide"] .screenlayer, .ph[data-scene="papers"] .screenlayer { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--paper); transition: transform .5s var(--ease), opacity .4s var(--ease); }
.ph .screenlayer.next { transform: translateX(100%); }
[dir="rtl"] .ph .screenlayer.next { transform: translateX(-100%); }
[data-scene].s1 .screenlayer.l1, [data-scene].s2 .screenlayer.l2, [data-scene].s3 .screenlayer.l3, [data-scene].s4 .screenlayer.l4, [data-scene].s5 .screenlayer.l5, [data-scene].s6 .screenlayer.l6, [data-scene].s7 .screenlayer.l7 { transform: none; }
.ph .screenlayer.fadein { transform: none; opacity: 0; pointer-events: none; }
[data-scene].s1 .screenlayer.fadein.l1, [data-scene].s2 .screenlayer.fadein.l2, [data-scene].s3 .screenlayer.fadein.l3, [data-scene].s4 .screenlayer.fadein.l4, [data-scene].s5 .screenlayer.fadein.l5, [data-scene].s6 .screenlayer.fadein.l6, [data-scene].s7 .screenlayer.fadein.l7 { opacity: 1; }
.qtitle { font-family: var(--display); font-size: 24px; color: var(--ink); padding: 8px 20px 4px; line-height: 1.2; }
.qsub { font-size: 12.5px; color: var(--muted); padding: 0 20px 14px; line-height: 1.5; }

/* ── scene: consent (diff strike) ── */
.strike { position: relative; }
.strike::after { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 55%; height: 1.5px; width: 0; background: var(--expense); transition: width .5s var(--ease); }
[data-scene].s5 .strike::after, [data-scene].s6 .strike::after, [data-scene].s7 .strike::after { width: 100%; }

/* ── scene: languages ── */
.ph[data-scene="lang"] .screenlayer.ar { direction: rtl; font-family: 'IBM Plex Sans Arabic', var(--body); }
.ph[data-scene="lang"] .screenlayer.hi { font-family: 'IBM Plex Sans Devanagari', var(--body); }
.ph[data-scene="lang"] .screenlayer.ar .appbar h4, .ph[data-scene="lang"] .screenlayer.hi .appbar h4 { font-family: inherit; font-weight: 500; }
.ph[data-scene="lang"] .screenlayer.ar .amount, .ph[data-scene="lang"] .screenlayer.ar .bignum { direction: ltr; unicode-bidi: isolate; }
.ph[data-scene="lang"] .screenlayer.l2 { transition: opacity .6s var(--ease); }

/* ── scene: legacy timeline ── */
.tl { margin: 0 16px 12px; padding: 4px 0 0; }
.tl .row { display: flex; gap: 12px; align-items: flex-start; padding-block: 6px; position: relative; }
.tl .row::before { content: ''; position: absolute; inset-inline-start: 9px; inset-block: 26px -8px; width: 1px; background: var(--hairline); }
.tl .row:last-child::before { display: none; }
.tl .d { width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid var(--hairline); background: var(--paper); flex-shrink: 0; margin-block-start: 1px; transition: background .4s, border-color .4s; }
.tl .row.on .d { background: var(--brass); border-color: var(--brass); }
.tl .row.on.hand .d { background: var(--income); border-color: var(--income); }
.tl .t { font-size: 12.5px; color: var(--muted); transition: color .4s; line-height: 1.35; }
.tl .row.on .t { color: var(--ink); }
.tl .t small { display: block; font-size: 10.5px; color: var(--muted); }
[data-scene].s1 .tl .r1, [data-scene].s2 .tl .r2, [data-scene].s3 .tl .r3, [data-scene].s4 .tl .r4, [data-scene].s5 .tl .r5 { }
[data-scene].s1 .tl .r1 { --on: 1; }
.tl .row.on-if { }

/* ── watch ── */
.watch-row { display: flex; gap: 40px; align-items: center; justify-content: center; align-self: center; margin-block-start: -60px; }
.watch { position: relative; width: 244px; flex-shrink: 0; }
.watch .body { width: 244px; height: 298px; background: #1a1a1c; border-radius: 62px; padding: 10px; box-shadow: 0 24px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.05); position: relative; }
.watch .crown { position: absolute; right: -5px; top: 88px; width: 6px; height: 38px; background: #3a3a3d; border-radius: 3px; }
.watch .sbtn { position: absolute; right: -4px; top: 146px; width: 4px; height: 30px; background: #313134; border-radius: 2px; }
.wscreen { height: 100%; background: #000; border-radius: 53px; color: #f2f1ec; display: flex; flex-direction: column; overflow: hidden; font-family: var(--body); }
.wtop { display: flex; justify-content: space-between; padding: 12px 20px 3px; font-size: 10.5px; color: #8b9490; }
.wtop .app { color: var(--brass-2); font-weight: 600; letter-spacing: .04em; }
.wbody { padding: 4px 16px 10px; }
.worth-lbl { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #8b9490; }
.worth { font-family: var(--mono); font-size: 24px; letter-spacing: -.03em; color: #f2f1ec; margin-block-start: 3px; }
.worth .cur { font-size: 12px; color: #8b9490; margin-inline-end: 4px; }
.worth-approx { font-family: var(--mono); font-size: 10.5px; color: #6f7a76; }
.ws-row { display: flex; justify-content: space-between; padding-block: 5px; border-block-end: 1px dotted #262b2e; }
.ws-row .k { font-size: 11.5px; color: #b9c0bb; } .ws-row .k i { font-style: normal; font-size: 10px; color: #6f7a76; }
.ws-row .v { font-family: var(--mono); font-size: 12.5px; }
.ws-row .v.pos { color: #6fc7a1; } .ws-row .v.neg { color: #e08b8f; }
.stale { font-size: 9.5px; color: #6f7a76; text-align: center; margin-block-start: 8px; position: relative; }
.wbar { display: inline-block; height: 9px; border-radius: 5px; background: #23282b; vertical-align: middle; }
.watch .redact { transition: opacity .4s; }
.watch .redact .num { transition: opacity .3s; }
.watch.down .wtop { color: #4a5551; } .watch.down .wtop .app { color: #4a5551; }
.watch.down .worth .num, .watch.down .ws-row .v .num { opacity: 0; }
.watch.down .wbar { }
.n-kind { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: #8b9490; }
.n-line { font-size: 13px; margin-block-start: 3px; line-height: 1.35; }
.n-amt { font-family: var(--mono); font-size: 16px; margin-block-start: 6px; }
.n-amt.out { color: #e08b8f; }
.n-sub { font-size: 10.5px; color: #8b9490; margin-block-start: 3px; }
.n-act { border-radius: 16px; background: #23262a; color: #dfe3e0; text-align: center; padding: 8px; font-size: 12px; margin-block-start: 8px; }
.n-act.primary { background: #2c3a34; color: #cfe4d9; }
.n-act .tag { display: block; font-size: 8.5px; color: #7d8783; text-transform: uppercase; letter-spacing: .06em; }

/* ── year book (document) ── */
.yb { width: 340px; aspect-ratio: 1 / 1.35; background: var(--ink); color: var(--on-ink); border-radius: 6px; padding: 32px 30px; box-shadow: 0 30px 60px rgba(20,35,30,.35), 0 0 0 1px rgba(255,255,255,.05); position: relative; flex-shrink: 0; display: flex; flex-direction: column; }
.yb .yr { font-family: var(--display); font-size: 64px; color: var(--brass-2); line-height: 1; }
.yb .ttl { font-family: var(--display); font-size: 17px; margin-block-start: 6px; }
.yb .sub { font-size: 11px; color: var(--on-ink-muted); margin-block-start: 3px; }
.yb .three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-block-start: 26px; }
.yb .three div { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-ink-muted); }
.yb .three b { display: block; font-family: var(--mono); font-weight: 400; font-size: 13.5px; color: var(--on-ink); margin-block-start: 3px; }
.yb .bars { margin-block-start: auto; display: flex; gap: 6px; align-items: center; height: 120px; }
.yb .bars i { flex: 1; display: flex; flex-direction: column; justify-content: center; height: 100%; position: relative; }
.yb .bars i::before, .yb .bars i::after { content: ''; display: block; width: 100%; border-radius: 2px; transform: scaleY(0); transition: transform .8s var(--ease); }
.yb .bars i::before { height: calc(var(--in) * 56px); background: #4a8f73; align-self: flex-end; transform-origin: bottom; margin-block-end: 1px; }
.yb .bars i::after { height: calc(var(--out) * 56px); background: #b25a5f; transform-origin: top; margin-block-start: 1px; }
.yb.s1 .bars i::before, .yb.s1 .bars i::after, .yb.vis .bars i::before, .yb.vis .bars i::after { transform: scaleY(1); }
.yb .bars i:nth-child(n)::before { transition-delay: calc(var(--i) * 60ms); }
.yb .bars i:nth-child(n)::after { transition-delay: calc(var(--i) * 60ms + 80ms); }
.yb .months { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 8px; color: var(--on-ink-muted); margin-block-start: 8px; }
.yb .foot { font-size: 9px; color: var(--on-ink-muted); margin-block-start: 14px; display: flex; justify-content: space-between; }
.yb .foot span { color: var(--brass-2); }
.yb2 { width: 280px; aspect-ratio: 1 / 1.35; background: #fff; color: var(--text); border-radius: 6px; padding: 24px 22px; box-shadow: 0 30px 60px rgba(20,35,30,.28); position: absolute; inset-inline-end: 0; inset-block-start: 200px; font-size: 9px; transform: rotate(4deg); }
.yb2 h6 { font-family: var(--display); font-weight: 400; font-size: 13px; color: var(--ink); margin-block-end: 8px; }
.yb2 table { width: 100%; border-collapse: collapse; }
.yb2 th { text-align: start; font-size: 7.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 4px 4px; border-block-end: 1px solid var(--ink); }
.yb2 td { padding: 4px 4px; border-block-end: 1px solid #ece9df; font-family: var(--mono); font-size: 8px; }
.yb2 tr:nth-child(even) td { background: #faf9f5; }
.yb2 td.n { font-family: var(--body); }
.yb2 .band td { background: var(--paper-2); font-family: var(--body); font-weight: 600; }
.yb2 .bar { height: 3px; background: var(--expense); border-radius: 2px; margin-block-start: 3px; }
.yb-stage { position: relative; width: 560px; height: 620px; }
@media (max-width: 960px) { .yb-stage { width: min(100%, 360px); height: 520px; } .yb { width: 300px; } .yb2 { display: none; } }

/* ───────────────────────── plans ───────────────────────── */
.plans { padding-block: clamp(80px, 11vw, 150px); }
.plans .head { max-width: 640px; }
.plans h2 { font-size: clamp(32px, 3.6vw, 50px); line-height: 1.1; margin-block-start: 14px; }
.plans .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-block-start: 44px; }
.plan { background: var(--card); border: 1px solid var(--hairline); border-radius: 18px; padding: 28px 26px; display: flex; flex-direction: column; }
.plan.pro { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.plan h3 { font-size: 26px; }
.plan .for { font-size: 13.5px; color: var(--muted); margin-block-start: 6px; min-height: 42px; }
.plan.pro .for { color: var(--on-ink-muted); }
.plan ul { list-style: none; margin-block-start: 22px; display: grid; gap: 10px; font-size: 15px; }
.plan li { padding-inline-start: 22px; position: relative; line-height: 1.45; }
.plan li::before { content: '◉'; position: absolute; inset-inline-start: 0; color: var(--brass); font-size: 9px; top: 6px; }
.plan .rule { margin-block-start: auto; padding-block-start: 22px; font-size: 13.5px; color: var(--muted); border-block-start: 1px dotted var(--hairline); margin-block-start: 26px; }
.plan.pro .rule { color: var(--on-ink-muted); border-color: var(--on-ink-hair); }
.plans .law { margin-block-start: 26px; font-size: 15px; color: var(--muted); max-width: 70ch; }
.plans .law b { color: var(--ink); }
@media (max-width: 960px) { .plans .grid { grid-template-columns: 1fr; } }

/* ───────────────────────── back cover + footer ───────────────────────── */
.backcover { padding-block: clamp(96px, 14vw, 170px) 60px; position: relative; overflow: hidden; }
.backcover .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.backcover h2 { font-size: clamp(40px, 5.2vw, 72px); line-height: 1.02; }
.backcover .lede { margin-block-start: 22px; max-width: 36ch; }
.backcover .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 30px; }
.backcover .langs { margin-block-start: 30px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 15px; }
.backcover .langs a { padding: 8px 14px; border: 1px solid var(--on-ink-hair); border-radius: 999px; color: var(--on-ink-muted); }
.backcover .langs a { transition: border-color .25s var(--ease), color .25s var(--ease); }
.backcover .langs a:hover { border-color: var(--brass); color: var(--on-ink); }
.backcover .langs a.on { border-color: var(--brass); color: var(--on-ink); background: rgba(156,123,51,.14); }
.backcover .phone-col { display: flex; justify-content: center; }
.footer { border-block-start: 1px solid var(--on-ink-hair); margin-block-start: clamp(60px, 8vw, 110px); padding-block-start: 40px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px; font-size: 14px; color: var(--on-ink-muted); }
.footer .wordmark { font-size: 28px; color: var(--on-ink); }
.footer p { margin-block-start: 12px; max-width: 34ch; line-height: 1.55; }
.footer h6 { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink); font-weight: 500; margin-block-end: 12px; }
.footer ul { list-style: none; display: grid; gap: 8px; }
.footer a:hover { color: var(--on-ink); }
.footer .fine { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block-start: 26px; border-block-start: 1px solid var(--on-ink-hair); font-size: 12.5px; }
@media (max-width: 960px) {
  .backcover .wrap { grid-template-columns: 1fr; }
  .backcover .phone-col { --pz: .72; }
  .footer { grid-template-columns: 1fr 1fr; }
}

/* ───────────────────────── secondary pages ───────────────────────── */
.page-head { padding-block: 150px 60px; }
.page-head .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; }
.page-head h1 { font-size: clamp(40px, 5.6vw, 76px); line-height: 1.04; margin-block-start: 18px; text-wrap: balance; }
.page-head .lede { margin-block-start: 22px; max-width: 44ch; }
@media (max-width: 960px) { .page-head { padding-block: 116px 44px; } .page-head .wrap { grid-template-columns: 1fr; } }
.prose { max-width: 66ch; font-size: 17.5px; line-height: 1.65; }
.prose h2 { font-size: 34px; line-height: 1.15; margin-block: 56px 16px; }
.prose h3 { font-size: 24px; margin-block: 36px 10px; }
.prose p + p { margin-block-start: 16px; }
.prose ul { padding-inline-start: 22px; margin-block: 14px; display: grid; gap: 8px; }
.prose .rule { padding: 18px 22px; border-inline-start: 3px solid var(--brass); background: var(--card); border-radius: 0 12px 12px 0; margin-block: 24px; }
.section { padding-block: clamp(64px, 8vw, 110px); }
.section.tint { background: var(--paper-2); }
.two-col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.two-col.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.two-col.flip > :first-child { order: 2; }
.two-col h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; margin-block-start: 12px; }
@media (max-width: 960px) { .two-col, .two-col.flip { grid-template-columns: 1fr; } .two-col.flip > :first-child { order: 0; } }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-block-start: 44px; }
.fact { background: var(--card); border: 1px solid var(--hairline); border-radius: 16px; padding: 24px 24px 22px; }
.fact h3 { font-size: 22px; line-height: 1.2; }
.fact p { margin-block-start: 10px; font-size: 15px; color: var(--muted); line-height: 1.55; }
.ink .fact { background: var(--ink-2); border-color: var(--on-ink-hair); }
.ink .fact p { color: var(--on-ink-muted); }
@media (max-width: 960px) { .facts { grid-template-columns: 1fr; } }
.matrix { width: 100%; border-collapse: collapse; margin-block-start: 30px; font-size: 15px; background: var(--card); border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; }
.matrix th, .matrix td { padding: 14px 18px; text-align: start; border-block-end: 1px solid var(--hairline); }
.matrix th { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.matrix td.c { text-align: center; font-family: var(--mono); }
.matrix td.c b { color: var(--brass); font-weight: 400; }
.matrix tr.you td { background: #fcfaf3; }
.matrix tr.you td:first-child { color: var(--brass-ink); }
.matrix-wrap { overflow-x: auto; }
.faq { max-width: 820px; }
.faq h2 { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--brass); font-family: var(--body); font-weight: 500; margin-block: 48px 10px; }
.faq details { border-block-end: 1px dotted var(--hairline); }
.faq summary { list-style: none; cursor: pointer; padding-block: 18px; padding-inline: 0 40px; font-family: var(--display); font-size: 22px; color: var(--ink); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; inset-inline-end: 6px; inset-block-start: 14px; font-size: 26px; color: var(--brass); font-family: var(--body); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; max-width: 64ch; font-size: 16.5px; line-height: 1.6; color: var(--text); }
.askbar { display: flex; gap: 8px; margin-block-start: 30px; }
.askbar .field { flex: 1; background: var(--card); border: 1px solid var(--hairline); border-radius: 12px; padding: 16px 18px; font-size: 17px; color: var(--ink); min-height: 58px; display: flex; align-items: center; }
.askbar .field .ph-text { color: #a39f92; }
.askbar .go { background: var(--ink); color: var(--paper); border-radius: 12px; padding: 0 22px; font-weight: 500; }
.answer { margin-block-start: 22px; background: var(--card); border: 1px solid var(--hairline); border-radius: 16px; padding: 24px 26px; opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.answer.show { opacity: 1; transform: none; }
.answer .range { font-family: var(--mono); font-size: clamp(22px, 2.6vw, 32px); color: var(--ink); }
.answer .range small { font-size: 14px; color: var(--muted); }
.answer .works { font-family: var(--mono); font-size: 13.5px; color: var(--brass); margin-block-start: 8px; }
.answer .basis { font-size: 13.5px; color: var(--muted); margin-block-start: 14px; padding-block-start: 12px; border-block-start: 1px solid var(--hairline); line-height: 1.55; }
.answer .said { font-size: 12.5px; color: var(--muted); margin-block-start: 8px; }
.cities { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 22px; }
.cities span { font-size: 13px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--card); color: var(--muted); }
.cities span.on { border-color: var(--brass); background: var(--brass-soft); color: var(--brass-ink); }
.cities span.soon { border-style: dashed; }
.crumbs { font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--brass-ink); border-block-end: 1px solid var(--brass); }

/* ───────────────────────── reveal ───────────────────────── */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.vis { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .1s; } .rv.d2 { transition-delay: .2s; } .rv.d3 { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .rv { opacity: 1; transform: none; }
  .cover .scroll-hint i { display: none; }
}

/* ── scene: guide (the article is taller than the phone, so it scrolls) ── */
.ph[data-scene="guide"] .gscroll { transition: transform .6s var(--ease); }
.ph[data-scene="guide"].s7 .gscroll { transform: translateY(-196px); }