/* MOVA — Pricing. Hero family B (light, data-led). Tokens from mova.css only. */

/* Tighter rhythm than marketing pages: this is a reference page. */
@media (min-width: 1200px) { .pr-page .sec { padding-top:136px; } }

/* ---------- Hero panel: the breakdown is the visual ---------- */
.pr-panel { background:#FFFFFF; border:1px solid var(--card-line); border-radius:var(--r-dark); overflow:hidden; margin:0 calc(-1 * var(--pad)); border-left:0; border-right:0; border-radius:0; }
.pr-panel-main { display:grid; grid-template-columns:minmax(0,1fr); gap:36px; padding:48px var(--pad) 40px; }
.pr-panel-text { display:flex; flex-direction:column; gap:22px; }
.pr-panel-text .lede { max-width:440px; }
.pr-controls { display:flex; flex-direction:column; gap:14px; margin-top:10px; }
.pr-mode { align-self:flex-start; flex-wrap:wrap; }
.pr-mode button { padding:8px 14px; font-size:12.5px; }
.pr-field { background:var(--input); border-radius:26px; padding:16px 22px; max-width:460px; }
.pr-field:focus-within { box-shadow:inset 0 0 0 1.5px var(--purple); }
.pr-field label { display:block; font-size:12px; color:var(--label); }
.pr-field-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:2px; }
.pr-field input { width:100%; min-width:0; border:0; outline:none; background:transparent; font:inherit; font-size:44px; font-weight:600; letter-spacing:-0.045em; color:var(--ink); padding:0; }
.pr-cur { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--control-line); background:#FFFFFF; border-radius:999px; padding:7px 14px 7px 8px; font-size:14px; font-weight:600; flex:none; }

.pr-statement { background:var(--bg); border-radius:28px; padding:26px 22px 22px; }
.pr-st-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.pr-st-rows { margin:0; position:relative; }
.pr-st-row { position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0 16px 26px; border-bottom:1px solid var(--line-3); }
.pr-st-row::before { content:''; position:absolute; left:3px; top:calc(50% - 3.5px); width:7px; height:7px; border-radius:999px; background:var(--line-strong); }
.pr-st-row::after { content:''; position:absolute; left:6px; top:calc(50% + 6px); height:calc(100% - 12px); width:1px; background:var(--line-2); }
.pr-st-row:last-child::after { display:none; }
.pr-st-row dt { font-size:14px; color:var(--text-2); }
.pr-st-row dd { margin:0; font-size:clamp(20px, 2vw, 26px); font-weight:600; letter-spacing:-0.03em; text-align:right; white-space:nowrap; }
.pr-st-row--total { border-bottom:1.5px solid var(--ink); padding-top:22px; padding-bottom:22px; }
.pr-st-row--total::before { background:var(--purple); box-shadow:0 0 0 4px rgba(107,35,196,.14); }
.pr-st-row--total dt { color:var(--ink); font-weight:600; font-size:15px; }
.pr-st-row--total dd { font-size:clamp(40px, 4.6vw, 64px); letter-spacing:-0.055em; color:var(--purple); line-height:1; }
.pr-st-row dd.is-muted { font-size:15px; letter-spacing:0; color:var(--text-2); font-weight:500; }
.pr-statement .fine { margin:16px 0 0; }

.pr-principles { list-style:none; margin:0; padding:0 var(--pad); display:grid; grid-template-columns:minmax(0,1fr); border-top:1px solid var(--card-line); }
.pr-principles li { display:grid; grid-template-columns:40px minmax(0,1fr); gap:8px; padding:22px 0; border-bottom:1px solid var(--row-line); }
.pr-principles li:last-child { border-bottom:0; }
.pr-principles .mono { font-size:11px; letter-spacing:.14em; color:var(--label); padding-top:4px; }
.pr-principles h2 { font-size:16px; font-weight:600; letter-spacing:-0.02em; margin:0 0 4px; }
.pr-principles p { margin:0; }
.pr-jump { display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:24px; }
html body .pr-jump a { font-size:13px; font-weight:500; color:var(--text-2); }
html body .pr-jump a:hover { color:var(--purple); }
@media (min-width: 720px) {
  .pr-panel-main { padding:56px var(--pad) 48px; }
  .pr-statement { padding:32px 36px 28px; }
  .pr-principles { grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 28px; }
  .pr-principles li { border-bottom:0; padding:26px 0 28px; }
}
@media (min-width: 1200px) {
  .pr-panel { margin:0; border:1px solid var(--card-line); border-radius:var(--r-dark); }
  .pr-panel-main { grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:56px; padding:72px 71px 64px; align-items:center; }
  .pr-statement { padding:36px 44px 30px; }
  .pr-principles { padding:0 71px; }
}

