/* MOVA — Personal overview. Uses tokens from mova.css only. */


/* ---------------------------------------------------------------- Hero (family C) */
.ph-wrap { padding-top:0; }
.ph-text { display:flex; flex-direction:column; gap:24px; max-width:520px; }
.ph-text .lede { max-width:430px; }
.ph-text .btn-row { margin-top:8px; }
.ph-accent { color:var(--on-dark-accent); }
.ph-visual { position:relative; display:flex; flex-direction:column; align-items:center; margin:0 calc(-1 * var(--pad)); }
.ph-canvas { width:720px; height:680px; }
.ph-screen { left:24px; top:64px; box-shadow:0 12px 36px rgba(20,6,50,.18); }
.ph-ledger { left:456px; top:150px; width:264px; }
.ph-row { position:relative; display:flex; flex-direction:column; gap:4px; padding:18px 0; border-top:1px solid rgba(255,253,249,.18); }
.ph-rule { position:absolute; left:-46px; top:27px; width:40px; height:1px; background:rgba(255,253,249,.35); }
.ph-rule::after { content:''; position:absolute; right:-3px; top:-3px; width:7px; height:7px; border-radius:999px; background:#FFFFFF; }
.ph-code { font-size:11px; letter-spacing:.14em; color:rgba(255,253,249,.7); }
.ph-amt { font-size:30px; font-weight:600; letter-spacing:-0.045em; line-height:1.05; margin-top:4px; white-space:nowrap; }
.ph-amt .cents { color:inherit; opacity:.55; }
.ph-note { font-size:13px; color:rgba(255,253,249,.72); }
.ph-more { display:flex; flex-direction:column; gap:6px; padding-top:18px; border-top:1px solid rgba(255,253,249,.18); font-size:13px; color:rgba(255,253,249,.72); }
.ph-more .mono { font-size:10.5px; letter-spacing:.14em; color:rgba(255,253,249,.5); }
.ph-ledger-mob { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 12px; width:100%; padding:0 var(--pad) 28px; }
.ph-ledger-mob .ph-rule { display:none; }
.ph-ledger-mob .ph-amt { font-size:20px; }
.ph-ledger-mob .ph-note { font-size:12px; }
@media (max-width: 719.98px) {
  .ph-canvas { width:470px; height:560px; }
  .ph-screen { left:40px !important; top:0 !important; }
}
@media (min-width: 720px) and (max-width: 1199.98px) { .ph-canvas { width:720px; } }
@media (min-width: 1200px) {
  .ph { grid-template-columns:minmax(0,5fr) minmax(0,7fr); min-height:720px; align-items:center; }
  .ph-text { padding:104px 0 88px; }
  .ph-visual { margin:0; align-self:end; align-items:flex-end; height:680px; }
}

/* In-screen allocation bar grows in (source: Accounts `count` / barClip) */
.js [data-animate] .alloc-grow { clip-path:inset(0 100% 0 0 round 999px); transition:clip-path 1.4s var(--ease-draw) .2s; }
.js [data-animate].is-in .alloc-grow { clip-path:inset(0 0 0 0 round 999px); }

/* ---------------------------------------------------------------- Send (dark) */
.p-send-wrap { padding-left:0; padding-right:0; }
.p-send { position:relative; overflow:hidden; background:var(--dark-deep); color:var(--on-dark); display:grid; grid-template-columns:minmax(0,1fr); gap:48px; padding:72px 20px 0; }
.p-send-text { position:relative; display:flex; flex-direction:column; gap:24px; max-width:460px; }
.p-send .rows { margin-top:6px; }

.p-send-visual { position:relative; display:flex; justify-content:center; margin:0 -20px; }
.p-send-canvas { width:720px; height:640px; }
.p-send-canvas--mob { width:470px; height:560px; }
.p-send .screen { box-shadow:0 10px 30px rgba(0,0,0,.22); }
@media (min-width: 720px) { .p-send { padding:80px 36px 0; } .p-send-visual { margin:0 -36px; } }
@media (min-width: 1200px) {
  .p-send-wrap { padding-left:var(--pad); padding-right:var(--pad); }
  .p-send { grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:32px; padding:104px 0 0 72px; border-radius:var(--r-dark); }
  .p-send-text { align-self:start; padding-bottom:96px; }
  .p-send-visual { align-self:end; margin:0; justify-content:flex-end; height:640px; }
}

.p-recipients { width:344px; background:var(--screen); border-radius:28px; padding:20px 22px 10px; color:var(--ink); box-shadow:0 10px 30px rgba(0,0,0,.2); }
.p-search { display:flex; align-items:center; gap:8px; height:40px; padding:0 14px; border-radius:999px; background:#FFFFFF; border:1px solid var(--screen-line); font-size:13px; color:var(--label); margin-bottom:4px; }
.p-recipients .prow { padding:11px 0; }
.p-recipients .prow.is-on { margin:4px -10px; padding:11px 10px; border-radius:18px; background:#FFFFFF; box-shadow:inset 0 0 0 1.5px var(--purple); border-bottom-color:transparent; }
.p-cur { font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:.1em; color:var(--text-2); border:1px solid var(--control-line); border-radius:999px; padding:4px 8px; }

/* ---------------------------------------------------------------- Convert */
.p-convert-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:48px; align-items:center; }
.p-convert-text { display:flex; flex-direction:column; gap:24px; max-width:420px; }
.p-convert-stage { order:2; margin:0 calc(-1 * var(--pad)); display:flex; justify-content:center; }
.p-convert-canvas { width:760px; height:620px; }
@media (min-width: 1200px) {
  .p-convert-grid { grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--gap); }
  .p-convert-stage { order:0; height:620px; margin:0 0 0 calc(-1 * var(--edge)); border-radius:0 24px 24px 0; justify-content:flex-end; }
}
@media (max-width: 719.98px) {
  /* Art-directed small-screen layout: the cards stack diagonally inside a narrower canvas */
  .p-convert-canvas { width:470px; height:600px; }
  .p-convert-canvas .p-acct--usd { left:24px !important; top:40px !important; }
  .p-convert-canvas .p-acct--to { left:116px !important; top:346px !important; }
  .p-convert-canvas .p-flow-chip { left:140px !important; top:268px !important; }
  .p-convert-canvas .p-flow { display:none; }
}
.p-acct { width:330px; height:206px; border-radius:32px; padding:20px 22px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.p-acct--usd { background:var(--grad-card); color:#FFFFFF; }
.p-acct--usd::before { content:''; position:absolute; inset:0; background-image:var(--dots-card); background-size:8px 8px; -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 52%); mask-image:linear-gradient(to top, #000 0%, transparent 52%); pointer-events:none; }
.p-acct > * { position:relative; }
.p-acct--to { background:#FFFFFF; border:1px solid #E6E3DD; color:var(--ink); }
.p-acct-top { display:flex; align-items:center; justify-content:space-between; font-size:14px; font-weight:600; }
.p-acct-no { font-size:12px; letter-spacing:.1em; color:rgba(255,253,249,.72); }
.p-acct--to .p-acct-no { color:var(--label); }
.p-acct-bal { font-size:40px; font-weight:600; letter-spacing:-0.045em; line-height:1; white-space:nowrap; }
.p-acct--usd .p-acct-bal .cents { color:inherit; opacity:.6; }
.p-acct-delta { font-size:12.5px; margin-top:8px; color:rgba(255,253,249,.82); }
.p-acct-delta--in { color:var(--purple); font-weight:600; }
.p-flow-chip { background:var(--ink); color:#FFFFFF; border-radius:999px; padding:8px 14px; font-size:13px; font-weight:600; white-space:nowrap; box-shadow:var(--shadow-chip); }
.p-flow-line { stroke-dasharray:1; stroke-dashoffset:0; }
.js [data-animate] .p-flow-line { stroke-dashoffset:1; transition:stroke-dashoffset 1.2s var(--ease-draw) .3s; }
.js [data-animate].is-in .p-flow-line { stroke-dashoffset:0; }
.js [data-animate] .p-flow-end { opacity:0; transition:opacity .3s ease 1.3s; }
.js [data-animate].is-in .p-flow-end { opacity:1; }
.p-convert.is-replay .p-flow-line { transition:none; stroke-dashoffset:1; }
.p-convert.is-replay .p-flow-end { transition:none; opacity:0; }
.p-controls { display:flex; flex-direction:column; gap:14px; margin-top:4px; }
.p-control { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:12px; }

/* ---------------------------------------------------------------- Story */
.p-photo { position:relative; margin:40px 0 0; border-radius:var(--r-panel); overflow:hidden; background:var(--img-bg); aspect-ratio:4 / 5; }
.p-photo img { width:100%; height:100%; object-fit:cover; object-position:54% 40%; }
.p-photo-chip { left:16px; bottom:16px; border-radius:18px; padding:12px 18px 12px 12px; gap:12px; }
.p-photo-chip .v { font-size:17px; }
.p-ledger { list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); }
.p-ledger-item { position:relative; padding:22px 0 24px; border-top:1.5px solid var(--purple); }
.p-ledger-item::before { content:''; position:absolute; left:0; top:-4.5px; width:7px; height:7px; border-radius:999px; background:var(--purple); }
.p-ledger-item--next { border-top:1.5px dashed #D3CFC8; }
.p-ledger-item--next::before { background:var(--bg); box-shadow:inset 0 0 0 1.5px var(--line-strong); }
.p-ledger-d { font-size:11px; letter-spacing:.12em; color:var(--label); }
.p-ledger-t { font-size:15px; font-weight:600; letter-spacing:-0.01em; margin-top:12px; }
.p-ledger-v { font-size:24px; font-weight:600; letter-spacing:-0.035em; margin-top:8px; white-space:nowrap; }
.p-ledger .small { margin-top:6px; }
@media (min-width: 720px) {
  .p-photo { aspect-ratio:auto; height:480px; margin-top:48px; }
  .p-photo img { object-position:50% 38%; }
  .p-photo-chip { left:20px; bottom:20px; }
  .p-ledger { grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 28px; }
}
@media (min-width: 1200px) { .p-photo { height:560px; } }


/* ---------------------------------------------------------------- Hub */
.p-hub { display:grid; grid-template-columns:minmax(0,1fr); gap:40px var(--gap); align-items:start; }
.p-hub-head { display:flex; flex-direction:column; gap:22px; max-width:420px; }
.p-hub-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--line-2); }
.p-hub-list li { border-bottom:1px solid var(--line-2); }
html body .p-hub-list a { display:grid; grid-template-columns:minmax(0,1fr); gap:6px; padding:20px 0; color:var(--ink); }
.p-hub-k { font-size:10.5px; letter-spacing:.16em; color:var(--label); }
.p-hub-body { display:flex; flex-direction:column; gap:5px; }
.p-hub-t { font-size:17px; font-weight:600; letter-spacing:-0.02em; }
.p-hub-d { font-size:14px; line-height:1.5; color:var(--text-2); }
.p-hub-l { font-size:13px; font-weight:500; color:var(--ink); margin-top:6px; }
.p-hub-l span { display:inline-block; transition:transform .2s var(--ease-out); }
html body .p-hub-list a:hover .p-hub-t, html body .p-hub-list a:hover .p-hub-l { color:var(--purple); }
html body .p-hub-list a:hover .p-hub-l span { transform:translateX(3px); }
@media (min-width: 720px) {
  html body .p-hub-list a { grid-template-columns:96px minmax(0,1fr) 190px; align-items:baseline; gap:24px; padding:22px 0; }
  .p-hub-l { margin-top:0; text-align:right; }
}
@media (min-width: 1200px) { .p-hub { grid-template-columns:minmax(0,4fr) minmax(0,8fr); } .p-hub-head { position:sticky; top:calc(var(--nav-h) + 24px); } }