/* ============================================================
   UGLYCASH Performance V5 · best-of additions (over Codex base)
   - Sticky mobile CTA bar (mobile conversion floor)
   - Eligible-methods proof row (hero of pillar 01)
   - Inline MoneyGram mark
   Loaded AFTER landing.css + perf.css so these win.
   ============================================================ */

/* ---------- sticky mobile CTA ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(251,250,248,.96); backdrop-filter:blur(10px);
  border-top:2px solid var(--ink);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  transform:translateY(125%); transition:transform .26s ease;
}
.sticky-cta.show{ transform:none; }
.sticky-cta .scta-btn{
  display:flex; width:100%; align-items:center; justify-content:center;
  min-height:54px; border:2px solid var(--mag); border-radius:999px;
  background:var(--mag); color:#fff; font-family:var(--display);
  text-transform:uppercase; font-size:17px; letter-spacing:.01em;
}
.sticky-cta .scta-btn:active{ transform:translateY(1px); }
@media (min-width:761px){ .sticky-cta{ display:none !important; } }

/* ---------- eligible-methods proof row (pillar 01) ---------- */
.methods{ margin-top:18px; }
.methods .m-lbl{
  display:block; font-family:var(--sub); font-weight:700; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin-bottom:10px;
}
.methods .m-row{ display:flex; flex-wrap:wrap; gap:8px; }
.methods .m-logo, .methods .m-rail{
  display:inline-flex; align-items:center; gap:6px;
  border:1.5px solid var(--line); border-radius:999px;
  padding:6px 12px 6px 7px; background:#fff;
  font-family:var(--sub); font-weight:600; font-size:13px; color:var(--ink); line-height:1;
}
.methods .m-logo img{ width:18px; height:18px; border-radius:5px; object-fit:contain; }
.methods .m-rail{ padding-left:10px; }
.methods .m-flag{ width:16px; height:16px; border-radius:50%; object-fit:cover; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); }
.methods .m-note{ display:block; margin-top:10px; font-family:var(--sub); font-size:11.5px; color:var(--mute); line-height:1.35; }

/* ---------- trust band · eligible methods (card 2) ---------- */
.elig-methods{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.elig-methods .em{ display:inline-flex; align-items:center; gap:6px;
  border:1.5px solid var(--line); border-radius:999px; padding:5px 11px 5px 6px;
  background:#fff; font-family:var(--sub); font-weight:600; font-size:12.5px; color:var(--ink); line-height:1; }
.elig-methods .em img{ width:16px; height:16px; border-radius:5px; object-fit:contain; }
.elig-methods .em .em-flag{ width:15px; height:15px; border-radius:50%; object-fit:cover; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); }

/* ---------- trust band · availability countries (card 3) ---------- */
.ctry-list{ list-style:none; margin:4px 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:9px 14px; }
.ctry-list li{ display:flex; align-items:center; gap:8px;
  font-family:var(--sub); font-size:13.5px; color:var(--ink); line-height:1.05; white-space:nowrap; }
.ctry-list li:last-child{ grid-column:1 / -1; }
.cflag{ width:18px; height:18px; flex:none; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }

/* MoneyGram inline mark (kept un-bold, paired with availability copy) */
.inline-mg{ height:1.02em; width:auto; display:inline-block; vertical-align:-0.15em; }

/* ---------- card 02 · wallet compatibility line ---------- */
.utility-compat{ display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  font-family:var(--sub); font-weight:600; font-size:13px; color:var(--mute); line-height:1.2; }
.utility-compat svg{ width:18px; height:18px; flex:none; color:var(--ink); }
.utility-compat img{ width:20px; height:20px; flex:none; object-fit:contain; }

/* ---------- one-shot section motion ----------
   Motion is a comprehension aid only. The static layout remains the source of truth. */
.card-visual img{
  position:relative;
  z-index:1;
  transform-origin:50% 55%;
  will-change:transform;
}
.card-visual::before{
  content:"";
  position:absolute;
  inset:20% 13%;
  border-radius:50%;
  background:radial-gradient(60% 58% at 50% 50%, rgba(250,0,255,.42), rgba(128,224,255,.13) 45%, transparent 72%);
  opacity:.62;
  transform:scale(.96);
  pointer-events:none;
}
.card-visual::after{
  content:"";
  position:absolute;
  width:min(390px, 88%);
  aspect-ratio:1024 / 645;
  border-radius:22px;
  background:linear-gradient(112deg, transparent 0 42%, rgba(255,255,255,.42) 49%, transparent 57%);
  opacity:0;
  transform:translateX(-34%) skewX(-9deg);
  pointer-events:none;
  z-index:2;
  mix-blend-mode:screen;
}
.utility-card.visa.motion-in .card-visual img{
  animation:visaSettle .82s cubic-bezier(.16,1,.3,1) both;
}
.utility-card.visa.motion-in .card-visual::before{
  animation:visaHalo 1.25s ease-out both;
}
.utility-card.visa.motion-in .card-visual::after{
  animation:visaShine .92s ease-out .2s both;
}

.advance-bar i{
  transition:width 2.4s cubic-bezier(.16,1,.3,1);
}
.advance-module.motion-in .advance-line{
  animation:advanceRowSettle .58s cubic-bezier(.16,1,.3,1) both;
}
.advance-module.motion-in .advance-line:nth-of-type(3){
  animation-delay:.12s;
}

.diff-card.ugly.motion-in .access-payoff{
  animation:payoffPulse .72s ease-out both;
}
.access-loop i{
  position:relative;
  overflow:hidden;
  background:#d8d6cf;
}
.access-loop i::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--mag);
  transform:scaleX(0);
  transform-origin:left center;
}
.access-loop.motion-in i::after{
  animation:loopConnector .58s ease-out forwards;
}
.access-loop.motion-in i:nth-of-type(2)::after{
  animation-delay:.18s;
}
.access-loop.motion-in strong{
  animation:loopPayoff .7s ease-out .26s both;
}

