/* ============================================================================
   Resseler (Jumlo) web-app — v3 design system
   One brand hue (the tenant's own --mm-primary), neutral surfaces, soft depth, generous spacing.
   Mobile-first; 2-column layouts from 900px. Everything is tokenised below.
   ============================================================================ */
:root{
  --jv-a: var(--mm-primary, #6d28d9);
  --jv-a-2: color-mix(in oklab, var(--jv-a) 74%, #0a0f24);          /* darker shade of the brand for depth */
  --jv-a-soft: color-mix(in oklab, var(--jv-a) 9%, var(--surface, #fff));
  --jv-a-line: color-mix(in oklab, var(--jv-a) 22%, var(--ring, #e6e9f2));
  --jv-ink: var(--text, #0f172a);
  --jv-mute: var(--muted, #64748b);
  --jv-line: var(--ring, #e6e9f2);
  --jv-card: var(--surface, #fff);
  --jv-bg2: var(--surface-2, #f3f6fb);
  --jv-good: #16a34a; --jv-bad: #dc2626; --jv-warn: #d97706;
  --jv-r-s: 14px; --jv-r-m: 20px; --jv-r-l: 28px;
  --jv-sh-s: 0 1px 2px rgba(15,23,42,.05), 0 2px 8px rgba(15,23,42,.04);
  --jv-sh-m: 0 2px 4px rgba(15,23,42,.04), 0 10px 28px color-mix(in oklab, var(--jv-a) 10%, rgba(15,23,42,.06));
  --jv-sh-l: 0 6px 12px rgba(15,23,42,.05), 0 22px 48px color-mix(in oklab, var(--jv-a) 20%, rgba(15,23,42,.08));
  --jv-ease: cubic-bezier(.22,1,.36,1);
  --jv-spring: cubic-bezier(.34,1.56,.64,1);
  --jv-gap: 14px;
}
.jv, .jv *{ box-sizing:border-box; }
.jv{ position:relative; max-width:1040px; margin:0 auto; padding:2px 0 104px; }
.jv a{ -webkit-tap-highlight-color:transparent; }
.jv button{ font-family:inherit; }
@media (min-width:900px){ .jv{ padding-bottom:64px; } }

/* ── reveal (hidden only once the script is confirmed running) ────────── */
html.jv-js .jv-reveal{ opacity:0; transform:translateY(22px) scale(.97); filter:blur(5px); transition:opacity .7s var(--jv-ease), transform .7s var(--jv-ease), filter .7s var(--jv-ease); transition-delay:var(--d,0ms); }
html.jv-js .jv-reveal.is-in{ opacity:1; transform:none; filter:none; }

/* ── brand banner ─────────────────────────────────────────────────────── */
.jv-banner{
  position:relative; overflow:hidden; isolation:isolate; display:flex; align-items:center; gap:14px;
  padding:18px 20px; margin-bottom:var(--jv-gap); border-radius:var(--jv-r-l); color:#fff;
  background:linear-gradient(135deg, var(--jv-a) 0%, var(--jv-a-2) 100%);
  box-shadow:var(--jv-sh-l);
}
.jv-banner::before{ /* fine dotted texture */
  content:''; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.22) 1px, transparent 1.4px); background-size:18px 18px;
  -webkit-mask-image:linear-gradient(100deg, transparent 20%, #000 100%); mask-image:linear-gradient(100deg, transparent 20%, #000 100%);
}
.jv-banner .orb{ position:absolute; border-radius:50%; z-index:-1; pointer-events:none; background:#fff; filter:blur(40px); animation:jvFloat 11s ease-in-out infinite; }
.jv-banner .orb.a{ width:220px; height:220px; opacity:.16; top:-110px; right:-60px; }
.jv-banner .orb.b{ width:140px; height:140px; opacity:.10; bottom:-70px; left:30%; animation-delay:-5s; }
@keyframes jvFloat{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-14px,10px) scale(1.12); } }
.jv-logo{ flex:none; width:54px; height:54px; border-radius:17px; padding:4px; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,.22); animation:jvPop .7s var(--jv-spring) both; }
.jv-logo img{ width:100%; height:100%; object-fit:contain; border-radius:13px; }
@keyframes jvPop{ from{ transform:scale(.5) rotate(-10deg); opacity:0; } to{ transform:none; opacity:1; } }
.jv-bn-t{ min-width:0; flex:1; }
.jv-bn-t small{ display:block; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.75; }
.jv-bn-t b{ display:block; font-size:clamp(19px,4.6vw,24px); font-weight:800; letter-spacing:-.3px; line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jv-live{ flex:none; display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:800; padding:7px 12px; border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(8px); white-space:nowrap; }
.jv-live i{ width:8px; height:8px; border-radius:50%; background:#4ade80; animation:jvPulse 2s infinite; }
.jv-live.off i{ background:#fbbf24; animation:none; }
@keyframes jvPulse{ 0%{ box-shadow:0 0 0 0 rgba(74,222,128,.6); } 70%{ box-shadow:0 0 0 8px rgba(74,222,128,0); } 100%{ box-shadow:0 0 0 0 rgba(74,222,128,0); } }

/* ── section title ────────────────────────────────────────────────────── */
.jv-h{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:22px 4px 12px; }
.jv-h h2{ margin:0; font-size:17px; font-weight:800; letter-spacing:-.2px; }
.jv-h a,.jv-h span{ font-size:12px; font-weight:700; color:var(--jv-mute); text-decoration:none; }
.jv-h a{ color:var(--jv-a); }

/* ── provider grid + card ─────────────────────────────────────────────── */
.jv-grid{ display:grid; gap:var(--jv-gap); grid-template-columns:1fr; }
@media (min-width:640px){ .jv-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .jv-grid{ grid-template-columns:repeat(3,1fr); } }
.jv-pc{
  --pc: var(--jv-a);
  position:relative; display:flex; flex-direction:column; gap:18px; padding:18px; overflow:hidden; isolation:isolate; text-decoration:none; color:inherit;
  border-radius:var(--jv-r-l); background:var(--jv-card); border:1px solid var(--jv-line); box-shadow:var(--jv-sh-s);
  transition:transform .45s var(--jv-ease), box-shadow .45s var(--jv-ease), border-color .3s;
}
.jv-pc::before{ /* provider-coloured wash + cursor glare */
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(260px 200px at var(--mx,18%) var(--my,0%), color-mix(in oklab, var(--pc) 20%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in oklab, var(--pc) 7%, transparent), transparent 55%);
}
@media (hover:hover){
  .jv-pc:hover{ transform:translateY(-6px); box-shadow:var(--jv-sh-l); border-color:color-mix(in oklab, var(--pc) 45%, var(--jv-line)); }
  .jv-pc:hover .jv-pc-ic{ transform:translateY(-3px) rotate(-5deg) scale(1.06); }
  .jv-pc:hover .jv-go{ background:var(--pc); color:#fff; transform:translateX(4px); }
}
.jv-pc:active{ transform:scale(.975); transition-duration:.12s; }
.jv-pc.off{ filter:saturate(.55); }
.jv-pc-head{ display:flex; align-items:center; gap:14px; }
.jv-pc-ic{
  flex:none; width:64px; height:64px; border-radius:20px; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:26px;
  background:color-mix(in oklab, var(--pc) 14%, var(--jv-card)); box-shadow:0 10px 22px color-mix(in oklab, var(--pc) 28%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--pc) 16%, transparent);
  transition:transform .5s var(--jv-spring);
}
.jv-pc-ic img{ width:100%; height:100%; object-fit:cover; }
.jv-pc-t{ min-width:0; flex:1; }
.jv-pc-t b{ display:block; font-size:17px; font-weight:800; letter-spacing:-.25px; line-height:1.2; }
.jv-pc-t span{ display:block; margin-top:3px; font-size:12.5px; font-weight:600; color:var(--jv-mute); }
.jv-pc-foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.jv-rate{ line-height:1; }
.jv-rate small{ display:block; margin-bottom:6px; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--jv-mute); }
.jv-rate b{ font-size:34px; font-weight:800; letter-spacing:-1.2px; color:var(--pc); font-variant-numeric:tabular-nums; }
.jv-rate em{ display:inline-block; margin-left:8px; font-style:normal; font-size:12px; font-weight:800; padding:4px 9px; border-radius:999px; color:var(--jv-good); background:color-mix(in oklab, var(--jv-good) 12%, var(--jv-card)); vertical-align:middle; }
.jv-go{ flex:none; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--pc); background:color-mix(in oklab, var(--pc) 11%, var(--jv-card)); transition:all .4s var(--jv-ease); }
.jv-chip{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; padding:5px 10px; border-radius:999px; }
.jv-chip.up{ color:var(--jv-good); background:color-mix(in oklab, var(--jv-good) 11%, var(--jv-card)); }
.jv-chip.down{ color:var(--jv-bad); background:color-mix(in oklab, var(--jv-bad) 10%, var(--jv-card)); }
.jv-chip i{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.jv-chip.lim{ color:var(--jv-warn); background:color-mix(in oklab, var(--jv-warn) 12%, var(--jv-card)); }

/* ── primary button ───────────────────────────────────────────────────── */
.jv-btn{
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:56px; border:0; border-radius:18px;
  font-size:16px; font-weight:800; letter-spacing:.1px; color:#fff; text-decoration:none; cursor:pointer;
  background:linear-gradient(135deg, var(--jv-a), var(--jv-a-2)); box-shadow:0 10px 24px color-mix(in oklab, var(--jv-a) 38%, transparent);
  transition:transform .2s var(--jv-ease), box-shadow .25s, opacity .2s;
}
.jv-btn::after{ content:''; position:absolute; top:0; bottom:0; width:55%; left:-80%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.3), transparent); transform:skewX(-18deg); animation:jvBtn 4s ease-in-out infinite; }
@keyframes jvBtn{ 0%,60%{ left:-80%; } 100%{ left:140%; } }
.jv-btn:active{ transform:scale(.97); }
@media (hover:hover){ .jv-btn:hover{ box-shadow:0 14px 30px color-mix(in oklab, var(--jv-a) 46%, transparent); transform:translateY(-1px); } .jv-btn:hover svg{ transform:translateX(4px); } }
.jv-btn:disabled{ opacity:.45; box-shadow:none; cursor:not-allowed; transform:none; }
.jv-btn:disabled::after{ display:none; }
.jv-btn svg{ transition:transform .3s var(--jv-ease); }
.jv-ripple{ position:absolute; border-radius:50%; background:rgba(255,255,255,.4); transform:scale(0); animation:jvRip .6s ease-out forwards; pointer-events:none; }
@keyframes jvRip{ to{ transform:scale(3.4); opacity:0; } }

/* ── stepper ──────────────────────────────────────────────────────────── */
.jv-steps{ display:flex; align-items:center; margin:2px 6px 16px; }
.jv-s{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; color:var(--jv-mute); white-space:nowrap; }
.jv-s i{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-style:normal; font-size:12px; background:var(--jv-card); border:2px solid var(--jv-line); transition:all .4s var(--jv-ease); }
.jv-s.done i{ background:var(--jv-a); border-color:var(--jv-a); color:#fff; }
.jv-s.now{ color:var(--jv-ink); }
.jv-s.now i{ border-color:var(--jv-a); color:var(--jv-a); box-shadow:0 0 0 5px color-mix(in oklab, var(--jv-a) 15%, transparent); }
.jv-sl{ flex:1; height:3px; margin:0 10px; border-radius:3px; background:var(--jv-line); position:relative; overflow:hidden; min-width:14px; }
.jv-sl.done::after{ content:''; position:absolute; inset:0; background:var(--jv-a); transform-origin:left; animation:jvGrow .8s var(--jv-ease) both; }
@keyframes jvGrow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@media (max-width:380px){ .jv-s span{ display:none; } .jv-s.now span{ display:inline; } }

/* ── cards + split layout ─────────────────────────────────────────────── */
.jv-card{ position:relative; padding:18px; margin-bottom:var(--jv-gap); border-radius:var(--jv-r-l); background:var(--jv-card); border:1px solid var(--jv-line); box-shadow:var(--jv-sh-m); }
.jv-split{ display:grid; gap:var(--jv-gap); grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .jv-split{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:22px; } .jv-aside{ position:sticky; top:84px; } }

/* provider header (amount/pay) */
.jv-ph{ --pc:var(--jv-a); display:flex; align-items:center; gap:14px; margin-bottom:18px; padding-bottom:16px; border-bottom:1px dashed var(--jv-line); }
.jv-ph .jv-pc-ic{ width:56px; height:56px; border-radius:18px; }
.jv-ph b{ display:block; font-size:17px; font-weight:800; letter-spacing:-.2px; }
.jv-ph span{ display:block; margin-top:2px; font-size:12.5px; font-weight:600; color:var(--jv-mute); }
.jv-ph .pill{ margin-left:auto; flex:none; font-size:14px; font-weight:800; padding:8px 13px; border-radius:14px; color:var(--pc); background:color-mix(in oklab, var(--pc) 11%, var(--jv-card)); }

/* amount input */
.jv-lbl{ display:block; margin:0 2px 8px; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--jv-mute); }
.jv-amtbox{ position:relative; }
.jv-amtbox .cur{ position:absolute; left:18px; top:50%; transform:translateY(-50%); font-size:26px; font-weight:800; color:var(--jv-a); pointer-events:none; }
.jv-amt{
  width:100%; height:68px; padding:0 18px 0 42px; border-radius:20px; font-size:30px; font-weight:800; letter-spacing:-.5px; color:inherit; font-variant-numeric:tabular-nums;
  background:var(--jv-bg2); border:2px solid transparent; transition:border-color .2s, box-shadow .25s, background .2s;
}
.jv-amt:focus{ outline:none; background:var(--jv-card); border-color:var(--jv-a); box-shadow:0 0 0 5px color-mix(in oklab, var(--jv-a) 14%, transparent); }
.jv-amt.bad{ border-color:var(--jv-bad); box-shadow:0 0 0 5px color-mix(in oklab, var(--jv-bad) 12%, transparent); }
.jv-amt::placeholder{ color:color-mix(in oklab, var(--jv-mute) 50%, transparent); }
.jv-err{ min-height:18px; margin:7px 3px 0; font-size:12px; font-weight:700; color:var(--jv-bad); }
.jv-quick{ display:flex; gap:8px; overflow-x:auto; margin:12px -2px 0; padding:2px; scrollbar-width:none; }
.jv-quick::-webkit-scrollbar{ display:none; }
.jv-q{ flex:none; padding:9px 16px; border-radius:999px; font-size:13.5px; font-weight:800; color:var(--jv-ink); background:var(--jv-card); border:1.5px solid var(--jv-line); cursor:pointer; transition:all .25s var(--jv-ease); }
.jv-q:active{ transform:scale(.92); }
@media (hover:hover){ .jv-q:hover{ border-color:var(--jv-a); color:var(--jv-a); } }
.jv-q.on{ background:var(--jv-a); border-color:var(--jv-a); color:#fff; box-shadow:0 6px 14px color-mix(in oklab, var(--jv-a) 30%, transparent); }

/* tier chips */
.jv-tiers{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.jv-tier{ display:inline-flex; align-items:center; gap:9px; padding:8px 13px; border-radius:999px; font-size:12.5px; background:var(--jv-bg2); border:1.5px solid transparent; transition:all .35s var(--jv-ease); }
.jv-tier .rng{ font-weight:700; color:var(--jv-mute); }
.jv-tier .rt{ font-weight:800; color:var(--jv-ink); font-variant-numeric:tabular-nums; }
.jv-tier.on{ background:color-mix(in oklab, var(--jv-a) 12%, var(--jv-card)); border-color:var(--jv-a); transform:scale(1.04); }
.jv-tier.on .rng{ color:var(--jv-a); } .jv-tier.on .rt{ color:var(--jv-a); }

/* receipt (right column / below on phones) */
.jv-rcpt{ position:relative; overflow:hidden; isolation:isolate; padding:20px; border-radius:var(--jv-r-l); color:#fff; background:linear-gradient(145deg, var(--jv-a), var(--jv-a-2)); box-shadow:var(--jv-sh-l); }
.jv-rcpt::before{ content:''; position:absolute; inset:-30% -40%; z-index:-1; background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%); animation:jvSheen 7s ease-in-out infinite; }
@keyframes jvSheen{ 0%{ transform:translateX(-30%); } 55%,100%{ transform:translateX(30%); } }
.jv-rcpt small{ display:block; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; opacity:.8; }
.jv-rcpt .big{ display:block; margin:6px 0 10px; font-size:clamp(38px,9vw,46px); font-weight:800; letter-spacing:-1.4px; line-height:1; font-variant-numeric:tabular-nums; }
.jv-rcpt .big.bump{ animation:jvBump .4s var(--jv-spring); }
@keyframes jvBump{ 0%{ transform:scale(1); } 40%{ transform:scale(1.07); } 100%{ transform:scale(1); } }
.jv-gain{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:800; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.18); }
.jv-lines{ margin-top:16px; padding-top:6px; border-top:1px dashed rgba(255,255,255,.35); }
.jv-ln{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; font-size:13.5px; }
.jv-ln span{ opacity:.82; font-weight:600; }
.jv-ln b{ font-weight:800; font-variant-numeric:tabular-nums; }
.jv-rcpt .jv-btn{ margin-top:12px; background:#fff; color:var(--jv-a-2); box-shadow:0 10px 24px rgba(0,0,0,.2); }
.jv-rcpt .jv-btn::after{ background:linear-gradient(100deg, transparent, color-mix(in oklab, var(--jv-a) 22%, transparent), transparent); }

/* notes */
.jv-note{ display:flex; gap:10px; align-items:center; padding:12px 14px; margin-bottom:var(--jv-gap); border-radius:var(--jv-r-s); font-size:13px; font-weight:600; line-height:1.45; background:var(--jv-a-soft); border:1px solid var(--jv-a-line); }
.jv-note i{ flex:none; font-style:normal; font-size:16px; }
.jv-note.bad{ background:color-mix(in oklab, var(--jv-bad) 9%, var(--jv-card)); border-color:color-mix(in oklab, var(--jv-bad) 30%, transparent); color:var(--jv-bad); animation:jvShake .5s var(--jv-ease); }
@keyframes jvShake{ 10%,90%{ transform:translateX(-2px); } 20%,80%{ transform:translateX(4px); } 30%,50%,70%{ transform:translateX(-6px); } 40%,60%{ transform:translateX(6px); } }

/* summary strip (pay, phones) */
.jv-strip{ display:flex; align-items:center; gap:12px; padding:12px 14px; margin-bottom:var(--jv-gap); border-radius:var(--jv-r-m); color:#fff; background:linear-gradient(135deg, var(--jv-a), var(--jv-a-2)); box-shadow:var(--jv-sh-m); }
.jv-strip .ic{ flex:none; width:44px; height:44px; border-radius:14px; overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center; }
.jv-strip .ic img{ width:100%; height:100%; object-fit:cover; }
.jv-strip small{ display:block; font-size:10.5px; font-weight:700; opacity:.8; }
.jv-strip b{ display:block; font-size:20px; font-weight:800; letter-spacing:-.4px; font-variant-numeric:tabular-nums; line-height:1.15; }
.jv-strip .mid{ flex:1; min-width:0; }
.jv-strip .get{ text-align:right; padding:6px 12px; border-radius:13px; background:rgba(255,255,255,.18); }
.jv-strip .get b{ font-size:17px; }
@media (min-width:900px){ .jv-strip{ display:none; } }
@media (max-width:899px){ .jv-aside.hide-m{ display:none; } }

/* two screens (pay) */
.jv-screen{ display:none; }
.jv-screen.is-on{ display:block; animation:jvSlide .5s var(--jv-ease) both; }
@keyframes jvSlide{ from{ opacity:0; transform:translateX(24px); } to{ opacity:1; transform:none; } }
.jv-back{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 14px; margin-bottom:var(--jv-gap); border-radius:var(--jv-r-m); cursor:pointer; text-align:left; color:inherit; background:var(--jv-card); border:1.5px solid var(--jv-a-line); transition:transform .15s; }
.jv-back:active{ transform:scale(.98); }
.jv-back span{ font-size:22px; font-weight:800; color:var(--jv-a); line-height:1; }
.jv-back i{ width:36px; height:24px; border-radius:7px; overflow:hidden; background:#fff; border:1px solid var(--jv-line); display:block; }
.jv-back i:empty{ display:none; }
.jv-back i img{ width:100%; height:100%; object-fit:cover; display:block; }
.jv-back b{ flex:1; font-size:14px; font-weight:800; }
.jv-back em{ font-style:normal; font-size:12px; font-weight:800; color:var(--jv-a); }

/* ── legacy pay-form blocks, restyled to match ────────────────────────── */
.jv .jm-panel{ position:relative; padding:18px; margin-bottom:var(--jv-gap); border-radius:var(--jv-r-l); background:var(--jv-card); border:1px solid var(--jv-line); box-shadow:var(--jv-sh-m); --ac:var(--jv-a); }
.jv .jm-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.jv .jm-head-ic{ width:34px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--jv-a); }
.jv .jm-head-t{ font-size:15px; font-weight:800; letter-spacing:-.2px; color:var(--jv-ink); }
.jv .jm-subhead{ display:flex; align-items:center; gap:6px; margin:0 2px 8px; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--jv-mute); }
.jv .jm-method{ position:relative; display:flex; align-items:center; gap:14px; width:100%; margin-bottom:10px; padding:12px 14px; border-radius:var(--jv-r-m); cursor:pointer; background:var(--jv-card); border:2px solid var(--jv-line); transition:all .3s var(--jv-ease); }
.jv .jm-method:last-child{ margin-bottom:0; }
.jv .jm-method:active{ transform:scale(.985); }
@media (hover:hover){ .jv .jm-method:hover{ border-color:var(--jv-a-line); box-shadow:var(--jv-sh-s); } }
.jv .jm-method:has(input:checked){ border-color:var(--jv-a); background:var(--jv-a-soft); box-shadow:0 8px 20px color-mix(in oklab, var(--jv-a) 16%, transparent); }
.jv .jm-method-logo{ flex:none; width:84px; aspect-ratio:16/10; border-radius:13px; overflow:hidden; background:#fff; border:1px solid var(--jv-line); display:flex; align-items:center; justify-content:center; }
.jv .jm-method-logo img{ width:100%; height:100%; object-fit:cover; display:block; }
.jv .jm-method-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.jv .jm-method-name{ font-size:16px; font-weight:800; letter-spacing:-.2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jv .jm-method-type{ align-self:flex-start; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:999px; color:var(--jv-mute); background:var(--jv-bg2); }
.jv .jm-method-check{ flex:none; width:24px; height:24px; border-radius:50%; border:2px solid var(--jv-line); position:relative; transition:all .25s var(--jv-ease); }
.jv .jm-method:has(input:checked) .jm-method-check{ background:var(--jv-a); border-color:var(--jv-a); }
.jv .jm-method:has(input:checked) .jm-method-check::after{ content:''; position:absolute; left:7px; top:3px; width:6px; height:11px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); animation:jvPop .35s var(--jv-spring) both; }
.jv .jm-method input{ position:absolute; opacity:0; width:0; height:0; }
.jv .jm-phone-wrap{ position:relative; display:flex; align-items:center; }
.jv .jm-phone-ic{ position:absolute; left:15px; display:flex; color:var(--jv-mute); pointer-events:none; }
.jv .jm-phone-input{ width:100%; height:58px; padding:0 46px 0 46px; border-radius:18px; font-size:18px; font-weight:800; letter-spacing:.3px; color:inherit; background:var(--jv-bg2); border:2px solid transparent; transition:all .2s; font-variant-numeric:tabular-nums; }
.jv .jm-phone-input:focus{ outline:none; background:var(--jv-card); border-color:var(--jv-a); box-shadow:0 0 0 5px color-mix(in oklab, var(--jv-a) 14%, transparent); }
.jv .jm-valid-ic{ position:absolute; right:14px; width:24px; height:24px; border-radius:50%; display:none; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:#fff; animation:jvPop .3s var(--jv-spring) both; }
.jv .jm-phone-wrap.is-valid .jm-valid-ic{ display:flex; background:var(--jv-good); }
.jv .jm-phone-wrap.is-invalid .jm-valid-ic{ display:flex; background:var(--jv-bad); }
.jv .jm-phone-wrap.is-valid .jm-phone-input{ border-color:var(--jv-good); }
.jv .jm-phone-wrap.is-invalid .jm-phone-input{ border-color:var(--jv-bad); }
.jv .jm-field-err{ min-height:16px; margin:6px 3px 0; font-size:12px; font-weight:700; color:var(--jv-bad); }
.jv .jm-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.jv .jm-chip{ padding:7px 13px; border-radius:999px; cursor:pointer; font-size:12.5px; font-weight:800; font-family:ui-monospace,monospace; color:var(--jv-a); background:var(--jv-a-soft); border:1.5px solid var(--jv-a-line); transition:transform .15s var(--jv-spring); }
.jv .jm-chip:active{ transform:scale(.93); }
.jv .jm-rukumo-check{ display:flex; align-items:center; gap:10px; margin-top:18px; padding-top:16px; border-top:1px dashed var(--jv-line); font-size:13px; font-weight:700; cursor:pointer; }
.jv .jm-rukumo-check input{ width:20px; height:20px; accent-color:var(--jv-a); flex:none; }
.jv .jm-rukumo-warn{ display:none; margin-top:10px; padding:11px 13px; border-radius:var(--jv-r-s); font-size:12px; line-height:1.55; background:color-mix(in oklab, var(--jv-warn) 11%, var(--jv-card)); border:1px solid color-mix(in oklab, var(--jv-warn) 32%, transparent); }
.jv .jm-rukumo-warn.is-shown{ display:block; }
.jv .jm-note{ display:flex; gap:8px; align-items:center; justify-content:center; margin:6px 0 14px; font-size:12px; color:var(--jv-mute); }

/* ── orders ───────────────────────────────────────────────────────────── */
.jv-filters{ display:flex; gap:8px; overflow-x:auto; padding:2px; margin-bottom:6px; scrollbar-width:none; }
.jv-filters::-webkit-scrollbar{ display:none; }
.jv-f{ flex:none; padding:9px 15px; border-radius:999px; font-size:13px; font-weight:800; cursor:pointer; color:var(--jv-ink); background:var(--jv-card); border:1.5px solid var(--jv-line); transition:all .25s var(--jv-ease); }
.jv-f b{ margin-left:6px; font-weight:800; opacity:.55; }
.jv-f.on{ color:#fff; border-color:var(--jv-a); background:var(--jv-a); box-shadow:0 8px 18px color-mix(in oklab, var(--jv-a) 30%, transparent); }
.jv-f.on b{ opacity:.8; }
.jv-olist{ display:grid; gap:10px; grid-template-columns:1fr; }
@media (min-width:760px){ .jv-olist{ max-width:780px; } }
.jv-day{ margin:10px 4px 0; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--jv-mute); }
.jv-ord{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:var(--jv-r-m); background:var(--jv-card); border:1px solid var(--jv-line); box-shadow:var(--jv-sh-s); transition:transform .3s var(--jv-ease), box-shadow .3s; }
@media (hover:hover){ .jv-ord:hover{ transform:translateY(-3px); box-shadow:var(--jv-sh-m); } }
.jv-ord-ic{ flex:none; width:44px; height:44px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-size:19px; background:var(--jv-bg2); }
.jv-ord-ic.good{ background:color-mix(in oklab, var(--jv-good) 13%, var(--jv-card)); }
.jv-ord-ic.bad{ background:color-mix(in oklab, var(--jv-bad) 12%, var(--jv-card)); }
.jv-ord-ic.wait{ background:color-mix(in oklab, var(--jv-warn) 14%, var(--jv-card)); }
.jv-ord-body{ flex:1; min-width:0; }
.jv-ord-top{ display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.jv-ord-top b{ font-size:14.5px; font-weight:800; }
.jv-ord-top em{ font-style:normal; font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; }
.jv-ord-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin-top:5px; font-size:12px; font-weight:600; color:var(--jv-mute); }
.jv-st{ font-size:10.5px; font-weight:800; padding:3px 9px; border-radius:999px; color:var(--jv-a); background:var(--jv-a-soft); }
.jv-st.good{ color:var(--jv-good); background:color-mix(in oklab, var(--jv-good) 12%, var(--jv-card)); }
.jv-st.bad{ color:var(--jv-bad); background:color-mix(in oklab, var(--jv-bad) 11%, var(--jv-card)); }
.jv-st.wait{ color:var(--jv-warn); background:color-mix(in oklab, var(--jv-warn) 13%, var(--jv-card)); }
.jv-again{ flex:none; width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:13px; font-size:16px; font-weight:800; text-decoration:none; color:var(--jv-a); background:var(--jv-a-soft); transition:transform .3s var(--jv-spring); }
.jv-again:hover{ transform:rotate(180deg); }

/* ── empty ────────────────────────────────────────────────────────────── */
.jv-empty{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:48px 22px; text-align:center; border-radius:var(--jv-r-l); border:2px dashed var(--jv-line); background:var(--jv-card); }
.jv-empty i{ font-style:normal; font-size:36px; animation:jvFloat2 4s ease-in-out infinite; }
@keyframes jvFloat2{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
.jv-empty b{ font-size:15px; font-weight:800; }
.jv-empty span{ font-size:12.5px; color:var(--jv-mute); font-weight:600; }

/* ── small phones ─────────────────────────────────────────────────────── */
@media (max-width:380px){
  .jv{ --jv-gap:12px; }
  .jv-card,.jv .jm-panel{ padding:15px; border-radius:24px; }
  .jv-pc{ padding:15px; gap:14px; }
  .jv-pc-ic{ width:56px; height:56px; border-radius:17px; }
  .jv-rate b{ font-size:30px; }
  .jv-amt{ height:62px; font-size:26px; }
  .jv .jm-method-logo{ width:68px; }
  .jv .jm-phone-input{ font-size:16px; height:54px; }
  .jv-live{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .jv *, .jv *::before, .jv *::after{ animation:none !important; transition:none !important; }
  html.jv-js .jv-reveal{ opacity:1; transform:none; filter:none; }
}

/* ── robustness: grid children may shrink (no sideways overflow), readable accents on light brand colours ── */
.jv-split > *, .jv-grid > *, .jv-olist > *, .jv-main{ min-width:0; }
.jv-rate b{ color:color-mix(in oklab, var(--pc) 70%, #0f172a); }
.jv-go{ color:color-mix(in oklab, var(--pc) 70%, #0f172a); }
.jv-ph .pill{ color:color-mix(in oklab, var(--pc) 66%, #0f172a); }

/* quick amounts wrap onto rows (a sideways-scrolling row clipped the last chip, e.g. "$500" looked like "$5") */
.jv-quick{ flex-wrap:wrap; overflow:visible; margin:12px 0 0; padding:0; }
.jv-q{ flex:0 0 auto; }

/* ── compact sizing: everything a notch smaller so pages never feel zoomed-in on phones ── */
@media (max-width:600px){
  .jv{ --jv-gap:12px; }
  .jv-pc{ padding:14px; gap:12px; border-radius:22px; }
  .jv-pc-ic{ width:46px; height:46px; border-radius:14px; font-size:20px; }
  .jv-pc-t b{ font-size:15px; }
  .jv-pc-t span{ font-size:11.5px; }
  .jv-rate b{ font-size:26px; letter-spacing:-.8px; }
  .jv-rate small{ font-size:9.5px; margin-bottom:4px; }
  .jv-rate em{ font-size:11px; padding:3px 8px; }
  .jv-logo{ width:42px; height:42px; border-radius:13px; }
  .jv-card,.jv .jm-panel{ padding:14px; border-radius:20px; }
  .jv-amt{ height:54px; font-size:22px; border-radius:16px; padding-left:36px; }
  .jv-q{ padding:7px 13px; font-size:12.5px; }
  .jv-strip{ padding:10px 12px; }
  .jv-strip .ic{ width:38px; height:38px; border-radius:12px; }
  .jv-strip b{ font-size:17px; }
  .jv-strip .get b{ font-size:15px; }
  .jv .jm-head-t{ font-size:14px; }
  .jv .jm-method{ padding:9px 12px; gap:12px; }
  .jv .jm-method-logo{ width:64px; }
  .jv .jm-phone-input{ height:50px; font-size:16px; border-radius:15px; }
  .jv-btn{ height:48px; font-size:15px; border-radius:15px; }
}

/* ══ Provider cards — "Ring" design ═══════════════════════════════════════════
   The bonus is drawn as a progress ring (0–50% bonus fills 0–100% of the circle) beside the rate,
   with a full-width action bar. Colours are built from the provider's own --pc mixed with the page
   surface / near-black, never raw white-on-colour, so light provider colours (yellow) stay readable.
   Scoped to .jv-grid so the provider header on /jumlo/amount (which reuses .jv-pc-ic) is untouched.
   PHONE: the page picks .jv-roomy (1–2 providers) / .jv-cozy (3–4) / .jv-dense (5+) from the provider
   count (1 = roomy, 2–3 = cozy, 4+ = dense), so every provider fits on one phone screen instead of the last ones hiding below the fold. */
.jv-grid .jv-pc{
  --rt:10px;
  display:grid; grid-template-columns:1fr auto; grid-template-areas:"head ring" "chips ring" "cta cta"; gap:12px 14px; padding:20px 18px 18px; border-radius:30px;
  background:linear-gradient(180deg, color-mix(in oklab, var(--pc) 13%, var(--jv-card)) 0%, var(--jv-card) 52%);
}
.jv-grid .jv-pc-head{ grid-area:head; flex-direction:column; align-items:flex-start; gap:13px; min-width:0; }
.jv-grid .jv-pc-ic{ width:56px; height:56px; border-radius:18px; }
.jv-grid .jv-pc-t{ min-width:0; max-width:100%; }
.jv-grid .jv-pc-t b{ font-size:19px; letter-spacing:-.4px; }
.jv-grid .jv-pc-chips{ grid-area:chips; align-self:end; margin:0; display:flex; gap:6px; flex-wrap:wrap; }
.jv-grid .jv-pc-ring{ grid-area:ring; align-self:center; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:112px; aspect-ratio:1; text-align:center; }
.jv-grid .jv-pc-ring::before{ content:''; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from -90deg, var(--pc) calc(var(--fill) * 1%), color-mix(in oklab, var(--pc) 15%, var(--jv-card)) 0);
  -webkit-mask:radial-gradient(farthest-side, #0000 calc(100% - var(--rt)), #000 calc(100% - var(--rt) + 1px));
          mask:radial-gradient(farthest-side, #0000 calc(100% - var(--rt)), #000 calc(100% - var(--rt) + 1px));
  filter:drop-shadow(0 8px 12px color-mix(in oklab, var(--pc) 38%, transparent)); animation:jvRingIn 1.1s var(--jv-ease) both; }
.jv-grid .jv-pc-ring b{ position:relative; font-size:21px; font-weight:800; letter-spacing:-1px; line-height:1; color:var(--jv-ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.jv-grid .jv-pc-ring em{ position:relative; margin-top:5px; font-style:normal; font-size:11px; font-weight:800; color:var(--jv-good); }
.jv-grid .jv-pc-cta{ grid-area:cta; display:flex; align-items:center; justify-content:center; gap:8px; height:50px; margin-top:4px; border-radius:18px; color:#fff; font-size:14.5px; font-weight:800; letter-spacing:.2px;
  background:linear-gradient(135deg, color-mix(in oklab, var(--pc) 56%, #0b1020), color-mix(in oklab, var(--pc) 30%, #0b1020));
  box-shadow:0 12px 24px color-mix(in oklab, var(--pc) 34%, transparent), inset 0 1px 0 rgba(255,255,255,.18); transition:box-shadow .3s var(--jv-ease); }
.jv-grid .jv-pc-cta svg{ transition:transform .3s var(--jv-ease); }
@media (hover:hover){
  .jv-grid .jv-pc:hover{ transform:translateY(-4px); }
  .jv-grid .jv-pc:hover .jv-pc-cta{ box-shadow:0 16px 30px color-mix(in oklab, var(--pc) 46%, transparent); }
  .jv-grid .jv-pc:hover .jv-pc-cta svg{ transform:translateX(5px); }
}
@keyframes jvRingIn{ from{ opacity:0; transform:rotate(-120deg) scale(.85); } to{ opacity:1; transform:none; } }

/* ── phone: compact rows so all providers stay on one screen ─────────────── */
@media (max-width:639px){
  .jv-cozy .jv-grid, .jv-dense .jv-grid{ gap:10px; }
  .jv-cozy .jv-grid .jv-pc, .jv-dense .jv-grid .jv-pc{
    --rt:8px; grid-template-areas:"head ring" "chips ring"; align-items:center; gap:7px 12px; padding:13px 14px 13px 16px; border-radius:24px; }
  .jv-cozy .jv-grid .jv-pc-head, .jv-dense .jv-grid .jv-pc-head{ flex-direction:row; align-items:center; gap:11px; }
  .jv-cozy .jv-grid .jv-pc-ic, .jv-dense .jv-grid .jv-pc-ic{ width:46px; height:46px; border-radius:15px; }
  .jv-cozy .jv-grid .jv-pc-t b, .jv-dense .jv-grid .jv-pc-t b{ font-size:16px; letter-spacing:-.25px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .jv-cozy .jv-grid .jv-pc-cta, .jv-dense .jv-grid .jv-pc-cta{ display:none; }
  .jv-cozy .jv-grid .jv-pc-ring, .jv-dense .jv-grid .jv-pc-ring{ width:76px; }
  .jv-cozy .jv-grid .jv-pc-ring b, .jv-dense .jv-grid .jv-pc-ring b{ font-size:17px; }
  .jv-cozy .jv-grid .jv-pc-ring em, .jv-dense .jv-grid .jv-pc-ring em{ font-size:10px; margin-top:3px; }
  .jv-cozy .jv-grid .jv-chip, .jv-dense .jv-grid .jv-chip{ font-size:10px; padding:3px 8px; white-space:nowrap; }

  /* 4+ providers: tighter still (a 5th card must clear the bottom bar on a ~650px-tall phone), and a slimmer banner */
  .jv-dense .jv-grid{ gap:6px; }
  .jv-dense .jv-grid .jv-pc{ --rt:7px; padding:6px 12px 6px 14px; gap:3px 10px; border-radius:22px; }
  .jv-dense .jv-grid .jv-pc-ic{ width:38px; height:38px; border-radius:12px; }
  .jv-dense .jv-grid .jv-pc-t b{ font-size:15.5px; }
  .jv-dense .jv-grid .jv-pc-t span{ font-size:11.5px; margin-top:1px; }
  .jv-dense .jv-grid .jv-pc-ring{ width:62px; }
  .jv-dense .jv-grid .jv-pc-ring b{ font-size:15px; }
  .jv-dense .jv-grid .jv-pc-ring em{ font-size:9.5px; margin-top:2px; }
  .jv-dense .jv-grid .jv-chip{ padding:2px 8px; }
  .jv-dense .jv-grid .jv-chip.lim{ display:none; }
  .jv-dense .jv-banner{ padding:8px 12px; margin-bottom:8px; border-radius:20px; }
  .jv-dense .jv-logo{ width:36px; height:36px; border-radius:12px; }
}
@media (prefers-reduced-motion:reduce){ .jv-grid .jv-pc-ring::before{ animation:none; } }