/* Moneyverse — extra components for the MVESCROW and MVTREASURY pages.
   Loaded after style.css, and only by those two pages. Every colour comes from
   the site tokens in style.css, so both themes follow the same palette as the
   rest of the site. All class names carry a px- prefix to stay clear of the
   shared stylesheet. */

:root{
  --px-good:#1d8a4a;
  --px-warn:#b7791f;
  --px-bad:#c53a52;
  --px-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
:root[data-theme="dark"]{
  --px-good:#6fd3a8;
  --px-warn:#f2c46d;
  --px-bad:#f08a9b;
}

/* ---------- intro / hero ---------- */

.px-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 16px 6px 6px; margin:0 0 1.4rem;
  border-radius:999px; background:var(--tint); border:1px solid var(--line);
  font-size:.85rem; font-weight:500; color:var(--heading);
}
.px-badge b{
  padding:3px 11px; border-radius:999px; color:#fff;
  font-size:.7rem; font-weight:700; letter-spacing:.08em;
  background:linear-gradient(135deg,var(--ref-blue),var(--ref-pink));
}
.px-tagline{
  font-size:var(--step-2); font-weight:600; color:var(--heading);
  line-height:1.3; max-width:30ch; margin:0 auto .4rem;
}
.gallery-intro .hero-ctas{position:relative}
.px-chips{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  list-style:none; margin:2rem 0 0; padding:0;
}
.px-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:999px;
  background:var(--ink-2); border:1px solid var(--line);
  font-size:.85rem; font-weight:500; color:var(--heading);
}
.px-chip svg{width:16px; height:16px; stroke:var(--brand); fill:none; stroke-width:2.4; flex:0 0 auto}
.px-chip b{font-weight:600; color:var(--heading)}

.px-hero-art{max-width:560px; margin:2.5rem auto 0}
.px-hero-art svg{width:100%; height:auto; display:block}

.px-note{
  margin:1.4rem auto 0; max-width:70ch; text-align:center;
  font-size:.82rem; color:var(--muted);
}
.px-lead{max-width:70ch; margin:0 auto; text-align:center}
.px-lead + .px-lead{margin-top:1rem}

/* stat strip notes (the numbers use the site's .stat-strip) */
.stat-strip-item .px-stat-note{display:block; margin-top:.2rem; font-size:.75rem; color:var(--muted)}
.stat-strip-item .px-stat-label{display:block; font-size:.85rem; font-weight:600; color:var(--heading)}

/* ---------- card extras ---------- */

.px-kicker{
  display:block; margin:0 0 .4rem;
  font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--glow);
}
.px-fact{
  margin-top:1.1rem; padding-top:.9rem; border-top:1px dashed var(--hairline);
  font-size:.85rem; color:var(--muted);
}
.px-fact b{color:var(--glow); font-weight:600}
.card .ticks{margin:1rem 0 0; gap:.5rem; font-size:.92rem}
/* style.css centres .prose and .ticks inside centred sections; inside a card
   or an FAQ answer they should run the full width, flush left */