@keyframes visaSettle{
  0%{ transform:translateY(8px) scale(.985); }
  100%{ transform:none; }
}
@keyframes visaHalo{
  0%{ opacity:.22; transform:scale(.82); }
  48%{ opacity:.86; transform:scale(1.05); }
  100%{ opacity:.62; transform:scale(.96); }
}
@keyframes visaShine{
  0%{ opacity:0; transform:translateX(-45%) skewX(-9deg); }
  18%{ opacity:.65; }
  100%{ opacity:0; transform:translateX(45%) skewX(-9deg); }
}
@keyframes advanceRowSettle{
  0%{ transform:translateY(8px); }
  100%{ transform:none; }
}
@keyframes payoffPulse{
  0%{ text-shadow:0 0 0 rgba(250,0,255,0); transform:translateY(4px); }
  55%{ text-shadow:0 0 24px rgba(250,0,255,.72); }
  100%{ text-shadow:0 0 18px rgba(250,0,255,.48); transform:none; }
}
@keyframes loopConnector{
  to{ transform:scaleX(1); }
}
@keyframes loopPayoff{
  0%{ box-shadow:none; transform:translateY(4px); }
  55%{ box-shadow:0 0 0 6px rgba(250,0,255,.12), 0 0 22px rgba(250,0,255,.28); }
  100%{ box-shadow:none; transform:none; }
}

@media (max-width:760px){
  .card-visual::after{ width:84%; }
  .access-loop i::after{
    transform:scaleY(0);
    transform-origin:center top;
  }
  .access-loop.motion-in i::after{
    animation:loopConnectorY .58s ease-out forwards;
  }
}
@keyframes loopConnectorY{
  to{ transform:scaleY(1); }
}

/* ---------- reveal robustness ----------
   On a paid landing, content must NEVER be invisible (blank-flash / LCP / JS-fail risk).
   Force opacity visible; keep only a subtle slide as the entrance enhancement. */
html.js .rv{ opacity:1 !important; }
html.js .rv{ transform:translateY(18px); transition:transform .55s ease; }
html.js .rv.in{ transform:none; }
@media (prefers-reduced-motion:reduce){
  html.js .rv{ transform:none; transition:none; }
  .card-visual img,
  .card-visual::before,
  .card-visual::after,
  .advance-module .advance-line,
  .diff-card.ugly .access-payoff,
  .access-loop strong,
  .access-loop i::after{
    animation:none !important;
    transition:none !important;
  }
  .access-loop i::after{ transform:none; }
}

/* ---------- narrative · professions grid (ported from wedge S1) ---------- */
.professions-section{ background:var(--paper2); }
.pro-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pro-cell{ background:var(--card); border:2px solid var(--ink); border-radius:20px; padding:24px;
  display:flex; flex-direction:column; gap:12px; min-height:172px; }
.pro-cell .si{ width:34px; height:34px; }
.pro-cell h4{ font-family:var(--display); text-transform:uppercase; font-size:21px; line-height:.98; margin:0; }
.pro-cell p{ font-family:var(--sub); font-size:14px; color:var(--mute); margin:auto 0 0; line-height:1.4; }
.pro-cell.anchor{ background:var(--ink); color:#fff; justify-content:center; }
.pro-cell.anchor h4{ font-family:var(--ad-head); font-size:34px; line-height:.9; }
.pro-cell.anchor .mag{ color:var(--mag); }

/* ---------- narrative · Adelantos use-cases chips (ported from wedge S4) ---------- */
.uc-chips{ display:flex; flex-wrap:wrap; gap:13px; }
.uc-chips .chip{ display:inline-flex; align-items:center; gap:.5em; border:2px solid var(--ink); color:var(--ink); }
.uc-chips .chip svg{ width:16px; height:16px; flex:none; }
.uc-chips .chip:nth-child(3n+2){ background:var(--ink); color:#fff; }

@media (max-width:860px){ .pro-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .pro-grid{ grid-template-columns:1fr; } }

/* ---------- restore brand green behind MoneyGram (makes the red mark pop) ---------- */
:root{ --lime:#c5f72e; }

/* ---------- highlight + subtle asterisk (claim hygiene) ---------- */
.problem-card .mag{ color:var(--mag); }
sup.ast{ color:var(--mute); font-size:.6em; font-weight:700; vertical-align:super; margin-left:1px; }
.problem-card sup.ast{ color:#8f8f8f; margin-left:2px; }
.advance-module small sup.ast{ color:var(--mute); }

/* ---------- advance module: simplified percentage rows ---------- */
.adv-line-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; }
.adv-line-top b{ margin-bottom:0; }
.adv-pct{ font-family:var(--display); font-size:15px; color:var(--ink); letter-spacing:.01em; }

/* ---------- disclosures footnote band (disclaimers grouped here, referenced by *) ---------- */
.disclosures{ background:var(--paper); border-top:1px solid var(--line); padding:32px 0 38px; }
.disclosures .wrap{ max-width:900px; }
.disclosures p{ font-family:var(--sub); font-size:12.5px; line-height:1.55; color:var(--mute); margin:0; }
.disclosures p + p{ margin-top:10px; }
.disclosures em{ font-style:normal; color:var(--ink2); }
.disclosures sup.ast{ color:var(--mag); font-size:.85em; }

@media (max-width:760px){
  /* keep the proof row tidy on phones */
  .methods .m-logo, .methods .m-rail{ font-size:12.5px; }
}