/* MOVA — Send money. Uses tokens from mova.css only. */

/* Intro — hero family A, Send composition */
.sh-wrap { padding-top:0; }
.sh-text { display:flex; flex-direction:column; gap:24px; max-width:680px; }
.sh-text .crumbs { margin-bottom:4px; }
.sh-text .lede { max-width:460px; }
.sh-text .btn-row { margin-top:4px; }
.sh-transfer { margin:24px 0 0; padding-top:24px; border-top:1px solid var(--on-dark-line); }
.sh-to { display:flex; align-items:center; gap:12px; }
.sh-to-l { font-size:12px; color:var(--on-dark-label); }
.sh-to-n { font-size:16px; font-weight:600; letter-spacing:-0.01em; }
.sh-to-n span { font-weight:400; color:var(--on-dark-muted); }
.sh-flow { display:grid; grid-template-columns:auto minmax(40px,1fr) auto; align-items:end; gap:16px; margin-top:24px; }
.sh-l { font-size:10.5px; letter-spacing:.14em; color:var(--on-dark-label); }
.sh-v { font-size:clamp(40px, 4.4vw, 60px); font-weight:600; letter-spacing:-0.055em; line-height:1; margin-top:10px; white-space:nowrap; }
.sh-v--in { color:var(--on-dark-accent); }
.sh-v--in .cents { color:inherit; opacity:.55; }
.sh-c { font-size:11px; letter-spacing:.14em; color:var(--on-dark-muted); margin-top:8px; }
.sh-arrow { position:relative; height:1.5px; margin-bottom:38px; background:linear-gradient(90deg, rgba(139,63,232,.3), #8B3FE8 60%, #F2903A); }
.sh-arrow span { position:absolute; right:-1px; top:-4px; width:9px; height:9px; border-top:1.5px solid #F2903A; border-right:1.5px solid #F2903A; transform:rotate(45deg); }
.sh-meta { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:22px; font-size:10.5px; letter-spacing:.12em; color:var(--on-dark-muted); }
.sh-visual { position:relative; display:flex; justify-content:center; margin:0 calc(-1 * var(--pad)); }
.sh-canvas { width:540px; height:700px; }
.sh-screen { left:30px; top:40px; transform:scale(1.18); transform-origin:top left; box-shadow:0 12px 36px rgba(0,0,0,.28); }
@media (max-width: 719.98px) {
  .sh-canvas { width:470px; height:600px; }
  .sh-screen { left:40px !important; top:0 !important; transform:none; }
  .sh-flow { gap:10px; }
}
@media (min-width: 1200px) {
  .sh { grid-template-columns:minmax(0,7fr) minmax(0,5fr); min-height:760px; align-items:center; }
  .sh-text { padding:96px 0 80px; }
  .sh-visual { margin:0; align-self:end; justify-content:flex-end; height:740px; }
  .sh-canvas { height:740px; }
}

/* Walkthrough */
.s-how-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:40px; margin-top:48px; }
.s-steps { display:flex; flex-direction:column; border-bottom:1px solid var(--line-2); }
.s-steps button { display:grid; grid-template-columns:56px minmax(0,1fr); gap:16px; padding:22px 0; background:none; border:0; border-top:1px solid var(--line-2); text-align:left; cursor:pointer; color:var(--ink); }
.s-steps button[aria-selected="true"] { border-top:2px solid var(--purple); padding-top:21px; }
.s-step-n { font-size:36px; font-weight:400; letter-spacing:-0.04em; line-height:1; color:var(--step); transition:color .2s ease; }
.s-steps button[aria-selected="true"] .s-step-n { color:var(--ink); }
.s-step-body { display:flex; flex-direction:column; }
.s-step-t { font-size:17px; font-weight:600; letter-spacing:-0.02em; transition:color .2s ease; }
.s-steps button:hover .s-step-t { color:var(--purple); }
.s-step-d { font-size:14px; line-height:1.55; color:var(--text-2); display:grid; grid-template-rows:0fr; overflow:hidden; opacity:0; transition:grid-template-rows .35s var(--ease-out), opacity .35s ease, margin .35s ease; }
.s-steps button[aria-selected="true"] .s-step-d { grid-template-rows:1fr; opacity:1; margin-top:8px; }
.s-how-stage { margin:0 calc(-1 * var(--pad)); }
.s-how-panel { display:flex; justify-content:center; }
.s-how-panel:not([hidden]) .screen { animation:rise .5s var(--ease-out) both; }
.s-how-canvas { width:470px; height:640px; }
@media (min-width: 720px) { .s-how-stage { margin:0; border-radius:var(--r-panel); } }
@media (min-width: 1200px) {
  .s-how-grid { grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--gap); align-items:start; }
  .s-steps { position:sticky; top:calc(var(--nav-h) + 24px); }
  .s-how-stage { height:720px; }
  .s-how-canvas { height:720px; }
}

/* Breakdown equation */
.s-eq { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; margin-top:56px; text-align:center; }
.s-eq-term { padding:8px 0; }
.s-eq-l { font-size:13px; color:var(--label); }
.s-eq-v { font-size:clamp(48px, 6vw, 92px); font-weight:600; letter-spacing:-0.055em; line-height:1; margin-top:10px; white-space:nowrap; }
.s-eq-s { font-size:13px; color:var(--text-2); margin-top:10px; }
.s-eq-term--out .s-eq-v { color:var(--purple); }
.s-eq-term--out .s-eq-v .cents { color:#B08BDF; }
.s-eq-op { font-size:40px; font-weight:300; color:var(--cents); line-height:1; }
.s-eq-fee { display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:6px 14px; margin-top:28px; padding-top:22px; border-top:1px dashed var(--line-strong); }
.s-eq-fee strong { font-size:22px; font-weight:600; letter-spacing:-0.03em; }
.s-defs { display:grid; grid-template-columns:minmax(0,1fr); gap:0 28px; margin:56px 0 0; }
.s-defs div { border-top:1px solid var(--line-2); padding:20px 0 24px; }
.s-defs dt { font-size:15px; font-weight:600; letter-spacing:-0.01em; }
.s-defs dd { margin:6px 0 0; font-size:14px; line-height:1.55; color:var(--text-2); max-width:380px; }
.s-break-note { margin:8px 0 0; }
@media (min-width: 720px) { .s-defs { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width: 1200px) {
  .s-eq { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:24px; }
  .s-eq-fee { grid-column:1 / -1; }
}

/* Tracking (dark) */
.s-track-wrap { padding-left:0; padding-right:0; }
.s-track { 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; }
.s-track-text { position:relative; display:flex; flex-direction:column; gap:24px; max-width:520px; }
.s-track-visual { position:relative; order:2; display:flex; justify-content:center; margin:0 -20px; }
.s-track-canvas { width:470px; height:620px; }
.s-track .screen { box-shadow:0 10px 30px rgba(0,0,0,.22); }
.s-stages { list-style:none; margin:12px 0 0; padding:0; }
.s-stage { position:relative; display:grid; grid-template-columns:auto; padding:0 0 26px 34px; }
.s-stage::before { content:''; position:absolute; left:8px; top:18px; bottom:-2px; width:1.5px; background:var(--on-dark-line); }
.s-stage:last-child::before { display:none; }
.s-stage--done::before, .s-stage--now::before { background:linear-gradient(var(--violet), rgba(139,63,232,.2)); }
.s-stage--done::before { background:#8B6BC4; }
.s-stage-dot { position:absolute; left:0; top:2px; width:18px; height:18px; border-radius:999px; border:1.5px solid rgba(246,243,238,.3); background:var(--dark-deep); }
.s-stage--done .s-stage-dot { background:var(--on-dark); border-color:var(--on-dark); }
.s-stage--now .s-stage-dot { background:var(--purple); border-color:var(--purple); box-shadow:0 0 0 5px rgba(107,35,196,.28); }
.s-stage-time { font-size:11px; letter-spacing:.12em; color:var(--on-dark-label); }
.s-stage--now .s-stage-time { color:#B99BEA; }
.s-stage-t { font-size:17px; font-weight:600; margin-top:6px; }
.s-stage--next .s-stage-t { color:var(--on-dark-muted); }
.s-stage-d { font-size:14px; line-height:1.5; color:var(--on-dark-body); margin-top:3px; }
.js .s-stages[data-animate] .s-stage { opacity:0; transform:translateY(10px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay:calc(var(--i) * .35s + .2s); }
.js .s-stages[data-animate].is-in .s-stage { opacity:1; transform:none; }
@media (min-width: 720px) { .s-track { padding:80px 36px 0; } .s-track-visual { margin:0 -36px; } }
@media (min-width: 1200px) {
  .s-track-wrap { padding-left:var(--pad); padding-right:var(--pad); }
  .s-track { grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:var(--gap); padding:0 72px 0 40px; border-radius:var(--r-dark); align-items:center; }
  .s-track-visual { order:0; margin:0; padding-top:72px; height:780px; align-self:end; }
  .s-track-canvas { height:708px; }
  .s-track-text { padding:96px 0; }
}

/* Recipient */
.s-recip-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:48px; align-items:center; }
.s-pair { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; }
.s-side .eyebrow { margin-bottom:12px; }
.s-mini { padding:18px 20px 16px; }
.s-mini .prow { border-bottom:1px solid var(--row-line); padding-top:0; }
.s-mini-status { display:flex; align-items:center; gap:10px; padding-top:12px; }
.s-in-top { display:flex; align-items:center; gap:12px; }
.s-in-top .n { font-size:15px; font-weight:600; }
.s-in-amt { font-size:44px; font-weight:600; letter-spacing:-0.05em; line-height:1; margin:22px 0 8px; }
.s-mini .ledger > div:last-child { border-bottom:0; }
.s-arrow { display:none; }
@media (min-width: 720px) {
  .s-pair { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:16px; }
  .s-arrow { display:flex; padding-top:28px; }
}
@media (min-width: 1200px) { .s-recip-grid { grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:var(--gap); } }

/* Currencies & routes */
.s-routes-panel { margin-top:48px; background:var(--surface-warm); border:1px solid var(--card-line); border-radius:32px; padding:22px 20px; }
.s-routes-bar { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin-bottom:20px; }
.s-routes-amt { margin-left:auto; }
.s-routes-amt strong { color:var(--ink); font-weight:600; }
.s-cur { display:flex; align-items:center; gap:12px; font-size:15px; font-weight:600; font-family:"Schibsted Grotesk", sans-serif; color:var(--ink); }
.s-routes-table th[scope="row"] { font-family:inherit; text-transform:none; letter-spacing:0; padding:14px 16px 14px 0; border-bottom:1px solid var(--line-3); }
.s-routes-table td { vertical-align:middle; }
.s-routes-table td.mono { font-size:12px; letter-spacing:.1em; color:var(--label); }
.s-arrives { font-size:17px; font-weight:600; letter-spacing:-0.02em; }
.s-routes-table tr.is-self td, .s-routes-table tr.is-self th { color:var(--cents); }
.s-routes-panel .fine { margin:18px 0 0; }
@media (min-width: 720px) { .s-routes-panel { padding:32px 36px; } }
@media (max-width: 719.98px) { .s-routes-table td.mono, .s-routes-table th:nth-child(2), .s-routes-table td[data-rate], .s-routes-table th:nth-child(3) { display:none; } .s-routes-panel { padding:18px 16px; } .s-routes-amt { margin-left:0; } }
/* Narrow phones: let the header wrap and tighten cell padding so the table fits. */
@media (max-width: 400px) {
  .s-routes-table th { white-space:normal; }
  .s-routes-table th[scope="row"], .s-routes-table td { padding-right:10px; }
  .s-routes-table td:last-child { padding-right:0; }
  .s-cur { gap:10px; }
}