/* ---------- Fees, grouped ---------- */
.pr-fee-groups { margin-top:48px; display:grid; grid-template-columns:minmax(0,1fr); gap:40px; }
.pr-fee-g { margin:0 0 4px; }
.pr-fee-g .mono { font-size:11px; font-weight:400; letter-spacing:.16em; color:var(--label); }
.pr-fee-list { margin:0; border-top:1.5px solid var(--ink); }
.pr-fee-row { display:grid; grid-template-columns:minmax(0,1fr); gap:4px; padding:20px 0; border-bottom:1px solid var(--line-2); }
.pr-fee-row dt { font-size:17px; font-weight:600; letter-spacing:-0.02em; }
.pr-fee-row dd { margin:0; }
.pr-fee-v { font-size:15px; font-weight:600; }
.pr-fee-n { max-width:420px; }
.pr-legend { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:20px 0 0; }
@media (min-width: 720px) { .pr-fee-row { grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,5fr); gap:24px; align-items:baseline; } }
@media (min-width: 1200px) { .pr-fee-groups { grid-template-columns:repeat(2, minmax(0,1fr)); gap:56px; } .pr-fee-row { grid-template-columns:minmax(0,5fr) minmax(0,4fr); } .pr-fee-n { grid-column:1 / -1; } }