.section--center .card .prose,
.section--center .faq .prose{margin-inline:0; max-width:none}
.section--center .card .ticks{margin-inline:0; max-width:none}
.tab-panel--simple .card .ticks{grid-template-columns:1fr}
.cards--left{text-align:left}
.px-card-wide{grid-column:1 / -1 !important}
.px-card-accent{
  background:linear-gradient(145deg,rgba(94,114,235,.10),rgba(218,117,189,.12)) !important;
  border-color:var(--hairline);
}
.px-top{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:.8rem}
.px-aid{font-size:.75rem; font-weight:700; letter-spacing:.1em; color:var(--glow)}
.px-lvl{
  font-size:.7rem; font-weight:700; padding:3px 10px; border-radius:999px;
  background:var(--tint); color:var(--brand); border:1px solid var(--tint-strong);
  white-space:nowrap;
}
.px-metric{
  margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--line);
  font-size:.85rem; color:var(--heading);
}
.px-metric b{
  font-weight:700;
  background:linear-gradient(90deg,var(--ref-blue),var(--ref-pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.px-tech{display:flex; flex-wrap:wrap; gap:6px; margin-top:1rem}
.px-tech span{
  font-size:.72rem; padding:3px 10px; border-radius:999px;
  background:var(--tint); color:var(--heading);
}
.px-num{
  font-size:1.1rem; font-weight:700; color:#fff;
}
.card-ico.px-num{width:48px; height:48px; border-radius:50%}

/* ---------- code panel ---------- */

.px-code{
  margin:0; padding:18px 20px; text-align:left;
  font-family:var(--px-mono); font-size:.8rem; line-height:1.65;
  white-space:pre; overflow-x:auto;
  background:var(--bg-alt); color:var(--heading);
  border:1px solid var(--line); border-radius:var(--radius);
}
.px-code .k{color:var(--brand)}
.px-code .s{color:var(--glow)}
.px-code .c{color:var(--muted)}

/* ---------- tabs used for "how it works" (copy + code side by side) ---------- */

.px-steps .tab-panel.is-active{align-items:start; text-align:left}
.px-steps .tab-copy p{max-width:none}
.px-steps .tab-panel{
  padding:clamp(1.4rem,3vw,2.2rem); border-radius:18px;
  background:var(--ink-2); border:1px solid var(--line); box-shadow:var(--shadow);
}
.px-steps .tab-copy h3{margin-top:0}
@media (max-width:820px){
  .px-steps .tab-panel.is-active{text-align:left}
}
.px-panel-card{
  max-width:880px; margin-inline:auto; text-align:left;
}

/* ---------- diagrams ---------- */

.px-diagram{
  margin:2.5rem 0 0; padding:clamp(14px,3vw,28px);
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:20px; box-shadow:var(--shadow);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.px-diagram svg{width:100%; height:auto; display:block}
.px-swipe{display:none; margin:1.2rem 0 0; text-align:center; font-size:.8rem; color:var(--muted)}
@media (max-width:700px){
  .px-diagram svg{min-width:760px}
  .px-swipe{display:block}
}
/* SVG paint, themed */
.px-svg text{font-family:"Poppins",system-ui,sans-serif}
.px-svg .b1{fill:var(--ink-2); stroke:var(--hairline)}
.px-svg .b2{fill:var(--bg-alt); stroke:var(--line)}
.px-svg .b3{fill:var(--tint); stroke:var(--line)}
.px-svg .bc{fill:var(--bg-alt); stroke:var(--brand); stroke-width:1.4}
.px-svg .bd{fill:none; stroke:var(--hairline); stroke-dasharray:5 6}
.px-svg .t1{fill:var(--heading)}
.px-svg .t2{fill:var(--muted)}
.px-svg .tg{fill:var(--px-good)}
.px-svg .tp{fill:var(--glow)}
.px-svg .tb{fill:var(--brand)}
.px-svg .tw{fill:#fff}
.px-svg .ab{stroke:var(--ref-blue); stroke-width:2; fill:none}
.px-svg .ap{stroke:var(--ref-pink); stroke-width:2; fill:none}
.px-dash{stroke-dasharray:6 8; animation:px-dash 1.6s linear infinite}
@keyframes px-dash{to{stroke-dashoffset:-28}}
.px-pulse{animation:px-pulse 2.4s ease-in-out infinite}
@keyframes px-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.px-dash,.px-pulse{animation:none}}

/* ---------- two-column compare (what stays / what is added) ---------- */

.px-two,.px-four{
  display:grid; gap:24px; margin:2.5rem 0 0;
  grid-template-columns:repeat(2,1fr);
  text-align:left;
}
.px-four{grid-template-columns:repeat(4,1fr)}
@media (max-width:1080px){.px-four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){.px-two{grid-template-columns:1fr}}
@media (max-width:560px){.px-four{grid-template-columns:1fr}}
.px-split{
  display:grid; grid-template-columns:1fr 1fr; margin:2.5rem 0 0;
  border:1px solid var(--line); border-radius:20px; overflow:hidden; text-align:left;
  box-shadow:var(--shadow);
}
.px-split > div{padding:clamp(1.4rem,3vw,2.2rem); background:var(--ink-2)}
.px-split > div + div{
  border-left:1px solid var(--line);
  background:linear-gradient(145deg,rgba(94,114,235,.07),rgba(218,117,189,.09)),var(--ink-2);
}
.px-split h3{display:flex; align-items:center; gap:12px; font-size:1.15rem; margin-bottom:1rem}
.px-split h3 .card-ico{margin:0; width:38px; height:38px}
.px-split h3 .card-ico svg{width:18px; height:18px}
.px-split ul{list-style:none; margin:0; padding:0}
.px-split li{
  display:flex; gap:14px; padding:.75rem 0; font-size:.93rem;
  border-bottom:1px solid var(--line);
}
.px-split li:last-child{border-bottom:0}
.px-split li b{flex:0 0 150px; color:var(--heading); font-weight:600}
@media (max-width:820px){
  .px-split{grid-template-columns:1fr}
  .px-split > div + div{border-left:0; border-top:1px solid var(--line)}
  .px-split li{flex-direction:column; gap:2px}
  .px-split li b{flex:none}
}

/* ---------- pills (core list, standards) ---------- */

.px-pills{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:2rem 0 0; padding:0; list-style:none}
.px-pill{
  padding:9px 18px; border-radius:999px;
  background:var(--tint); border:1px solid var(--line);
  font-size:.86rem; font-weight:500; color:var(--heading);
}
.px-pill b{font-weight:600}
.px-pill--hi{border-color:var(--brand); background:var(--tint-strong)}

/* ---------- MVCORE modes + suite ---------- */

.px-mode-badge{
  display:inline-block; margin-bottom:.9rem;
  padding:4px 12px; border-radius:999px;
  font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand); border:1px solid var(--tint-strong); background:var(--tint);
}
.px-suite{
  margin:2.5rem 0 0; padding:clamp(1.4rem,3vw,2.2rem);
  border-radius:20px; border:1px solid var(--hairline);
  background:linear-gradient(145deg,rgba(94,114,235,.08),rgba(218,117,189,.10));
}
.px-suite > h3{text-align:center; margin-bottom:.3rem}
.px-suite > p{text-align:center; margin:0}
.px-suite-grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:1.4rem;
}
.px-mod{
  padding:14px 12px; text-align:center; border-radius:12px;
  background:var(--ink-2); border:1px solid var(--line);
  transition:transform .2s ease;
}
.px-mod:hover{transform:translateY(-3px); border-color:rgba(94,114,235,.35); text-decoration:none}
.px-mod b{display:block; font-size:.88rem; color:var(--heading)}
.px-mod span{display:block; margin-top:4px; font-size:.75rem; line-height:1.4; color:var(--muted)}
@media (max-width:980px){.px-suite-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.px-suite-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- principle banner ---------- */

.px-principle{
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; justify-content:center;
  max-width:860px; margin:2rem auto 0; padding:14px 26px;
  border-radius:999px; border:1px solid var(--hairline); background:var(--tint);
  text-align:center; font-weight:600; color:var(--heading);
}
.px-principle span{font-size:.88rem; font-weight:500; color:var(--muted)}
@media (max-width:640px){.px-principle{border-radius:18px}}

/* ---------- bento (CEO cockpit) ---------- */

.px-bento{
  display:grid; grid-template-columns:repeat(6,1fr); gap:24px; margin:2.5rem 0 0;
  text-align:left;
}
.px-bento > .card{grid-column:span 3}
.px-bento > .px-s4{grid-column:span 4}
.px-bento > .px-s2{grid-column:span 2}
@media (max-width:980px){
  .px-bento{grid-template-columns:1fr 1fr}
  .px-bento > .card,.px-bento > .px-s4,.px-bento > .px-s2{grid-column:span 2}
}
.px-gauge{display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin-top:1.2rem}
.px-gauge svg{width:150px; height:150px; flex:0 0 auto}
.px-gauge .g-track{fill:none; stroke:var(--tint-strong); stroke-width:12}
.px-gauge .g-num{fill:var(--heading); font-family:"Poppins",sans-serif; font-weight:700; font-size:26px}
.px-gauge .g-lbl{fill:var(--muted); font-family:"Poppins",sans-serif; font-size:10px; letter-spacing:.08em}
.px-bars{flex:1; min-width:200px; display:grid; gap:12px}
.px-bar{font-size:.84rem}
.px-bar .row{display:flex; justify-content:space-between; gap:10px; color:var(--heading)}
.px-bar .track{height:8px; margin-top:5px; border-radius:99px; background:var(--tint-strong); overflow:hidden}
.px-bar .fill{height:100%; border-radius:99px; background:linear-gradient(90deg,var(--ref-blue),var(--ref-pink))}
.px-bar .fill.warn{background:linear-gradient(90deg,#f2c46d,#f08a9b)}
.px-phone{
  width:220px; max-width:100%; margin:1.2rem auto 0; padding:16px 14px;
  border-radius:28px; border:1px solid var(--hairline); background:var(--bg-alt);
  box-shadow:var(--shadow);
}
.px-phone .ph-h{font-size:.7rem; text-align:center; color:var(--muted); margin-bottom:.6rem}
.px-phone .ph-amt{font-size:1.35rem; font-weight:700; text-align:center; color:var(--heading)}
.px-phone .ph-sub{font-size:.7rem; text-align:center; color:var(--px-good); margin-bottom:.7rem}
.px-phone .ph-row{display:flex; justify-content:space-between; gap:8px; padding:8px 0; font-size:.74rem; border-top:1px solid var(--line)}
.px-phone .ph-row b{color:var(--heading); font-weight:600}
.px-shield{list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:8px; font-size:.9rem}
.px-shield li{
  display:flex; justify-content:space-between; gap:10px;
  padding:10px 12px; border-radius:10px; background:var(--bg-alt); border:1px solid var(--line);
}
.px-pass{color:var(--px-good); font-weight:600}
.px-hold{color:var(--px-warn); font-weight:600}
.px-blocked{color:var(--px-bad); font-weight:700}

/* ---------- calculators ---------- */

.px-calc-wrap{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:2.5rem 0 0; text-align:left;
}
.px-calc-wrap > *{min-width:0}
@media (max-width:900px){.px-calc-wrap{grid-template-columns:1fr}}
.px-calc .field{margin-bottom:14px}
.px-calc .field select{
  width:100%; padding:.8rem 1rem; font:inherit; font-size:.95rem; color:var(--heading);
  background:var(--ink-2); border:1px solid var(--line); border-radius:8px;
}
.px-calc .field input:focus,.px-calc .field select:focus{border-color:var(--brand); outline:none; box-shadow:0 0 0 3px rgba(94,114,235,.18)}
.px-row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:520px){.px-row2{grid-template-columns:1fr}}
.px-result{
  margin-top:.6rem; padding:18px; border-radius:14px;
  background:linear-gradient(135deg,rgba(94,114,235,.10),rgba(218,117,189,.10));
  border:1px solid var(--hairline);
}
.px-result .big{font-size:1.6rem; font-weight:700; color:var(--heading); line-height:1.3}
.px-result .explain{font-size:.86rem; color:var(--body); margin-top:.3rem}
.px-result .explain strong{color:var(--heading)}
.px-verdict{
  display:inline-block; margin-top:.7rem; padding:4px 12px; border-radius:999px;
  font-size:.78rem; font-weight:700;
}
.px-verdict:empty{display:none}
.px-verdict.ok{color:var(--px-good); background:rgba(111,211,168,.14); border:1px solid rgba(111,211,168,.4)}
.px-verdict.cap{color:var(--px-warn); background:rgba(242,196,109,.16); border:1px solid rgba(242,196,109,.45)}
.px-minor{margin-top:.6rem; font-family:var(--px-mono); font-size:.76rem; color:var(--muted); overflow-wrap:anywhere}

/* ---------- scenario timeline ---------- */

.px-timeline{display:grid; gap:16px; margin:2.5rem auto 0; max-width:960px; text-align:left}
.px-tl{display:grid; grid-template-columns:130px 1fr; gap:18px; align-items:start}
.px-tl .when{padding-top:18px; text-align:right; font-size:.9rem; font-weight:700; color:var(--glow)}
.px-tl .what{
  padding:18px 22px; border-radius:var(--radius);
  background:var(--ink-2); border:1px solid var(--line); box-shadow:var(--shadow);
}
.px-tl .what p{margin:0; font-size:.93rem}
.px-tl .what .sys{margin-top:.6rem; color:var(--heading)}
.px-tl .what strong{color:var(--heading)}
@media (max-width:640px){
  .px-tl{grid-template-columns:1fr; gap:6px}
  .px-tl .when{text-align:left; padding-top:0}
}
.px-outcome{
  max-width:960px; margin:1.8rem auto 0; padding:26px; text-align:center;
  border-radius:18px; border:1px solid var(--hairline);
  background:linear-gradient(135deg,rgba(94,114,235,.12),rgba(218,117,189,.12));
}
.px-outcome .big{font-size:clamp(1.6rem,1.2rem + 2vw,2.4rem); font-weight:700; line-height:1.2}
.px-outcome p{margin:.5rem auto 0; max-width:62ch}

/* ---------- pilot phases ---------- */

.px-progress{
  height:4px; margin:2.5rem 0 1.4rem; border-radius:9px;
  background:linear-gradient(90deg,var(--ref-blue),var(--ref-pink));
}
.px-phases{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:left}
@media (max-width:980px){.px-phases{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.px-phases{grid-template-columns:1fr}}
.px-days{font-size:.8rem; font-weight:700; letter-spacing:.06em; color:var(--glow)}
.px-phases h3{margin-top:.3rem}
.px-gate{
  margin-top:1rem; padding-top:.8rem; border-top:1px dashed var(--hairline);
  font-size:.82rem; color:var(--muted);
}

/* ---------- governance banner ---------- */

.px-governance{
  display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center;
  margin:2.2rem 0 0; padding:clamp(1.4rem,3vw,2rem); text-align:left;
  border-radius:20px; border:1px solid var(--hairline);
  background:linear-gradient(145deg,rgba(94,114,235,.10),rgba(218,117,189,.12));
}
.px-governance .card-ico{margin:0; width:60px; height:60px; border-radius:16px;
  background:linear-gradient(135deg,var(--ref-blue),var(--ref-pink))}
.px-governance .card-ico svg{width:28px; height:28px}
.px-governance h3{margin-bottom:.4rem}
.px-governance p{margin:0}
@media (max-width:700px){.px-governance{grid-template-columns:1fr}}

/* ---------- numbered guarantees ---------- */

.px-guarantees{max-width:900px; margin:2rem auto 0; text-align:left}
.px-guarantee{
  display:grid; grid-template-columns:64px 1fr; gap:20px;
  padding:1.4rem 0; border-bottom:1px solid var(--line);
}
.px-guarantee:last-child{border-bottom:0}
.px-guarantee .n{
  font-size:2rem; font-weight:700; line-height:1;
  background:linear-gradient(90deg,var(--ref-blue),var(--ref-pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.px-guarantee h3{font-size:1.08rem; margin-bottom:.4rem}
.px-guarantee p{margin:0; font-size:.95rem}
@media (max-width:640px){
  .px-guarantee{grid-template-columns:44px 1fr; gap:14px}
  .px-guarantee .n{font-size:1.6rem}
}