@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');
/* Resseler (Jumlo) catalogue — v3.
   One flat brand hero, a segmented filter and two clean tiles per row on phones. Everything is driven by the
   company's own brand colour (--jv-a) + logo; a provider's colour (--pc) only tints its own tile.
   Short phones shrink hero + tiles so ALL providers stay on one screen. */
.jvs, .jvs *{ box-sizing:border-box; }
.jvs{ --a:var(--jv-a,#6d28d9); --a2:var(--jv-a-2,#4c1d95); position:relative; max-width:760px; margin:0 auto 96px; padding:14px 14px 0;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; color:var(--jv-ink,#0f172a);
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
@media (min-width:900px){ .jvs{ margin-bottom:64px; padding-top:22px; } }
.jvs a{ -webkit-tap-highlight-color:transparent; text-decoration:none; color:inherit; }
.jvs button{ font-family:inherit; }
.jvs-orb{ display:none; }

body.jumlo-catalog-page{ background:
    radial-gradient(60% 34% at 100% 0%, color-mix(in oklab, var(--jv-a) 16%, transparent), transparent 70%),
    radial-gradient(54% 30% at 0% 46%, color-mix(in oklab, var(--jv-a-2) 11%, transparent), transparent 70%),
    var(--bg,#f6f7fb); background-attachment:fixed; }

/* ── hero ───────────────────────────────────────────────────────────────────────────────────── */
.jvs-hero{ container-type:inline-size; position:relative; overflow:hidden; isolation:isolate; border-radius:26px; padding:16px; color:#fff;
  background:linear-gradient(135deg, color-mix(in oklab, var(--a) 88%, #fff) 0%, var(--a) 45%, var(--a2) 100%);
  box-shadow:0 18px 36px color-mix(in oklab, var(--a) 32%, transparent), inset 0 1px 0 rgba(255,255,255,.28); animation:jvsRise .8s cubic-bezier(.22,1,.36,1) both; }
.jvs-hero::before{ content:''; position:absolute; z-index:-1; top:-90px; right:-70px; width:280px; height:280px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.42), transparent 66%); animation:jvsAurora 11s ease-in-out infinite alternate; }
.jvs-hero::after{ content:''; position:absolute; z-index:-1; left:-40px; bottom:-70px; width:240px; height:240px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, color-mix(in oklab, var(--a2) 80%, #000) 0%, transparent 68%); opacity:.5; }
.jvs-top{ position:absolute; top:16px; right:16px; z-index:2; display:block; }
.jvs-eyebrow{ display:none; }
.jvs-live{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:6px 11px; border-radius:99px;
  background:rgba(255,255,255,.18); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.jvs-live i{ width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 0 rgba(74,222,128,.7); animation:jvsDot 2s ease-out infinite; }
.jvs-live.off i{ background:#fca5a5; animation:none; }

.jvs-brand{ display:flex; align-items:center; gap:14px; padding-right:86px; }
.jvs-logo{ position:relative; flex:none; width:58px; height:58px; padding:6px; border-radius:19px; background:rgba(255,255,255,.97);
  box-shadow:0 12px 24px rgba(10,6,50,.3), 0 0 0 4px rgba(255,255,255,.18); animation:jvsLogoIn .9s cubic-bezier(.34,1.56,.64,1) both, jvsFloat 5.5s ease-in-out 1.2s infinite; }
.jvs-logo img{ position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:contain; border-radius:12px; }
.jvs-logo::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.9) 50%, transparent 62%) -160% 0 / 250% 100% no-repeat; animation:jvsGloss 5s ease-in-out 1.8s infinite; }
.jvs-ping{ position:absolute; inset:-3px; border-radius:22px; border:2px solid rgba(255,255,255,.6); pointer-events:none; animation:jvsPing 3.4s ease-out infinite; }
.jvs-ping.p2{ animation-delay:1.5s; }
.jvs-hi{ margin:0; min-width:0; font-size:calc(clamp(19px, 8.4cqw, 28px) * var(--k,1)); font-weight:800; line-height:1.12; letter-spacing:-.3px; white-space:normal; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; color:#fff;
  text-shadow:0 2px 14px rgba(10,6,50,.22); animation:jvsRise .9s cubic-bezier(.22,1,.36,1) .1s both; }

.jvs-best{ position:relative; display:flex; align-items:center; gap:12px; margin-top:14px; padding:10px 14px 10px 10px; border-radius:20px; overflow:hidden; color:#fff;
  background:rgba(255,255,255,.17); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3), 0 8px 20px rgba(10,6,50,.14);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:transform .2s, background .2s; animation:jvsRise .9s cubic-bezier(.22,1,.36,1) .2s both; }
.jvs-best:active{ transform:scale(.98); background:rgba(255,255,255,.24); }
.jvs-best::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(110deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%) -150% 0 / 250% 100% no-repeat; animation:jvsGloss 6s ease-in-out 2.4s infinite; }
.jvs-av{ flex:none; width:44px; height:44px; border-radius:50%; overflow:hidden; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.4), 0 6px 14px rgba(10,6,50,.2); }
.jvs-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.jvs-best-t{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:none; }
.jvs-best-t small{ font-size:clamp(8.5px, 2.9cqw, 10px); font-weight:700; letter-spacing:.08em; opacity:.88; white-space:nowrap; }
.jvs-best[data-mode="sales"] .jvs-best-t small::before{ content:'🔥 '; letter-spacing:0; }
.jvs-best[data-mode="rate"] .jvs-best-t small::before{ content:'★ '; letter-spacing:0; }
.jvs-best-t b{ display:inline-flex; align-items:center; gap:2px; font-size:calc(clamp(20px, 9cqw, 28px) * var(--k,1)); font-weight:800; line-height:1.05; letter-spacing:-.2px; white-space:nowrap; }
.jvs-best-t b em{ align-self:center; margin-left:.4em; font-style:normal; font-size:max(9.5px, .42em); font-weight:800; letter-spacing:0; padding:.32em .7em; border-radius:99px; background:rgba(255,255,255,.25); box-shadow:inset 0 0 0 1px rgba(255,255,255,.34); }
.jvs-best-r{ flex:1; margin-left:auto; min-width:0; display:flex; align-items:center; justify-content:flex-end; gap:6px; text-align:right; }
.jvs-best-r span{ font-size:clamp(11px, 3.9cqw, 13px); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.jvs-best-r em{ display:none; font-style:normal; font-size:11px; font-weight:800; padding:4px 9px; border-radius:99px; background:rgba(255,255,255,.25); box-shadow:inset 0 0 0 1px rgba(255,255,255,.34); white-space:nowrap; }

/* ── filter ─────────────────────────────────────────────────────────────────────────────────── */
.jvs-sheet{ position:relative; margin-top:14px; }
.jvs-tabs{ container-type:inline-size; display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; border-radius:18px; background:rgba(255,255,255,.78);
  box-shadow:0 6px 18px color-mix(in oklab, var(--a) 12%, rgba(15,23,42,.06)), inset 0 0 0 1px rgba(255,255,255,.9);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); animation:jvsRise .8s cubic-bezier(.22,1,.36,1) .3s both; }
.jvs-tabs button{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:0 8px; border:0; border-radius:14px; background:transparent;
  font-size:clamp(10px, 3.5cqw, 12px); font-weight:700; letter-spacing:.03em; white-space:nowrap; color:var(--jv-mute,#64748b); cursor:pointer; transition:color .25s, background .25s, box-shadow .25s, transform .2s; }
.jvs-tabs button i{ display:none; }
.jvs-tabs button span{ min-width:1.7em; padding:.15em .5em; border-radius:99px; font-size:.92em; font-weight:800; letter-spacing:0; color:var(--a); background:color-mix(in oklab, var(--a) 14%, var(--surface,#fff)); }
.jvs-tabs button:active{ transform:scale(.96); }
.jvs-tabs button.on{ color:#fff; background:linear-gradient(135deg, var(--a), var(--a2)); box-shadow:0 8px 16px color-mix(in oklab, var(--a) 38%, transparent); animation:jvsTabOn .4s cubic-bezier(.34,1.56,.64,1); }
.jvs-tabs button.on span{ color:var(--a); background:#fff; }

/* ── tiles ──────────────────────────────────────────────────────────────────────────────────── */
.jvs-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:12px; }
@media (min-width:640px){ .jvs-list{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } }
.jvs-card{ --pc:var(--a); container-type:inline-size; position:relative; display:grid; grid-template-columns:auto 1fr; grid-template-areas:"ic em" "info info" "rate rate"; align-items:start; row-gap:8px; column-gap:8px;
  padding:13px 13px 14px; border-radius:22px; overflow:hidden; cursor:pointer; color:var(--jv-ink,#0f172a);
  background:linear-gradient(165deg, color-mix(in oklab, var(--pc) 13%, var(--surface,#fff)) 0%, var(--surface,#fff) 62%);
  box-shadow:0 10px 24px color-mix(in oklab, var(--pc) 17%, rgba(15,23,42,.08)), 0 1px 2px rgba(15,23,42,.05), inset 0 0 0 1.5px color-mix(in oklab, var(--pc) 26%, var(--surface,#fff));
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s; }
.jvs-card::after{ content:''; position:absolute; right:-26px; top:-26px; width:92px; height:92px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, color-mix(in oklab, var(--pc) 24%, transparent), transparent 70%); }
.jvs-card.best{ box-shadow:0 14px 28px color-mix(in oklab, var(--pc) 26%, rgba(15,23,42,.08)), inset 0 0 0 2px color-mix(in oklab, var(--pc) 58%, #fff); }
@media (hover:hover){ .jvs-card:not(.off):hover{ transform:translateY(-4px); box-shadow:0 18px 34px color-mix(in oklab, var(--pc) 28%, rgba(15,23,42,.1)), inset 0 0 0 1.5px color-mix(in oklab, var(--pc) 45%, #fff); } }
.jvs-card:not(.off):active{ transform:scale(.97); }
.jvs-ic{ grid-area:ic; position:relative; z-index:1; width:calc(clamp(34px, 30cqw, 46px) * var(--k,1)); height:calc(clamp(34px, 30cqw, 46px) * var(--k,1)); border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font-size:20px;
  box-shadow:0 0 0 2.5px #fff, 0 0 0 4.5px color-mix(in oklab, var(--pc) 58%, transparent), 0 8px 16px color-mix(in oklab, var(--pc) 28%, transparent); }
.jvs-ic img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.jvs-ic::before{ content:''; position:absolute; right:-3px; bottom:-3px; z-index:2; width:13px; height:13px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 2.5px #fff; animation:jvsDot 2.4s ease-out infinite; }
.jvs-card.off .jvs-ic::before{ background:#ef4444; animation:none; }
.jvs-info{ grid-area:info; position:relative; z-index:1; min-width:0; }
.jvs-info b{ display:block; font-size:calc(clamp(12px, 10.6cqw, 15.5px) * var(--k,1)); font-weight:700; line-height:1.25; letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jvs-sub, .jvs-bar, .jvs-btn, .jvs-chip{ display:none; }
.jvs-rt{ display:contents; }
.jvs-rt b{ grid-area:rate; justify-self:start; position:relative; z-index:1; display:inline-flex; align-items:center; gap:.24em; max-width:100%; min-width:0; overflow:hidden; padding:.26em .28em .26em .42em; border-radius:.6em;
  font-size:calc(clamp(11px, 100cqw / (.58 * var(--nl,5) + .27 * var(--pl,6) + 1.9), 25px) * var(--k,1)); font-weight:800; line-height:1; letter-spacing:0; color:color-mix(in oklab, var(--pc) 64%, var(--jv-dk,#0f172a));
  background:linear-gradient(180deg, color-mix(in oklab, var(--pc) 16%, var(--surface,#fff)), color-mix(in oklab, var(--pc) 8%, var(--surface,#fff)));
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--pc) 24%, var(--surface,#fff)), 0 4px 10px color-mix(in oklab, var(--pc) 14%, transparent); }
.jvs-rt b em{ display:inline-block; font-style:normal; font-size:max(9px, .43em); font-weight:800; letter-spacing:0; padding:.32em .62em; border-radius:99px; color:color-mix(in oklab, var(--pc) 70%, var(--jv-dk,#0f172a)); background:#fff; box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--pc) 26%, var(--surface,#fff)); white-space:nowrap; }

/* unavailable: neutral grey, not tappable, "Lama heli karo" where the rate would be */
.jvs-card.off{ --pc:#94a3b8; cursor:not-allowed; background:linear-gradient(165deg,var(--surface-2,#f1f3f7),var(--surface,#f8f9fb) 70%); box-shadow:0 4px 12px rgba(15,23,42,.05), inset 0 0 0 1.5px var(--ring,#e3e6ee); }
.jvs-card.off .jvs-ic{ filter:grayscale(1); opacity:.7; box-shadow:0 0 0 2.5px #fff, 0 0 0 4.5px #d5d9e3; }
.jvs-card.off .jvs-info b{ color:#8a90a6; }
.jvs-card.off .jvs-rt b.jvs-na{ padding:2px 0 0; overflow:visible; background:none; box-shadow:none; font-size:calc(clamp(10.5px, 8.8cqw, 13px) * var(--k,1)); font-weight:700; letter-spacing:0; color:#8a90a6; line-height:1.25; white-space:normal; }

/* ── motion ─────────────────────────────────────────────────────────────────────────────────── */
.jvs-card.jvs-pop{ animation:jvsPop .5s cubic-bezier(.34,1.56,.64,1) var(--d,0ms) both; }
@keyframes jvsRise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes jvsPop{ from{ opacity:0; transform:translateY(14px) scale(.94); } to{ opacity:1; transform:none; } }
@keyframes jvsLogoIn{ from{ opacity:0; transform:scale(.4) rotate(-14deg); } to{ opacity:1; transform:none; } }
@keyframes jvsFloat{ 0%,100%{ translate:0 0; } 50%{ translate:0 -4px; } }
@keyframes jvsGloss{ 0%,55%{ background-position:-160% 0; } 100%{ background-position:160% 0; } }
@keyframes jvsPing{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.7); opacity:0; } }
@keyframes jvsAurora{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(-50px,40px) scale(1.2); } }
@keyframes jvsDot{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.55), 0 0 0 2.5px #fff; } 70%,100%{ box-shadow:0 0 0 7px rgba(34,197,94,0), 0 0 0 2.5px #fff; } }
@keyframes jvsTabOn{ from{ transform:scale(.9); } to{ transform:scale(1); } }
.jvs-live i{ animation-name:jvsLiveDot; }
@keyframes jvsLiveDot{ 0%{ box-shadow:0 0 0 0 rgba(74,222,128,.7); } 70%,100%{ box-shadow:0 0 0 7px rgba(74,222,128,0); } }

/* ── short phones: everything must still fit on one screen ──────────────────────────────────── */
@media (max-width:639px) and (max-height:780px){
  .jvs{ padding-top:10px; --k:.88; }
  .jvs-hero{ padding:12px; border-radius:22px; }
  .jvs-top{ top:12px; right:12px; }
  .jvs-brand{ gap:11px; padding-right:78px; }
  .jvs-logo{ width:46px; height:46px; padding:5px; border-radius:15px; } .jvs-ping{ border-radius:18px; }
  .jvs-best{ margin-top:10px; padding:8px 12px 8px 8px; border-radius:17px; }
  .jvs-av{ width:36px; height:36px; }
  .jvs-sheet{ margin-top:10px; } .jvs-tabs button{ min-height:36px; }
  .jvs-list{ gap:10px; margin-top:10px; }
  .jvs-card{ padding:11px 11px 12px; row-gap:6px; border-radius:19px; }
  .jvs-ic::before{ width:11px; height:11px; }
}
@media (max-width:639px) and (min-height:781px) and (max-height:920px){
  .jvs.jv-dense{ padding-top:10px; --k:.88; }
  .jvs.jv-dense .jvs-hero{ padding:12px; border-radius:22px; }
  .jvs.jv-dense .jvs-top{ top:12px; right:12px; }
  .jvs.jv-dense .jvs-brand{ gap:11px; padding-right:78px; }
  .jvs.jv-dense .jvs-logo{ width:46px; height:46px; padding:5px; border-radius:15px; } .jvs.jv-dense .jvs-ping{ border-radius:18px; }
  .jvs.jv-dense .jvs-best{ margin-top:10px; padding:8px 12px 8px 8px; border-radius:17px; }
  .jvs.jv-dense .jvs-av{ width:36px; height:36px; } .jvs.jv-dense
  .jvs.jv-dense .jvs-sheet{ margin-top:10px; } .jvs.jv-dense .jvs-tabs button{ min-height:36px; }
  .jvs.jv-dense .jvs-list{ gap:10px; margin-top:10px; }
  .jvs.jv-dense .jvs-card{ padding:11px 11px 12px; row-gap:6px; border-radius:19px; }
  .jvs.jv-dense .jvs-ic::before{ width:11px; height:11px; }
}
@media (max-width:639px) and (max-height:700px){
  .jvs{ --k:.8; }
  .jvs.jv-dense .jvs-best{ display:none; }
  .jvs-hero{ padding:10px 12px; }
  .jvs-logo{ width:40px; height:40px; border-radius:13px; }
  .jvs-list{ gap:8px; } .jvs-card{ padding:9px 10px 10px; row-gap:5px; }
}
/* roomier layouts when there are only a few providers */
@media (max-width:639px) and (min-height:781px){ .jvs.jv-roomy .jvs-card{ padding-block:18px; } }

/* the install pill sits in the hero corner: keep the company name clear of it */
.jvs.has-install .jvs-brand{ padding-right:92px; }

@media (prefers-reduced-motion:reduce){
  .jvs *, .jvs *::before, .jvs *::after{ animation:none !important; transition:none !important; }
}


/* ── sliding banners + hero polish (2026-11-04) ─────────────────────────────────────────────── */
.jvs .banner-shell{ border-radius:26px; margin:0 0 12px; isolation:isolate; box-shadow:0 18px 36px color-mix(in oklab, var(--a) 28%, transparent), 0 2px 8px rgba(15,23,42,.08); animation:jvsRise .8s cubic-bezier(.22,1,.36,1) both; }
.jvs .banner-shell::after{ content:''; position:absolute; inset:0; z-index:3; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55), inset 0 1px 0 rgba(255,255,255,.5); }
.jvs .banner-slide img, .jvs .banner-slide a::before{ border-radius:0; }
.jvs .banner-slide a::before{ background:linear-gradient(to top, rgba(10,8,25,.5) 0%, rgba(10,8,25,0) 42%); }
.jvs .banner-cta{ left:16px; bottom:16px; }
.jvs .banner-dots{ left:50%; right:auto; bottom:10px; transform:translateX(-50%); width:max-content; padding:5px 9px; border-radius:99px; z-index:4;
  background:rgba(15,23,42,.38); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.jvs .banner-dots button{ width:6px; height:6px; background:rgba(255,255,255,.6); }
.jvs .banner-dots button.active{ width:20px; background:#fff; }
.jvs .banner-shell ~ .jvs-hero{ margin-top:0; }
.jvs-hero{ background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.5px), linear-gradient(135deg, color-mix(in oklab, var(--a) 88%, #fff) 0%, var(--a) 45%, var(--a2) 100%); background-size:14px 14px, auto; }
.jvs-best{ box-shadow:0 8px 20px rgba(0,0,0,.14), inset 0 0 0 1px rgba(255,255,255,.3); }
@media (prefers-reduced-motion:reduce){ .jvs .banner-shell{ animation:none; } }

/* ── auto banners (.jbn) · premium dark-glass ── one-shot text/sheen entrance, transform/opacity only (no infinite animation) ─── */
.jbn{ position:relative; margin:0 0 14px; border-radius:28px; isolation:isolate; box-shadow:0 26px 50px -18px color-mix(in oklab, var(--a2) 70%, #000), 0 2px 10px rgba(15,23,42,.12); animation:jvsRise .8s cubic-bezier(.22,1,.36,1) both; }
.jbn::after{ content:''; position:absolute; inset:0; z-index:3; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1.5px 0 rgba(255,255,255,.38); }
.jbn-track{ position:relative; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; border-radius:28px; overscroll-behavior-x:contain; }
.jbn-track::-webkit-scrollbar{ display:none; }
.jbn-s{ --ac:var(--a); flex:0 0 100%; scroll-snap-align:start; scroll-snap-stop:always; position:relative; overflow:hidden; min-height:196px; padding:20px 20px 40px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:6px; isolation:isolate;
  background:
    radial-gradient(120% 95% at 100% 0%, color-mix(in oklab, var(--ac) 62%, transparent), transparent 58%),
    radial-gradient(90% 75% at 0% 110%, color-mix(in oklab, var(--ac) 30%, transparent), transparent 62%),
    linear-gradient(160deg, #0c1230 0%, color-mix(in oklab, var(--a2) 62%, #060919) 100%); }
.jbn-s.t1{ --ac:color-mix(in oklab, var(--a) 78%, #fff); }
.jbn-s.t2{ --ac:#f2b441; }
.jbn-s.t3{ --ac:#34d399; }
.jbn-s.t4{ --ac:color-mix(in oklab, var(--a) 55%, #c4b5fd); }
.jbn-s::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.9;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size:24px 24px;
  -webkit-mask-image:radial-gradient(75% 85% at 100% 0%, #000, transparent 72%); mask-image:radial-gradient(75% 85% at 100% 0%, #000, transparent 72%); }
.jbn-s::after{ content:''; position:absolute; z-index:2; top:0; bottom:0; left:-60%; width:45%; pointer-events:none; transform:translateX(0) skewX(-18deg); opacity:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); }
.jbn-s.on::after{ animation:jbnSheen 1.4s .35s ease-out 1 both; }
@keyframes jbnSheen{ 0%{ opacity:0; transform:translateX(0) skewX(-18deg); } 20%{ opacity:1; } 100%{ opacity:0; transform:translateX(520%) skewX(-18deg); } }
.jbn-s small{ display:inline-flex; align-items:center; gap:7px; font-size:10.5px; font-weight:800; letter-spacing:1.4px; color:var(--ac); }
.jbn-s small i{ width:6px; height:6px; border-radius:50%; background:var(--ac); box-shadow:0 0 0 4px color-mix(in oklab, var(--ac) 25%, transparent), 0 0 12px var(--ac); }
.jbn-big{ display:flex; align-items:center; font-size:56px; font-weight:800; line-height:1; letter-spacing:-2px; background:linear-gradient(180deg,#fff 30%, color-mix(in oklab, var(--ac) 55%, #fff)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.jbn-big em, .jbn-rows b em{ font-style:normal; font-size:13px; font-weight:800; letter-spacing:0; margin-left:10px; padding:4px 10px; border-radius:99px; color:#fff; -webkit-text-fill-color:#fff; background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); }
.jbn-h{ font-size:27px; font-weight:800; line-height:1.12; letter-spacing:-.6px; color:#fff; }
.jbn-sub{ font-size:13px; font-weight:600; color:rgba(255,255,255,.78); }
.jbn-cta{ font-style:normal; display:inline-flex; align-items:center; gap:9px; margin-top:10px; padding:7px 7px 7px 16px; border-radius:99px; background:linear-gradient(180deg,#fff,#e9edf7); color:#0c1230; font-size:12.5px; font-weight:800; box-shadow:0 10px 22px -6px rgba(0,0,0,.5), inset 0 -1px 0 rgba(0,0,0,.08); }
.jbn-cta::after{ content:'›'; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--ac); color:#0c1230; font-size:17px; font-weight:900; line-height:1; }
.jbn-av{ position:absolute; top:18px; right:18px; width:66px; height:66px; border-radius:50%; padding:4px; display:block; background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4), 0 0 0 7px rgba(255,255,255,.06), 0 14px 34px color-mix(in oklab, var(--ac) 60%, transparent); }
.jbn-av img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; background:#fff; }
.jbn-feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:100%; margin-top:2px; }
.jbn-feats span{ display:flex; flex-direction:column; gap:1px; padding:9px 10px; border-radius:16px; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.18); }
.jbn-feats svg{ width:20px; height:20px; margin-bottom:4px; fill:none; stroke:var(--ac); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.jbn-feats b{ font-size:12.5px; font-weight:800; color:#fff; }
.jbn-feats small{ display:block; font-size:10.5px; font-weight:600; letter-spacing:0; color:rgba(255,255,255,.62); gap:0; }
.jbn-logos{ display:flex; margin-top:4px; }
.jbn-logos img{ width:40px; height:40px; border-radius:50%; background:#fff; object-fit:cover; border:2px solid rgba(255,255,255,.95); margin-right:-10px; box-shadow:0 6px 14px rgba(0,0,0,.35); }
.jbn-rows{ display:flex; flex-direction:column; gap:7px; width:100%; }
.jbn-row{ display:flex; align-items:center; gap:11px; padding:7px 12px 7px 8px; border-radius:17px; color:#fff; font-size:13.5px; font-weight:700; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.16); }
.jbn-row img{ width:32px; height:32px; border-radius:50%; background:#fff; object-fit:cover; box-shadow:0 0 0 2px rgba(255,255,255,.25); }
.jbn-row span{ flex:1; }
.jbn-row b{ font-size:20px; font-weight:800; color:#fff; letter-spacing:-.5px; }
.jbn-s.jbn-img{ padding:0; min-height:0; aspect-ratio:2/1; background:var(--surface-2,#e2e8f0); }
.jbn-s.jbn-img::before, .jbn-s.jbn-img::after{ display:none; }
.jbn-s.jbn-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.jbn-s.jbn-img .jbn-cta{ position:absolute; left:16px; bottom:34px; margin:0; }
.jbn-dots{ position:absolute; left:20px; bottom:14px; z-index:4; display:flex; gap:5px; }
.jbn-dots button{ width:14px; height:4px; padding:0; border:0; border-radius:99px; background:rgba(255,255,255,.3); transition:width .3s ease, background .3s ease; }
.jbn-dots button.active{ width:30px; background:#fff; }
.jbn-in{ opacity:0; transform:translateY(12px); }
.jbn-s.on .jbn-in, .jbn-s:first-child .jbn-in{ animation:jbnIn .6s cubic-bezier(.22,1,.36,1) var(--d,0s) both; }
@keyframes jbnIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.jvs .jbn-s{ color:#fff; } .jvs .jbn-s.jbn-img{ color:inherit; } .jvs .jbn-s .jbn-cta{ color:#0c1230; }
@media (prefers-reduced-motion:reduce){ .jbn{ animation:none; } .jbn-in{ opacity:1; transform:none; animation:none !important; } .jbn-s.on::after{ animation:none; } }

/* ── banners 16:9 (YouTube video size) ── sizes scale with the card width (cqw) so nothing clips on small phones ──────── */
.jbn{ container-type:inline-size; }
.jbn-s{ aspect-ratio:16/9; min-height:0; padding:5cqw 5cqw 12cqw; gap:1.6cqw; justify-content:center; }
.jbn-s small{ font-size:max(9.5px,3cqw); }
.jbn-big{ font-size:clamp(38px,15.5cqw,58px); }
.jbn-big em{ font-size:max(11px,3.7cqw); padding:3px 9px; }
.jbn-h{ font-size:clamp(19px,7.4cqw,27px); }
.jbn-sub{ font-size:max(11.5px,3.7cqw); }
.jbn-cta{ position:absolute; right:4.2cqw; bottom:3.4cqw; margin:0; padding:4px 4px 4px 12px; font-size:max(11.5px,3.5cqw); }
.jbn-cta::after{ width:22px; height:22px; font-size:15px; }
.jbn-av{ width:clamp(48px,17cqw,66px); height:clamp(48px,17cqw,66px); top:4.6cqw; right:4.6cqw; padding:3px; }
.jbn-feats{ gap:2cqw; margin-top:.5cqw; width:calc(100% - 0px); }
.jbn-feats span{ flex-direction:row; align-items:center; gap:6px; padding:2.4cqw 2.6cqw; border-radius:14px; }
.jbn-feats svg{ width:max(16px,5cqw); height:max(16px,5cqw); margin:0; flex:none; }
.jbn-feats b{ font-size:max(11px,3.5cqw); line-height:1.1; }
.jbn-feats small{ display:none; }
.jbn-logos img{ width:clamp(30px,10cqw,40px); height:clamp(30px,10cqw,40px); }
.jbn-s.t4{ padding-top:4cqw; gap:1.4cqw; }
.jbn-rows{ gap:1.4cqw; }
.jbn-row{ padding:.8cqw 3cqw .8cqw 1.4cqw; gap:2.4cqw; border-radius:14px; font-size:max(11.5px,3.6cqw); }
.jbn-row img{ width:clamp(22px,7.4cqw,30px); height:clamp(22px,7.4cqw,30px); }
.jbn-row b{ font-size:max(15px,5cqw); }
.jbn-row b em{ font-size:max(10px,3cqw); padding:2px 7px; margin-left:6px; }
.jbn-s.jbn-img{ aspect-ratio:16/9; }
.jbn-s.jbn-img .jbn-cta{ left:auto; right:4.2cqw; bottom:3.4cqw; }
.jbn-dots{ left:5cqw; bottom:4.2cqw; }
.jbn-s.t2 .jbn-cta{ display:none; } .jbn-s.t2{ padding-bottom:13cqw; }

/* ── banners: bold flat geometric style (flat brand colour, pill bars, hatch stripes, corner discs) ──────────────────── */
.jbn-s{ --p1:#ff6a33; --p2:#262a33; --hz:rgba(255,255,255,.55); align-items:center; text-align:center; justify-content:center; padding:11cqw 6cqw 9cqw; gap:1.4cqw; background:var(--a); }
.jbn-s.t1{ background:var(--a); --ac:#fff; }
.jbn-s.t2{ background:color-mix(in oklab, var(--a2) 92%, #000); --p1:#ffb020; --ac:#ffb020; }
.jbn-s.t3{ background:#12a05a; --p1:#ffe14d; --ac:#fff; }
.jbn-s.t4{ background:#161a26; --p1:var(--a); --p2:#ff6a33; --ac:#fff; padding-top:11cqw; }
.jbn-s::before, .jbn-s::after{ content:none !important; animation:none !important; }
.jbn-deco{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.jbn-deco i{ position:absolute; display:block; }
.jbn-deco .c1, .jbn-deco .c2{ width:40cqw; height:40cqw; border-radius:50%; background:#d9dce3; }
.jbn-deco .c1{ right:-21cqw; top:-21cqw; box-shadow:-1.6cqw 1.8cqw 3.4cqw rgba(0,0,0,.38); }
.jbn-deco .c2{ left:-21cqw; bottom:-21cqw; box-shadow:1.6cqw -1.8cqw 3.4cqw rgba(0,0,0,.38); }
.jbn-deco .p{ height:2.5cqw; }
.jbn-deco .p1{ left:0; top:3cqw; width:12cqw; border-radius:0 99px 99px 0; background:var(--p1); }
.jbn-deco .p2{ left:0; top:6.4cqw; width:26cqw; border-radius:0 99px 99px 0; background:var(--p2); }
.jbn-deco .p3{ left:12cqw; top:9.8cqw; width:17cqw; border-radius:99px; background:var(--p1); }
.jbn-deco .p4{ right:12cqw; bottom:9.8cqw; width:17cqw; border-radius:99px; background:var(--p1); }
.jbn-deco .p5{ right:0; bottom:6.4cqw; width:26cqw; border-radius:99px 0 0 99px; background:var(--p2); }
.jbn-deco .p6{ right:0; bottom:3cqw; width:12cqw; border-radius:99px 0 0 99px; background:var(--p1); }
.jbn-deco .h{ height:3.4cqw; width:24cqw; background:repeating-linear-gradient(115deg, var(--p1) 0 .45cqw, transparent .45cqw 1.5cqw); opacity:.9; }
.jbn-deco .h1{ top:3.4cqw; left:44cqw; }
.jbn-deco .h2{ bottom:4.6cqw; left:24cqw; }
.jbn-s small{ color:#fff; opacity:.9; font-size:max(9px,2.9cqw); letter-spacing:1.3px; }
.jbn-s small i{ background:var(--p1); box-shadow:none; }
.jbn-big{ font-size:clamp(34px,13.5cqw,52px); font-weight:900; letter-spacing:-1.5px; background:none; -webkit-text-fill-color:#fff; color:#fff; }
.jbn-big em{ background:var(--p2); box-shadow:none; color:#fff; font-size:max(10.5px,3.3cqw); }
.jbn-h{ font-size:clamp(17px,6.4cqw,25px); font-weight:900; text-transform:uppercase; letter-spacing:-.2px; line-height:1.08; }
.jbn-sub{ font-size:max(11px,3.5cqw); font-weight:700; color:#fff; opacity:.95; }
.jbn-cta{ display:none; }
.jbn-s.jbn-img .jbn-cta{ display:inline-flex; }
.jbn-av{ top:2.6cqw; right:2.6cqw; width:clamp(42px,14.5cqw,58px); height:clamp(42px,14.5cqw,58px); background:#fff; padding:2px; box-shadow:0 4px 10px rgba(0,0,0,.28); }
.jbn-feats{ width:auto; gap:1.6cqw; }
.jbn-feats span{ background:rgba(0,0,0,.22); box-shadow:none; padding:1.9cqw 2.6cqw; }
.jbn-feats svg{ stroke:var(--p1); }
.jbn-logos{ justify-content:center; }
.jbn-logos img{ width:clamp(28px,9cqw,36px); height:clamp(28px,9cqw,36px); margin:0 -4px; }
.jbn-rows{ width:min(72cqw,100%); gap:1.2cqw; }
.jbn-row{ background:rgba(255,255,255,.1); box-shadow:none; padding:.5cqw 2.6cqw .5cqw .8cqw; text-align:left; }
.jbn-row img{ width:clamp(20px,6cqw,26px); height:clamp(20px,6cqw,26px); }
.jbn-row b{ font-size:max(14px,4.4cqw); }
.jbn-row b em{ background:var(--p2); box-shadow:none; }
.jbn-dots{ left:50%; transform:translateX(-50%); bottom:1.7cqw; }
.jbn-dots button{ height:3px; width:10px; background:rgba(255,255,255,.45); }
.jbn-dots button.active{ width:22px; background:#fff; }
.jbn-s.jbn-img{ padding:0; }
.jbn-s.t2 .jbn-feats small{ display:none; }

/* ── Resseler home v4: framed panel + premium provider cards ───────────────────────────────────────────────── */
.jvs-sheet{ padding:12px; border-radius:30px; border:1.5px solid transparent;
  background:linear-gradient(color-mix(in oklab, var(--surface,#fff) 90%, var(--a)), color-mix(in oklab, var(--surface,#fff) 96%, var(--a))) padding-box,
             linear-gradient(135deg, color-mix(in oklab, var(--a) 75%, #fff), rgba(255,255,255,0) 42%, color-mix(in oklab, var(--a2) 70%, #fff)) border-box;
  box-shadow:0 26px 50px -24px color-mix(in oklab, var(--a) 55%, transparent), 0 2px 8px rgba(15,23,42,.06); }
.jvs-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:2px 4px 10px; }
.jvs-head b{ font-size:15px; font-weight:800; letter-spacing:-.2px; color:var(--jv-ink,#0f172a); }
.jvs-head span{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; padding:5px 11px; border-radius:99px; color:color-mix(in oklab, #16a34a 62%, var(--text,#15803d)); background:color-mix(in oklab, #22c55e 16%, var(--surface,#dcfce7)); }
.jvs-head span::before{ content:''; width:6px; height:6px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.25); }
.jvs-tabs{ box-shadow:none; background:color-mix(in oklab, var(--a) 7%, var(--surface,#fff)); }
.jvs-list{ margin-top:10px; gap:10px; }

.jvs-card{ grid-template-columns:1fr auto; grid-template-areas:"ic chip" "info info" "rate rate" "bar bar" "range btn"; align-items:center; row-gap:7px; padding:14px 14px 13px; border-radius:24px;
  background:var(--surface,#fff); box-shadow:0 12px 26px -12px color-mix(in oklab, var(--pc) 45%, rgba(15,23,42,.2)), inset 0 0 0 1.5px color-mix(in oklab, var(--pc) 22%, var(--surface,#fff)); }
.jvs-card::after{ right:-30px; top:-30px; width:96px; height:96px; background:color-mix(in oklab, var(--pc) 11%, var(--surface,#fff)); }
.jvs-card::before{ content:''; position:absolute; left:14px; right:14px; bottom:0; height:3px; border-radius:3px 3px 0 0; background:linear-gradient(90deg, var(--pc), color-mix(in oklab, var(--pc) 45%, #fff)); opacity:.9; }
.jvs-card.best{ box-shadow:0 16px 30px -12px color-mix(in oklab, var(--pc) 55%, rgba(15,23,42,.2)), inset 0 0 0 2px color-mix(in oklab, var(--pc) 65%, #fff); }
.jvs-ic{ justify-self:start; }
.jvs-sub{ display:contents; }
.jvs-chip{ display:inline-flex; grid-area:chip; justify-self:end; align-self:start; position:relative; z-index:1; align-items:center; gap:5px; font-size:10px; font-weight:800; padding:4px 9px; border-radius:99px; white-space:nowrap; }
.jvs-chip i{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.jvs-chip.up{ color:color-mix(in oklab, #16a34a 62%, var(--text,#15803d)); background:color-mix(in oklab, #22c55e 16%, var(--surface,#dcfce7)); }
.jvs-chip.down{ color:color-mix(in oklab, #dc2626 62%, var(--text,#b91c1c)); background:color-mix(in oklab, #ef4444 14%, var(--surface,#fee2e2)); }
.jvs-card.best .jvs-chip.up::after{ content:'★'; color:#f59e0b; margin-left:2px; }
.jvs-sub small{ grid-area:range; display:block; position:relative; z-index:1; font-size:10.5px; font-weight:700; color:var(--jv-mute,#64748b); }
.jvs-info b{ font-size:calc(clamp(13px,10.4cqw,16px) * var(--k,1)); font-weight:800; }
.jvs-rt b{ padding:0; background:none; box-shadow:none; overflow:visible; font-size:calc(clamp(26px,19cqw,38px) * var(--k,1)); font-weight:800; letter-spacing:-1px; gap:.18em; color:color-mix(in oklab, var(--pc) 72%, var(--jv-dk,#0f172a)); }
.jvs-rt b em{ font-size:max(10.5px,.34em); padding:.34em .7em; letter-spacing:0; color:color-mix(in oklab, var(--pc) 75%, var(--jv-dk,#0f172a)); background:color-mix(in oklab, var(--pc) 13%, var(--surface,#fff)); box-shadow:none; }
.jvs-bar{ display:block; grid-area:bar; position:relative; z-index:1; height:6px; border-radius:99px; background:color-mix(in oklab, var(--pc) 13%, var(--surface,#fff)); overflow:hidden; }
.jvs-bar i{ display:block; height:100%; width:calc(var(--fill) * 1%); border-radius:inherit; background:linear-gradient(90deg, var(--pc), color-mix(in oklab, var(--pc) 55%, #fff)); }
.jvs-btn{ display:flex; grid-area:btn; justify-self:end; position:relative; z-index:1; width:30px; height:30px; border-radius:50%; align-items:center; justify-content:center; font-size:0; background:var(--pc); box-shadow:0 8px 14px -4px color-mix(in oklab, var(--pc) 60%, transparent); }
.jvs-btn::after{ content:'›'; font-size:20px; font-weight:900; line-height:1; color:#fff; margin-top:-2px; }
.jvs-card.off{ background:var(--surface-2,#f4f6fa); box-shadow:inset 0 0 0 1.5px var(--ring,#e3e6ee); }
.jvs-card.off::before, .jvs-card.off .jvs-bar, .jvs-card.off .jvs-btn{ display:none; }
.jvs-card.off .jvs-chip.down{ font-size:9.5px; }
.jvs.jv-dense .jvs-bar, .jvs.jv-dense .jvs-sub small{ display:none; }
.jvs-card{ grid-template-columns:minmax(0,1fr) auto; }
.jvs-card > *{ min-width:0; }
.jvs-chip{ font-size:9.5px; padding:3px 8px; }
.jvs-card.off .jvs-chip{ display:none; }
.jvs-sub small{ white-space:nowrap; font-size:10px; }
.jvs-card::after{ background:color-mix(in oklab, var(--pc) 8%, var(--surface,#fff)); }
.jvs-chip.up{ font-size:0; padding:0; background:none; gap:0; }
.jvs-chip.up i{ display:none; }
.jvs-card:not(.best) .jvs-chip.up{ display:none; }
.jvs-card.best .jvs-chip.up::after{ content:"★ TOP"; margin:0; padding:4px 8px; border-radius:99px; font-size:9.5px; font-weight:800; letter-spacing:.4px; color:#92400e; background:#fef3c7; }


/* ── Resseler home v5: native-app look (flat page, segmented control, grouped list rows) ───────────────────────── */
body.jumlo-catalog-page{ background:var(--bg,#f2f3f7); }
body .jvs.jvs{ padding-top:12px; }
body .jvs.jvs .jbn{ border-radius:18px; margin-bottom:14px; box-shadow:0 2px 10px rgba(15,23,42,.10); animation:none; }
body .jvs.jvs .jbn::after{ display:none; }
body .jvs.jvs .jbn-track{ border-radius:18px; }
body .jvs.jvs .jvs-sheet{ margin-top:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
body .jvs.jvs .jvs-head{ padding:0 4px 8px; }
body .jvs.jvs .jvs-head b{ font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--jv-mute,#6b7280); }
body .jvs.jvs .jvs-head span{ padding:0; background:none; font-size:12px; font-weight:600; color:var(--jv-mute,#6b7280); }
body .jvs.jvs .jvs-head span::before{ width:7px; height:7px; box-shadow:none; }
body .jvs.jvs .jvs-tabs{ padding:2px; gap:0; border-radius:10px; background:rgba(120,120,140,.16); box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; animation:none; }
body .jvs.jvs .jvs-tabs button{ min-height:34px; border-radius:8px; font-size:12.5px; font-weight:600; letter-spacing:0; color:var(--jv-ink,#111827); }
body .jvs.jvs .jvs-tabs button.on{ background:var(--surface,#fff); color:var(--jv-ink,#111827); box-shadow:0 1px 3px rgba(0,0,0,.18); animation:none; }
body .jvs.jvs .jvs-tabs button span{ background:none; color:var(--jv-mute,#6b7280); padding:0; min-width:0; }
body .jvs.jvs .jvs-tabs button.on span{ background:none; color:var(--a); }
body .jvs.jvs .jvs-list{ display:block; margin-top:12px; border-radius:16px; overflow:hidden; background:var(--surface,#fff); box-shadow:0 1px 2px rgba(15,23,42,.08); }
body .jvs.jvs .jvs-card{ container-type:normal; display:grid; grid-template-columns:48px minmax(0,1fr) auto 14px; grid-template-areas:"ic info rate chev" "ic range rate chev"; column-gap:12px; row-gap:1px; align-items:center;
  padding:11px 14px; border-radius:0; background:transparent; box-shadow:none; border-bottom:.5px solid rgba(120,120,140,.22); animation:none; transform:none; }
body .jvs.jvs .jvs-card:last-child{ border-bottom:0; }
body .jvs.jvs .jvs-card::before, body .jvs.jvs .jvs-card::after{ content:none; }
body .jvs.jvs .jvs-card:not(.off):active{ background:rgba(120,120,140,.12); transform:none; }
body .jvs.jvs .jvs-card.best{ box-shadow:none; background:color-mix(in oklab, var(--pc) 6%, transparent); }
body .jvs.jvs .jvs-ic{ grid-area:ic; width:48px; height:48px; border-radius:12px; box-shadow:0 0 0 .5px rgba(0,0,0,.12); }
body .jvs.jvs .jvs-ic img{ border-radius:12px; }
body .jvs.jvs .jvs-ic::before{ right:-3px; bottom:-3px; width:12px; height:12px; }
body .jvs.jvs .jvs-info{ grid-area:info; }
body .jvs.jvs .jvs-info b{ font-size:15.5px; font-weight:600; letter-spacing:-.1px; }
body .jvs.jvs .jvs-card.best .jvs-info b::after{ content:' ★'; color:#f59e0b; font-size:13px; }
body .jvs.jvs .jvs-sub{ display:contents; }
body .jvs.jvs .jvs-chip, body .jvs.jvs .jvs-bar{ display:none !important; }
body .jvs.jvs .jvs-sub small{ grid-area:range; display:block; font-size:12.5px; font-weight:500; color:var(--jv-mute,#6b7280); white-space:nowrap; }
body .jvs.jvs .jvs-rt{ display:contents; }
body .jvs.jvs .jvs-rt b{ grid-area:rate; justify-self:end; font-size:21px; font-weight:700; letter-spacing:-.4px; color:var(--jv-ink,#111827); display:inline-flex; align-items:baseline; gap:6px; padding:0; background:none; box-shadow:none; overflow:visible; }
body .jvs.jvs .jvs-rt b em{ font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:99px; color:color-mix(in oklab, #16a34a 62%, var(--text,#15803d)); background:color-mix(in oklab, #22c55e 16%, var(--surface,#dcfce7)); }
body .jvs.jvs .jvs-btn{ grid-area:chev; display:block; width:14px; height:14px; box-shadow:none; background:none; justify-self:end; font-size:0; }
body .jvs.jvs .jvs-btn::after{ content:'›'; display:block; font-size:22px; line-height:14px; font-weight:400; color:rgba(120,120,140,.7); margin:0; }
body .jvs.jvs .jvs-card.off{ background:transparent; box-shadow:none; }
body .jvs.jvs .jvs-card.off .jvs-btn{ display:none; }
body .jvs.jvs .jvs-card.off .jvs-rt b.jvs-na{ font-size:12px; font-weight:600; color:#9ca3af; }
body .jvs.jvs .jvs-card.off .jvs-info b{ color:#9ca3af; }
body .jvs.jvs .jvs-rt b{ font-size:19px; gap:5px; } body .jvs.jvs .jvs-rt b em{ font-size:10.5px; padding:2px 7px; }
body .jvs.jvs .jvs-card{ column-gap:11px; } body .jvs.jvs .jvs-sub small{ font-size:12px; }

/* ── Resseler v6: real-app metrics (16px side margins, 8pt rhythm, 44px touch targets, edge-to-edge tab bar) ────── */
body.jumlo-catalog-page main.page:has(.jvs){ padding-left:0; padding-right:0; }
body.jumlo-catalog-page .container:has(> .jvs){ padding-left:0; padding-right:0; }
body .jvs.jvs{ padding:12px 16px 0; margin-bottom:calc(88px + env(safe-area-inset-bottom, 0px)); max-width:640px; }
body .jvs.jvs .jbn{ margin:0 0 16px; border-radius:16px; }
body .jvs.jvs .jbn-track{ border-radius:16px; }
body .jvs.jvs .jvs-head{ min-height:20px; padding:0 2px 8px; }
body .jvs.jvs .jvs-head b{ font-size:13px; line-height:20px; }
body .jvs.jvs .jvs-head span{ font-size:13px; line-height:20px; }
body .jvs.jvs .jvs-tabs{ height:36px; padding:2px; border-radius:9px; }
body .jvs.jvs .jvs-tabs button{ min-height:32px; height:32px; font-size:13px; border-radius:7px; padding:0 6px; }
body .jvs.jvs .jvs-list{ margin-top:16px; border-radius:12px; }
body .jvs.jvs .jvs-card{ grid-template-columns:44px minmax(0,1fr) auto 12px; column-gap:12px; row-gap:2px; min-height:68px; padding:12px 16px; }
body .jvs.jvs .jvs-ic{ width:44px; height:44px; border-radius:11px; }
body .jvs.jvs .jvs-ic img{ border-radius:11px; }
body .jvs.jvs .jvs-ic::before{ width:11px; height:11px; right:-3px; bottom:-3px; }
body .jvs.jvs .jvs-info b{ font-size:16px; line-height:20px; font-weight:600; }
body .jvs.jvs .jvs-sub small{ font-size:13px; line-height:18px; }
body .jvs.jvs .jvs-rt b{ font-size:18px; line-height:22px; font-weight:700; }
body .jvs.jvs .jvs-rt b em{ font-size:11px; line-height:14px; padding:3px 7px; }
body .jvs.jvs .jvs-btn{ width:12px; }
body .jvs.jvs .jvs-card.off .jvs-rt b.jvs-na{ font-size:13px; }

/* floating help button: 56px, 16px from the edge, 16px above the tab bar */
body[class*="jumlo-"] .mm-cfab{ right:16px; bottom:calc(var(--safe-bottom,0px) + 72px); }
body[class*="jumlo-"] .mm-cfab__btn{ width:56px; height:56px; box-shadow:0 4px 14px rgba(0,0,0,.28); }
html.jumlo-app .mm-cfab, html.jumlo-app .contact-fab{ bottom:calc(var(--safe-bottom,0px) + 72px) !important; }

/* tab bar: edge-to-edge, hairline on top, 24px icons + 10px labels, tint on the active tab (Resseler standalone bar + shared bar) */
html body .jva-bar{ left:0; right:0; bottom:0; max-width:none; margin:0; padding:6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); border-radius:0; gap:0; animation:none;
  background:var(--surface,#fff); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; border-top:.5px solid rgba(120,120,140,.32); }
html body .jva-bar .jva-ind{ display:none; }
html body .jva-bar a{ min-height:48px; border-radius:0; gap:2px; font-size:10px; font-weight:600; letter-spacing:0; color:#8a8fa0; }
html body .jva-bar a.on{ color:var(--mm-primary,var(--a)); }
html body .jva-bar a.on svg{ transform:none; }
html body .jva-bar a svg{ width:24px; height:24px; }
html body .jva-bar a.lock::after{ right:calc(50% - 20px); top:2px; }
html.jumlo-app main.page{ padding-bottom:calc(var(--safe-bottom,0px) + 72px); }
body[class*="jumlo-"] .tabbar{ left:0 !important; right:0 !important; bottom:0 !important; width:100% !important; max-width:none !important; margin:0 !important; border-radius:0 !important; border:0 !important; border-top:.5px solid rgba(120,120,140,.32) !important;
  box-shadow:none !important; background:var(--surface,#fff) !important; animation:none !important; padding-bottom:env(safe-area-inset-bottom, 0px); }
body[class*="jumlo-"] .tabbar::after{ display:none !important; }
body[class*="jumlo-"] .tabbar a, body[class*="jumlo-"] .tabbar a:not(.tabbar-quicksend){ animation:none !important; font-size:10px; font-weight:600; letter-spacing:0; }
body[class*="jumlo-"] .tabbar a.active .ico{ background:none !important; box-shadow:none !important; animation:none !important; }
body[class*="jumlo-"] .tabbar a.active .ico::after{ display:none !important; }
body[class*="jumlo-"] .tabbar a.active::after{ display:none; }
body[class*="jumlo-"] .tabbar a.active .ico{ color:var(--mm-primary,var(--a)) !important; }
body[class*="jumlo-"] .tabbar a.active .ico svg{ stroke:currentColor !important; }
body[class*="jumlo-"] .tabbar a{ color:#8a8fa0; } body[class*="jumlo-"] .tabbar a.active{ color:var(--mm-primary,var(--a)); }
body[class*="jumlo-"] .tabbar a.locked::after{ top:3px; right:calc(50% - 20px); }
body[class*="jumlo-"] .mm-pwa{ left:16px !important; bottom:calc(var(--safe-bottom,0px) + 72px) !important; height:44px; }

/* ── Resseler v7: network cards (one card per network: header, bonus bar, footer action) ──────────────────────── */
body .jvs.jvs .jvs-list{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:16px; background:none; box-shadow:none; border-radius:0; overflow:visible; }
body .jvs.jvs .jvs-card{ grid-template-columns:48px minmax(0,1fr) auto; grid-template-areas:"ic info rate" "ic chip rate" "bar bar bar" "range range btn"; column-gap:12px; row-gap:0; align-items:center;
  padding:14px 14px 12px; min-height:0; border:0; border-radius:18px; overflow:hidden; background:var(--surface,#fff);
  box-shadow:0 1px 3px rgba(15,23,42,.10), 0 6px 16px -8px rgba(15,23,42,.14); transition:transform .15s ease, box-shadow .15s ease; }
body .jvs.jvs .jvs-card:not(.off):active{ transform:scale(.985); background:var(--surface,#fff); }
body .jvs.jvs .jvs-card.best{ background:color-mix(in oklab, var(--pc) 5%, var(--surface,#fff)); box-shadow:0 0 0 1.5px color-mix(in oklab, var(--pc) 70%, #fff), 0 8px 20px -10px color-mix(in oklab, var(--pc) 55%, transparent); }
body .jvs.jvs .jvs-ic{ width:48px; height:48px; border-radius:14px; box-shadow:0 0 0 1px rgba(15,23,42,.08); }
body .jvs.jvs .jvs-ic img{ border-radius:14px; }
body .jvs.jvs .jvs-info b{ font-size:17px; font-weight:700; line-height:22px; letter-spacing:-.2px; }
body .jvs.jvs .jvs-chip{ display:inline-flex !important; grid-area:chip; justify-self:start; align-self:start; align-items:center; gap:5px; margin:1px 0 0; padding:0; background:none; font-size:12.5px; font-weight:600; line-height:18px; }
body .jvs.jvs .jvs-chip.up{ color:color-mix(in oklab, #16a34a 62%, var(--text,#15803d)); font-size:12.5px; } body .jvs.jvs .jvs-chip.up i{ display:block; width:7px; height:7px; border-radius:50%; background:#22c55e; }
body .jvs.jvs .jvs-card:not(.best) .jvs-chip.up{ display:inline-flex !important; }
body .jvs.jvs .jvs-card.best .jvs-chip.up::after{ content:'· Ugu fiican'; margin:0 0 0 2px; padding:0; background:none; color:color-mix(in oklab, #d97706 62%, var(--text,#b45309)); font-size:12.5px; font-weight:700; letter-spacing:0; }
body .jvs.jvs .jvs-chip.down{ color:#9ca3af; } body .jvs.jvs .jvs-chip.down i{ width:7px; height:7px; border-radius:50%; background:#9ca3af; }
body .jvs.jvs .jvs-card.best .jvs-info b::after{ content:none; }
body .jvs.jvs .jvs-rt b{ font-size:26px; line-height:28px; font-weight:800; letter-spacing:-.8px; flex-direction:column; align-items:flex-end; gap:2px; color:var(--jv-ink,#111827); }
body .jvs.jvs .jvs-rt b em{ font-size:11px; line-height:14px; padding:2px 8px; }
body .jvs.jvs .jvs-bar{ display:block !important; grid-area:bar; height:5px; margin:12px 0 10px; border-radius:99px; background:color-mix(in oklab, var(--pc) 12%, var(--surface-2,#eef0f4)); overflow:hidden; }
body .jvs.jvs .jvs-bar i{ display:block; height:100%; width:calc(var(--fill) * 1%); border-radius:inherit; background:var(--pc); }
body .jvs.jvs .jvs-sub small{ grid-area:range; font-size:13px; line-height:20px; font-weight:500; color:var(--jv-mute,#6b7280); }
body .jvs.jvs .jvs-btn{ display:inline-flex; grid-area:btn; width:auto; height:auto; align-items:center; gap:2px; justify-self:end; font-size:14px; font-weight:700; line-height:20px; color:var(--pc); background:none; box-shadow:none; }
body .jvs.jvs .jvs-btn::after{ content:'›'; font-size:20px; line-height:18px; font-weight:600; color:inherit; margin:0; }
body .jvs.jvs .jvs-card.off{ background:color-mix(in oklab, var(--surface,#fff) 55%, var(--surface-2,#eef0f4)); box-shadow:none; }
body .jvs.jvs .jvs-card.off .jvs-bar, body .jvs.jvs .jvs-card.off .jvs-btn{ display:none !important; }
body .jvs.jvs .jvs-card.off .jvs-bar + .jvs-btn{ display:none !important; }
body .jvs.jvs .jvs-card.off .jvs-sub small{ grid-column:1 / -1; padding-top:10px; }
body .jvs.jvs .jvs-card.off .jvs-rt b.jvs-na{ font-size:12.5px; font-weight:600; line-height:18px; letter-spacing:0; color:#9ca3af; }
body .jvs.jvs .jvs-card.off .jvs-info b{ color:#6b7280; }
body .jvs.jvs .jvs-card.off .jvs-rt b.jvs-na{ display:none; }

/* ── Resseler v8: two network cards per row (compact, all visible without scrolling) ───────────────────────────── */
body .jvs.jvs .jvs-list{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px; }
body .jvs.jvs .jvs-card{ grid-template-columns:40px minmax(0,1fr); grid-template-areas:"ic info" "rate rate" "bar bar" "range range"; column-gap:10px; row-gap:0; align-items:center; padding:12px 12px 11px; border-radius:18px; min-height:0;
  background:linear-gradient(180deg, color-mix(in oklab, var(--pc) 9%, var(--surface,#fff)) 0%, var(--surface,#fff) 62%); box-shadow:0 1px 3px rgba(15,23,42,.10), 0 8px 18px -10px color-mix(in oklab, var(--pc) 45%, rgba(15,23,42,.2)); }
body .jvs.jvs .jvs-card.best{ background:linear-gradient(180deg, color-mix(in oklab, var(--pc) 14%, var(--surface,#fff)) 0%, var(--surface,#fff) 66%); box-shadow:0 0 0 1.5px color-mix(in oklab, var(--pc) 70%, #fff), 0 10px 22px -10px color-mix(in oklab, var(--pc) 55%, transparent); }
body .jvs.jvs .jvs-ic{ width:40px; height:40px; border-radius:12px; box-shadow:0 0 0 2px #fff, 0 0 0 3.5px color-mix(in oklab, var(--pc) 45%, #fff); }
body .jvs.jvs .jvs-ic img{ border-radius:12px; }
body .jvs.jvs .jvs-ic::before{ width:10px; height:10px; right:-4px; top:-4px; bottom:auto; }
body .jvs.jvs .jvs-info b{ font-size:15px; line-height:20px; font-weight:700; letter-spacing:-.2px; }
body .jvs.jvs .jvs-card.best .jvs-info b::after{ content:' ★'; color:#f59e0b; font-size:13px; }
body .jvs.jvs .jvs-chip{ display:none !important; }
body .jvs.jvs .jvs-rt b{ flex-direction:row; align-items:baseline; justify-content:flex-start; justify-self:start; gap:6px; margin-top:10px; font-size:30px; line-height:32px; font-weight:800; letter-spacing:-1px; color:color-mix(in oklab, var(--pc) 78%, var(--jv-dk,#0f172a)); }
body .jvs.jvs .jvs-rt b em{ font-size:11px; line-height:14px; padding:2px 7px; letter-spacing:0; color:color-mix(in oklab, var(--pc) 75%, var(--jv-dk,#0f172a)); background:color-mix(in oklab, var(--pc) 13%, var(--surface,#fff)); }
body .jvs.jvs .jvs-bar{ margin:8px 0 7px; height:4px; }
body .jvs.jvs .jvs-sub small{ font-size:11.5px; line-height:16px; }
body .jvs.jvs .jvs-btn{ display:none !important; }
body .jvs.jvs .jvs-card.off{ background:color-mix(in oklab, var(--surface,#fff) 55%, var(--surface-2,#eef0f4)); box-shadow:none; }
body .jvs.jvs .jvs-card.off .jvs-rt b.jvs-na{ display:block; margin-top:10px; font-size:13px; line-height:32px; font-weight:600; color:#9ca3af; letter-spacing:0; }
body .jvs.jvs .jvs-card.off .jvs-sub small{ grid-column:auto; padding-top:0; margin-top:0; }
body .jvs.jvs .jvs-card.off .jvs-bar{ display:none !important; }
@media (min-width:640px){ body .jvs.jvs .jvs-list{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
body .jvs.jvs .jvs-card:not(.best) .jvs-chip.up, body .jvs.jvs .jvs-card .jvs-chip.down, body .jvs.jvs .jvs-card.best .jvs-chip.up{ display:none !important; } body .jvs.jvs .jvs-card{ align-content:start; }

/* ── banners: shorter (21:9) so the networks sit higher on the screen ───────────────────────────────────────── */
.jbn-s, .jbn-s.jbn-img{ aspect-ratio:21/9; }
.jbn-s{ padding:7cqw 6cqw 8cqw; gap:1cqw; }
.jbn-s small{ font-size:max(9px,2.7cqw); }
.jbn-big{ font-size:clamp(30px,11.5cqw,46px); }
.jbn-big em{ font-size:max(10px,3cqw); padding:2px 8px; }
.jbn-h{ font-size:clamp(16px,5.4cqw,23px); }
.jbn-sub{ font-size:max(10.5px,3.1cqw); }
.jbn-deco .c1, .jbn-deco .c2{ width:32cqw; height:32cqw; }
.jbn-deco .c1{ right:-17cqw; top:-17cqw; } .jbn-deco .c2{ left:-17cqw; bottom:-17cqw; }
.jbn-deco .p{ height:1.9cqw; }
.jbn-deco .p1{ top:2.4cqw; width:10cqw; } .jbn-deco .p2{ top:5.1cqw; width:21cqw; } .jbn-deco .p3{ top:7.8cqw; left:10cqw; width:14cqw; }
.jbn-deco .p4{ bottom:7.8cqw; right:10cqw; width:14cqw; } .jbn-deco .p5{ bottom:5.1cqw; width:21cqw; } .jbn-deco .p6{ bottom:2.4cqw; width:10cqw; }
.jbn-deco .h{ height:2.6cqw; width:20cqw; } .jbn-deco .h1{ top:2.6cqw; left:46cqw; } .jbn-deco .h2{ bottom:3.6cqw; left:22cqw; }
.jbn-av{ width:clamp(38px,12cqw,50px); height:clamp(38px,12cqw,50px); top:2.2cqw; right:2.2cqw; }
.jbn-feats{ gap:1.4cqw; } .jbn-feats span{ padding:1.5cqw 2.2cqw; border-radius:11px; } .jbn-feats svg{ width:max(14px,4.2cqw); height:max(14px,4.2cqw); } .jbn-feats b{ font-size:max(10.5px,3cqw); }
.jbn-logos img{ width:clamp(24px,7.5cqw,32px); height:clamp(24px,7.5cqw,32px); }
.jbn-s.t4{ padding-top:6.5cqw; gap:1cqw; }
.jbn-row:nth-child(n+3){ display:none; }
.jbn-row{ padding:.4cqw 2.4cqw .4cqw 1cqw; border-radius:11px; font-size:max(11px,3.2cqw); }
.jbn-row img{ width:clamp(20px,5.6cqw,26px); height:clamp(20px,5.6cqw,26px); }
.jbn-row b{ font-size:max(13px,4cqw); }
.jbn-dots{ bottom:3.2cqw; }