/* ---------- Worked examples ---------- */
.pr-receipts { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; margin:48px 0 0; }
.pr-receipt { background:#FFFFFF; border:1px solid var(--card-line-2); border-radius:var(--r-card); padding:26px 24px 24px; display:flex; flex-direction:column; }
.pr-receipt h3 { font-size:24px; font-weight:600; letter-spacing:-0.035em; margin:12px 0 18px; }
.pr-receipt .ledger > div { font-size:15px; padding:14px 0; }
.pr-receipt .ledger > div:last-child { border-bottom:0; }
.pr-receipt-total { display:flex; align-items:baseline; justify-content:space-between; border-top:1.5px solid var(--ink); padding:18px 0 24px; font-size:14px; color:var(--text-2); }
.pr-receipt-total strong { font-size:clamp(34px, 3.4vw, 48px); font-weight:600; letter-spacing:-0.05em; color:var(--purple); }
.pr-receipt .link-arrow { margin-top:auto; }
@media (min-width: 720px) { .pr-receipts { grid-template-columns:repeat(2, minmax(0,1fr)); } .pr-receipt { padding:36px 40px 32px; } }

/* ---------- Rates ---------- */
.pr-chart { margin-top:48px; background:var(--surface-warm); border:1px solid var(--card-line); border-radius:32px; padding:24px 20px; display:grid; grid-template-columns:minmax(0,1fr); gap:28px; }
.pr-chart-stats { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px 16px; align-content:start; }
.pr-chart-v { font-size:clamp(32px, 3.4vw, 48px); font-weight:600; letter-spacing:-0.05em; line-height:1; margin-top:6px; }
.pr-chart-s { font-size:20px; font-weight:600; letter-spacing:-0.02em; color:var(--purple); margin-top:10px; }
.pr-chart-s--ink { color:var(--ink); }
.pr-chart-note { grid-column:1 / -1; }
.pr-chart-plot svg { display:block; width:100%; height:220px; overflow:visible; }
.pr-chart-axis { display:flex; justify-content:space-between; font-size:11px; color:var(--label); margin-top:12px; }
.pr-chart-plot .fine { margin:16px 0 0; }
@media (min-width: 720px) { .pr-chart { padding:40px 44px; } .pr-chart-plot svg { height:260px; } }
@media (min-width: 1200px) {
  .pr-chart { grid-template-columns:320px minmax(0,1fr); gap:56px; padding:48px 56px; }
  .pr-chart-stats { grid-template-columns:1fr; gap:22px; }
  .pr-chart-stats > div:not(.pr-chart-note) { padding-bottom:18px; border-bottom:1px solid var(--line-3); }
  .pr-chart-plot svg { height:320px; }
}

/* ================================================================
   Pricing hero — colour pass. Composition unchanged; colour follows the
   money: neutral where you enter an amount, branded where it arrives.
   Palette and gradients are the approved MOVA ones (chart line, cards).
   ================================================================ */
.pr-panel { position:relative; background:
  radial-gradient(55% 85% at 100% 100%, rgba(242,144,58,.18) 0%, rgba(242,144,58,0) 62%),
  radial-gradient(60% 95% at 84% 18%, rgba(139,63,232,.14) 0%, rgba(139,63,232,0) 64%),
  linear-gradient(90deg, #FFFFFF 0%, #FCFAF7 34%, #F6F0FA 100%); }
.pr-panel-main { position:relative; }

/* Selector: deep violet active state */
.pr-mode { background:#EFEAF4; }
html body .pr-mode button[aria-pressed="true"] { background:var(--deep); color:#FFFFFF; box-shadow:0 1px 0 rgba(255,255,255,.12) inset; }
.pr-mode button:not([aria-pressed="true"]):hover { color:var(--deep); }

/* Amount field: a little more personality, same usability */
.pr-field { position:relative; background:linear-gradient(90deg, var(--input) 0%, #F3EEF7 100%); box-shadow:inset 0 0 0 1px rgba(107,35,196,.08); }
.pr-field:focus-within { box-shadow:inset 0 0 0 1.5px var(--purple); }
.pr-field .pr-cur { border-color:rgba(107,35,196,.22); }

/* Breakdown: neutral top, branded result region */
.pr-statement { position:relative; overflow:hidden; background:
  radial-gradient(120% 75% at 100% 108%, rgba(255,197,61,.42) 0%, rgba(242,144,58,.30) 22%, rgba(162,75,224,.20) 52%, rgba(107,35,196,0) 78%),
  linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 44%, #F7F1FB 100%);
  box-shadow:0 0 0 1px rgba(107,35,196,.10), 0 10px 30px rgba(52,16,106,.06); }
.pr-statement::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle at 1px 1px, rgba(75,30,158,.14) 1px, transparent 1.6px); background-size:10px 10px; -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 38%); mask-image:linear-gradient(to top, #000 0%, transparent 38%); pointer-events:none; }
.pr-statement > * { position:relative; }
.pr-st-head .tbc { border-style:solid; border-color:rgba(107,35,196,.25); color:var(--purple); }

/* Flow rail: violet → orange, dots mark each step of the money */
.pr-st-row::after { background:linear-gradient(180deg, #8B3FE8, #F2903A); opacity:.55; }
.pr-st-row::before { background:#B79BE0; }
.pr-st-row:first-child::before { background:var(--deep); }
.pr-st-row--total { border-bottom-color:var(--deep); }
.pr-st-row--total::before { background:var(--purple); box-shadow:0 0 0 4px rgba(107,35,196,.16); }
.pr-st-row:last-child::before { background:var(--orange); }
.pr-st-row--total dt { color:var(--deep); }
.pr-st-row--total dd { background:linear-gradient(90deg, #4B1E9E 0%, #6B23C4 45%, #8B3FE8 72%, #D9762E 100%); -webkit-background-clip:text; background-clip:text; color:transparent; padding-bottom:4px; }
.pr-st-row--total dd.is-muted { background:none; color:var(--text-2); }

/* Money flow: the amount leaves the field and enters the breakdown */
@media (min-width: 1200px) {
  .pr-field { max-width:none; }
  .pr-field::after { content:''; position:absolute; left:100%; top:50%; width:56px; height:1.5px; background:linear-gradient(90deg, rgba(139,63,232,.25), #8B3FE8 55%, #F2903A); }
  .pr-field::before { content:''; position:absolute; left:calc(100% + 52px); top:calc(50% - 3px); width:7px; height:7px; border-radius:999px; background:#F2903A; z-index:1; }
}

/* Principles: tiny accents tie them to the hero */
.pr-principles { border-top-color:rgba(107,35,196,.14); }
.pr-principles .mono { color:var(--purple); }
.pr-principles li:nth-child(3) .mono { color:#D9762E; }
.pr-principles h2 { position:relative; padding-top:14px; }
.pr-principles h2::before { content:''; position:absolute; left:0; top:0; width:22px; height:2px; border-radius:2px; background:linear-gradient(90deg, #8B3FE8, #F2903A); }
/* One continuous rail from "You send" to "Arrival" */
.pr-st-row::after { display:none; }
.pr-st-rows::before { content:''; position:absolute; left:5.75px; top:28px; bottom:30px; width:1.5px; border-radius:1px; background:linear-gradient(180deg, #4B1E9E 0%, #8B3FE8 55%, #F2903A 100%); opacity:.6; }
.pr-st-row::before { z-index:1; }