/* =====================================================================
   CardVCC — Bin.CardVCC.com design system  (v1, 2026)
   Light, modern SaaS / fintech. Pink → magenta → purple → peach.
   Single source of truth: loaded by header.php, header_bin.php, footer.
   Also RE-MAPS the legacy utility classes (.bg-teal-*, .text-gray-*,
   .bg-white, .rounded, .shadow-md, .breadcrumb, tables, forms …) so the
   existing page templates + thousands of generated bin-code pages adopt
   the new branding without per-page rewrites.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;450;500;600;700&display=swap');

/* ── Design tokens ──────────────────────────────────────────────── */
:root {
  /* Brand */
  --brand-pink:    #EC4899;
  --brand-rose:    #FB6FA0;
  --brand-magenta: #D946EF;
  --brand-purple:  #A855F7;
  --brand-violet:  #7C3AED;
  --brand-peach:   #FFB7A0;

  --grad-brand:   linear-gradient(120deg, #F23E94 0%, #C026D3 52%, #7C3AED 100%);
  --grad-primary: linear-gradient(135deg, #FB6FA0 0%, #E0469E 45%, #C026D3 100%);
  --grad-primary-hover: linear-gradient(135deg, #FF7FAC 0%, #E957A9 45%, #CA37DD 100%);
  --grad-footer:  linear-gradient(120deg, #FB7BA2 0%, #E24E9C 38%, #A855F7 100%);
  --grad-soft:    linear-gradient(135deg, rgba(236,72,153,.10), rgba(168,85,247,.10));

  /* Surfaces */
  --bg:          #F6F4FB;
  --bg-tint-a:   rgba(236,72,153,.07);
  --bg-tint-b:   rgba(168,85,247,.08);
  --card:        #FFFFFF;
  --card-2:      #FBFAFF;
  --muted-bg:    #F4F1FB;
  --chip-bg:     #F6F0FE;
  --border:      #ECE7F5;
  --border-2:    #E3DEF0;

  /* Ink */
  --ink:        #1B1E2E;
  --ink-2:      #3A3F52;
  --muted:      #6B7280;
  --muted-2:    #9AA1B1;

  /* Status */
  --ok:     #16A34A;  --ok-bg:   #E7F8EE;  --ok-bd:  #BBEFCE;
  --warn:   #D97706;  --warn-bg: #FEF3E2;
  --danger: #E11D48;  --danger-bg:#FDECEF;
  --info:   #7C3AED;

  /* Shape */
  --r-sm: 9px;  --r: 13px;  --r-lg: 18px;  --r-xl: 24px;  --r-pill: 999px;

  /* Shadow */
  --sh-xs: 0 1px 2px rgba(20,16,40,.05);
  --sh-sm: 0 1px 2px rgba(20,16,40,.05), 0 4px 14px rgba(96,52,140,.06);
  --sh-md: 0 2px 6px rgba(20,16,40,.05), 0 12px 30px rgba(96,52,140,.09);
  --sh-lg: 0 8px 24px rgba(96,52,140,.14), 0 30px 60px rgba(96,52,140,.10);
  --sh-brand: 0 8px 22px rgba(214,57,178,.30);

  --font-body:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

  --transition: all .2s ease;
}

/* ── Reset / base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; border: 0 solid var(--border); margin: 0; padding: 0; }

html { font-family: var(--font-body); font-size: 16px; line-height: 1.6; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background-color: var(--bg);
  color: var(--ink-2);
  min-height: 100vh;
  /* 'clip' (not 'hidden') prevents horizontal scroll WITHOUT creating a scroll
     container — avoids the Chromium bug that mis-positions native <select> popups. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
/* Soft ambient brand wash */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 45% at 12% 0%, var(--bg-tint-a) 0%, transparent 60%),
    radial-gradient(55% 45% at 92% 6%, var(--bg-tint-b) 0%, transparent 60%),
    radial-gradient(45% 40% at 50% 100%, rgba(255,183,160,.06) 0%, transparent 70%);
}
nav, header, main, section, footer, div, article, aside { position: relative; z-index: 1; }

/* ── Typography ─────────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); color: var(--ink); line-height: 1.2; font-weight: 700; letter-spacing: -.01em; margin: 0; }
h1 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-top: 2.25rem; margin-bottom: .9rem; }
h3 { font-size: 1.15rem; margin-top: 1.6rem; margin-bottom: .5rem; }
h4,h5 { font-size: 1rem; }

p { color: var(--muted); line-height: 1.75; font-size: .975rem; margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
strong, b { color: var(--ink-2); font-weight: 600; }

a { color: var(--brand-magenta); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--brand-violet); }
.leading-relaxed a, p a { text-decoration: underline; text-underline-offset: 2px; }

ul, ol { list-style: none; }
li { color: var(--muted); font-size: .975rem; line-height: 1.7; }

.gradient-text {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #E0DAEE; border-radius: 6px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #CDC4E4; }
:focus-visible { outline: 2px solid var(--brand-magenta); outline-offset: 2px; }

/* ── Container ──────────────────────────────────────────────────── */
.container { width: 100%; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; }
@media (min-width:640px){ .container{ max-width: 640px; } }
@media (min-width:768px){ .container{ max-width: 768px; } }
@media (min-width:1024px){ .container{ max-width: 1040px; } }
@media (min-width:1280px){ .container{ max-width: 1200px; } }

/* ── Top navigation ─────────────────────────────────────────────── */
.cv-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.cv-nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.cv-brand { display: inline-flex; align-items: center; gap: 10px; }
.cv-logo { height: 42px; width: auto; display: block; border-radius: 6px; }
@media (max-width:560px){ .cv-logo { height: 34px; } }
/* logo art has a white plate; on dark nav present it as a tidy rounded badge */
html.cv-dark .cv-logo { background: #fff; border-radius: 8px; }
.cv-brand__glyph {
  width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto;
  background: var(--grad-primary); box-shadow: var(--sh-brand);
  display: grid; place-items: center; color: #fff;
}
.cv-brand__name { font-family: var(--font-display); font-weight: 800; font-size: 1.32rem; letter-spacing: -.02em; color: var(--ink); }
.cv-brand__name .vcc { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.cv-nav__links { display: none; align-items: center; gap: 4px; }
.cv-nav__links a {
  font-size: .92rem; font-weight: 500; color: var(--ink-2);
  padding: 8px 14px; border-radius: var(--r-sm); transition: var(--transition); white-space: nowrap;
}
.cv-nav__links a:hover { color: var(--brand-magenta); background: var(--chip-bg); }
.cv-nav__links a.active { color: var(--brand-magenta); font-weight: 600; }
.cv-nav__links a.active::after {
  content: ''; display: block; height: 2px; border-radius: 2px; margin-top: 5px;
  background: var(--grad-primary);
}
.cv-nav__right { display: flex; align-items: center; gap: 10px; }
.cv-iconbtn {
  width: 40px; height: 40px; border-radius: var(--r-pill); border: 1px solid var(--border);
  background: #fff; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; transition: var(--transition);
}
.cv-iconbtn:hover { border-color: var(--brand-magenta); color: var(--brand-magenta); }
.cv-btn-dash {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--grad-primary); color: #fff !important; font-weight: 600; font-size: .9rem;
  padding: 10px 18px; border-radius: var(--r-pill); box-shadow: var(--sh-brand); transition: var(--transition);
}
.cv-btn-dash:hover { transform: translateY(-1px); filter: brightness(1.03); color: #fff !important; }
.cv-hamburger { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-sm); border: 1px solid var(--border); background: #fff; color: var(--ink); cursor: pointer; }
.cv-iconbtn svg, .cv-hamburger svg { width: 20px; height: 20px; }
@media (min-width:1024px){
  .cv-nav__links { display: flex; }
  .cv-hamburger { display: none; }
}
/* Mobile drawer */
.cv-mobile { display: none; border-top: 1px solid var(--border); background: #fff; }
.cv-mobile.open { display: block; }
.cv-mobile a { display: block; padding: 13px 4px; font-weight: 500; color: var(--ink-2); border-bottom: 1px solid var(--border); }
.cv-mobile a:hover, .cv-mobile a.active { color: var(--brand-magenta); }
@media (min-width:1024px){ .cv-mobile { display: none !important; } }

/* ── Hero ───────────────────────────────────────────────────────── */
.cv-hero { padding-top: 116px; padding-bottom: 28px; text-align: center; }
.cv-hero h1 { margin-bottom: .6rem; }
.cv-hero .sub { color: var(--muted); font-size: 1.05rem; max-width: 640px; margin: 0 auto; }

/* Search bar (BIN lookup) */
.cv-search {
  margin: 26px auto 8px; max-width: 760px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-pill);
  box-shadow: var(--sh-md); display: flex; align-items: center; gap: 8px; padding: 9px 9px 9px 22px;
}
.cv-search input { flex: 1 1 auto; min-width: 0; border: 0 !important; background: transparent !important; height: 48px !important; font-size: 1rem; color: var(--ink); box-shadow: none !important; outline: none; }
.cv-search .cv-btn { white-space: nowrap; }
.cv-hint { color: var(--muted-2); font-size: .85rem; text-align: center; margin-top: 12px; }
@media (max-width:560px){
  .cv-search { border-radius: var(--r-lg); flex-direction: column; padding: 12px; gap: 10px; align-items: stretch; }
  /* stacked layout: input must not collapse via flex-basis — give it a real field */
  .cv-search input { flex: 0 0 auto !important; width: 100%; height: 54px !important; border: 1.5px solid var(--border-2) !important; background: var(--muted-bg) !important; border-radius: var(--r) !important; padding: 0 16px !important; }
  .cv-search .cv-btn { width: 100%; height: 52px; }
}

/* ── Buttons ────────────────────────────────────────────────────── */
.cv-btn, button[type="submit"], input[type="submit"], [type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--grad-primary); color: #fff !important;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  height: 48px; padding: 0 26px; border: 0; border-radius: var(--r-pill);
  cursor: pointer; box-shadow: var(--sh-brand); transition: var(--transition); text-decoration: none !important; line-height: 1;
  white-space: nowrap;
}
.cv-btn:hover, button[type="submit"]:hover, input[type="submit"]:hover, [type="submit"]:hover {
  background: var(--grad-primary-hover); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(214,57,178,.36); color: #fff !important;
}
.cv-btn:active, button[type="submit"]:active { transform: translateY(0); }
.cv-btn--ghost { background: #fff !important; color: var(--brand-magenta) !important; border: 1px solid var(--border-2); box-shadow: var(--sh-xs); }
.cv-btn--ghost:hover { border-color: var(--brand-magenta); background: var(--chip-bg) !important; color: var(--brand-violet) !important; }

/* ── Cards / panels ─────────────────────────────────────────────── */
.cv-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); padding: 1.5rem 1.6rem;
}
.cv-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.cv-card__title { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.cv-ico {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
  background: var(--chip-bg); color: var(--brand-magenta); display: grid; place-items: center;
}

/* key/value rows */
.cv-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.cv-kv__row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px dashed var(--border-2); }
.cv-kv__row:last-child, .cv-kv__col-last { border-bottom: 0; }
.cv-kv__ico { width: 26px; height: 26px; border-radius: 8px; background: var(--chip-bg); color: var(--brand-purple); display: grid; place-items: center; flex: 0 0 auto; font-size: .8rem; }
.cv-kv__k { color: var(--muted); font-size: .9rem; }
.cv-kv__v { margin-left: auto; color: var(--ink); font-weight: 600; font-size: .92rem; text-align: right; }
@media (max-width:760px){ .cv-kv { grid-template-columns: 1fr; gap: 0; } }

/* badges */
.cv-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; padding: 4px 11px; border-radius: var(--r-pill); }
.cv-badge--ok   { color: var(--ok); background: var(--ok-bg); border: 1px solid var(--ok-bd); }
.cv-badge--no   { color: var(--muted); background: var(--muted-bg); border: 1px solid var(--border-2); }
.cv-badge--warn { color: var(--warn); background: var(--warn-bg); }
.cv-badge--brand{ color: var(--brand-violet); background: var(--chip-bg); }

/* wallet rows */
.cv-wallet { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.cv-wallet:last-child { border-bottom: 0; }
.cv-wallet__name { font-weight: 500; color: var(--ink-2); }
.cv-wallet__status { margin-left: auto; }

/* probability meter */
.cv-prob__val { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; line-height: 1; }
.cv-prob__bar { height: 8px; border-radius: var(--r-pill); background: var(--muted-bg); overflow: hidden; margin-top: 12px; }
.cv-prob__fill { height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg,#22C55E,#16A34A); }
.cv-prob--low  .cv-prob__val { color: var(--ok); }
.cv-prob--med  .cv-prob__val { color: var(--warn); }
.cv-prob--high .cv-prob__val { color: var(--danger); }
.cv-prob--med  .cv-prob__fill { background: linear-gradient(90deg,#FBBF24,#D97706); }
.cv-prob--high .cv-prob__fill { background: linear-gradient(90deg,#FB7185,#E11D48); }

/* feature strip */
.cv-features { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 22px; }
.cv-feature { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.4rem; box-shadow: var(--sh-xs); transition: var(--transition); }
.cv-feature:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }
.cv-feature__ico { width: 46px; height: 46px; border-radius: 13px; background: var(--grad-soft); color: var(--brand-magenta); display: grid; place-items: center; margin-bottom: 12px; }
.cv-feature h4 { color: var(--ink); margin-bottom: 4px; font-family: var(--font-display); }
.cv-feature p { font-size: .85rem; margin: 0; }
@media (max-width:980px){ .cv-features { grid-template-columns: repeat(2,1fr); } }
@media (max-width:520px){ .cv-features { grid-template-columns: 1fr; } }

/* two-column results grid */
.cv-grid-2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; align-items: start; }
.cv-stack { display: grid; gap: 22px; }
@media (max-width:980px){ .cv-grid-2 { grid-template-columns: 1fr; } }

/* ── Forms ──────────────────────────────────────────────────────── */
.form-input, input:not([type]), input[type="text"], input[type="number"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], input[type="password"], select, textarea, .form-select, .form-textarea {
  -webkit-appearance: none; appearance: none; display: block; width: 100%;
  background: #fff !important; border: 1.5px solid var(--border-2) !important; border-radius: var(--r) !important;
  padding: 0 1rem; height: 50px; font-size: .97rem; font-family: var(--font-body) !important; color: var(--ink) !important;
  box-shadow: var(--sh-xs); transition: var(--transition);
}
textarea, .form-textarea { height: auto; padding: .8rem 1rem; line-height: 1.6; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted-2) !important; }
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus, .form-input:focus {
  outline: none; border-color: var(--brand-magenta) !important;
  box-shadow: 0 0 0 4px rgba(217,70,239,.14) !important; background: #fff !important;
}
select, .form-select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%239AA1B1' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 1.1em; padding-right: 2.4rem; cursor: pointer;
}
.form-checkbox { -webkit-appearance:none; appearance:none; width:20px; height:20px; border:1.5px solid #c2b6da; border-radius:6px; background:#fff; cursor:pointer; vertical-align:middle; flex:0 0 auto; transition: border-color .15s ease, box-shadow .15s ease; }
.form-checkbox:hover { border-color: var(--brand-magenta); }
/* checkmark layered ON TOP of the gradient (two background layers) */
.form-checkbox:checked {
  border-color: transparent;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 00-1.414-1.414L7 8.586 5.707 7.293z'/%3E%3C/svg%3E"),
    var(--grad-primary);
  background-position: center, center;
  background-size: 72%, cover;
  background-repeat: no-repeat, no-repeat;
}
.form-checkbox:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(217,70,239,.20); }

/* ── Tables ─────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); }
thead { background: var(--grad-soft); }
thead th { padding: 13px 18px; text-align: left; font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-violet); border-bottom: 1px solid var(--border); white-space: nowrap; }
tbody tr { border-bottom: 1px solid var(--border); transition: background .15s; }
tbody tr:last-child { border-bottom: 0; }
tbody tr:hover { background: var(--chip-bg); }
tbody td { padding: 12px 18px; color: var(--ink-2); vertical-align: middle; }
tbody td a { color: var(--brand-magenta); font-weight: 600; }
tbody td a:hover { color: var(--brand-violet); text-decoration: underline; }

/* ── Breadcrumb ─────────────────────────────────────────────────── */
.breadcrumb, .breadcrumb.flat { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; background: transparent; border: 0; box-shadow: none; margin-bottom: 1rem; }
.breadcrumb a, .breadcrumb.flat a {
  display: inline-flex; align-items: center; font-size: .82rem; font-weight: 500; line-height: 1;
  color: var(--muted) !important; background: #fff; border: 1px solid var(--border) !important;
  padding: 7px 14px !important; min-width: 0 !important; border-radius: var(--r-pill); transition: var(--transition); text-decoration: none !important;
}
.breadcrumb a::before, .breadcrumb a::after, .breadcrumb.flat a::before, .breadcrumb.flat a::after { content: none !important; }
.breadcrumb a:hover, .breadcrumb a.active, .breadcrumb.flat a:hover, .breadcrumb.flat a.active {
  color: var(--brand-magenta) !important; background: var(--chip-bg) !important; border-color: transparent !important;
}

/* ── Article / long-form (SEO content) ──────────────────────────── */
.leading-relaxed { line-height: 1.8; }
.leading-relaxed h2 { font-size: 1.45rem; padding-bottom: .6rem; border-bottom: 1px solid var(--border); margin-top: 2.4rem; margin-bottom: 1rem; }
.leading-relaxed h3 { color: var(--brand-violet); }
.leading-relaxed ul, .leading-relaxed ol { padding-left: 1.4rem; margin-bottom: 1rem; }
.leading-relaxed li { margin-bottom: .4rem; }
.list-disc li { list-style: disc; }
.list-disc li::marker { color: var(--brand-magenta); }
.leading-relaxed ol li { list-style: decimal; }
.leading-relaxed ol li::marker { color: var(--brand-magenta); font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1.6rem 0; }

/* ════════════════════════════════════════════════════════════════
   LEGACY UTILITY RE-MAP  — keeps old templates + generated bin-code
   pages on-brand without rewriting their markup.
   ════════════════════════════════════════════════════════════════ */
.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}
.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.text-center{text-align:center}.text-right{text-align:right}.uppercase{text-transform:uppercase}.tracking-wide{letter-spacing:.025em}
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.w-full{width:100%}.h-full{height:100%}.mx-auto{margin-left:auto;margin-right:auto}
.min-h-70-screen{min-height:60vh}
.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-primary{font-family:var(--font-display)}
.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.9rem}
.leading-relaxed{line-height:1.8}.underline{text-decoration:underline}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.overflow-auto{overflow:auto}.opacity-50{opacity:.5}

/* spacing helpers used widely */
.my-2{margin:.5rem 0}.my-3{margin:.75rem 0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}.mb-3{margin-bottom:.75rem}
.p-2{padding:.5rem}.p-3{padding:.75rem}.py-2{padding:.5rem 0}.py-3{padding:.75rem 0}.py-5{padding:1.25rem 0}.py-8{padding:2rem 0}.py-20{padding:3rem 0}
.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-8{padding-left:2rem;padding-right:2rem}
.pb-10{padding-bottom:2.5rem}.pt-32{padding-top:7rem}.rounded{border-radius:var(--r)}.rounded-lg{border-radius:var(--r-lg)}.rounded-full{border-radius:var(--r-pill)}

/* colour utilities → new palette */
.text-white{color:#fff !important}.text-gray-500{color:var(--muted-2) !important}.text-gray-600{color:var(--muted) !important}
.text-gray-700{color:var(--ink-2) !important}.text-gray-800{color:var(--ink) !important}.text-red-500,.text-red-600{color:var(--danger) !important}
.text-teal-200,.text-teal-500,.text-teal-600,.text-teal-700{color:var(--brand-magenta) !important}
.bg-white{background:var(--card) !important;border:1px solid var(--border);color:var(--ink-2) !important}
.bg-gray-100{background:var(--muted-bg) !important;color:var(--ink-2) !important}
.bg-red-200{background:var(--danger-bg) !important}.bg-teal-200{background:var(--chip-bg) !important}

/* legacy buttons → gradient pill */
.bg-teal-500,.bg-teal-600,.hover\:bg-teal-500:hover,.hover\:bg-teal-900:hover,.focus\:bg-teal-700:focus{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--grad-primary) !important;color:#fff !important;font-family:var(--font-display);font-weight:600;
  border-radius:var(--r-pill) !important;box-shadow:var(--sh-brand);transition:var(--transition);text-decoration:none !important;
}
.bg-teal-500:hover,.bg-teal-600:hover{transform:translateY(-2px);background:var(--grad-primary-hover) !important;color:#fff !important}
.bg-gray-500,.bg-gray-600{display:inline-flex;align-items:center;justify-content:center;background:#fff !important;color:var(--ink-2) !important;border:1px solid var(--border-2) !important;border-radius:var(--r-pill) !important;font-weight:500}
.shadow,.shadow-md{box-shadow:var(--sh-sm) !important}
.border-gray-200{border-color:var(--border) !important}.border-gray-500{border-color:var(--border-2) !important}.border-red-400{border-color:var(--danger) !important}.border{border-width:1px}.border-2{border-width:2px}

/* badge boxes from validator/checker results */
.bg-teal-200.rounded,.bg-teal-200.rounded-lg{background:var(--ok-bg) !important;border:1px solid var(--ok-bd) !important;color:var(--ink-2) !important;padding:1.1rem !important;border-radius:var(--r) !important}
.bg-red-200.rounded,.bg-red-200.rounded-lg{background:var(--danger-bg) !important;border:1px solid #F7C6CF !important;color:var(--ink-2) !important;padding:1.1rem !important;border-radius:var(--r) !important}

/* generated bin-code detail tables (inline-styled) → themed */
table[style*="border-collapse"]{border-color:var(--border) !important;border-radius:var(--r-lg) !important;overflow:hidden;width:100% !important;box-shadow:var(--sh-sm)}
table[style*="border-collapse"] tr{background:#fff !important}
table[style*="border-collapse"] tr:nth-child(even){background:var(--card-2) !important}
table[style*="border-collapse"] td{border-color:var(--border) !important;color:var(--ink-2) !important;padding:12px 16px !important}
table[style*="border-collapse"] td b{color:var(--muted) !important;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
table[style*="border-collapse"] td:last-child{color:var(--ink) !important;font-weight:600}
/* .bin-table on generated pages carries its own dark inline <style>; override it */
.bin-table{background:#fff !important;border:1px solid var(--border) !important;border-radius:var(--r-lg) !important;overflow:hidden;box-shadow:var(--sh-sm)}
.bin-table tr,.bin-table tr:nth-child(odd){background:#fff !important}
.bin-table tr:nth-child(even){background:var(--card-2) !important}
.bin-table td{border-color:var(--border) !important;color:var(--ink-2) !important;padding:12px 16px !important}
.bin-table td b{color:var(--muted) !important;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.bin-table td:last-child{color:var(--ink) !important;font-weight:600}

/* hero band used by some inner pages (.bg-teal-900/.bg-teal-800) → light */
.bg-teal-800,.bg-teal-900{background:transparent !important;border:0 !important}
.bg-teal-800 h1,.bg-teal-900 h1{color:var(--ink) !important}
.bg-teal-800 p,.bg-teal-900 p{color:var(--muted) !important}

/* responsive utility breakpoints kept */
@media (min-width:640px){.sm\:inline-block{display:inline-block}.sm\:w-auto{width:auto}.sm\:w-1\/2{width:50%}}
@media (min-width:768px){.md\:w-1\/2{width:50%}}
@media (min-width:1024px){.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:w-auto{width:auto}.lg\:w-1\/2{width:50%}}

/* ── Footer ─────────────────────────────────────────────────────── */
.cv-footer { background: var(--grad-footer); color: #fff; margin-top: 3rem; padding: 46px 0 22px; }
.cv-footer a { color: rgba(255,255,255,.86) !important; transition: var(--transition); }
.cv-footer a:hover { color: #fff !important; }
.cv-footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 30px; }
.cv-footer__brand .n { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: #fff; }
.cv-footer__brand p { color: rgba(255,255,255,.82); font-size: .9rem; margin-top: 10px; max-width: 280px; }
.cv-footer h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.cv-footer ul { display: grid; gap: 9px; }
.cv-footer ul a { font-size: .9rem; }
.cv-social { display: flex; gap: 10px; margin-top: 6px; }
.cv-social a { width: 38px; height: 38px; border-radius: var(--r-pill); background: rgba(255,255,255,.16); display: grid; place-items: center; }
.cv-social a:hover { background: rgba(255,255,255,.28); }
.cv-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 34px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.22); }
.cv-footer__bottom p { color: rgba(255,255,255,.8); font-size: .82rem; margin: 0; }
.cv-footer__badge { display: inline-flex; align-items: center; gap: 7px; background: #fff; color: var(--brand-magenta); font-weight: 600; font-size: .82rem; padding: 7px 14px; border-radius: var(--r-pill); }
/* the generic .cv-footer a white-link rule would hide the badge text on its white pill — keep it magenta */
.cv-footer .cv-footer__badge, .cv-footer .cv-footer__badge:hover { color: var(--brand-magenta) !important; }
.cv-footer .cv-footer__badge svg { width: 14px; height: 14px; }
.cv-social a svg { width: 17px; height: 17px; color: #fff; }
@media (max-width:900px){ .cv-footer__top { grid-template-columns: 1fr 1fr; gap: 26px; } }
@media (max-width:520px){ .cv-footer__top { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════
   DARK THEME  — html.cv-dark (toggled from the nav, persisted in localStorage)
   Token overrides flip the whole system; a few hardcoded-white surfaces
   are remapped to var(--card) so they follow suit.
   ════════════════════════════════════════════════════════════════ */
html.cv-dark {
  --bg:        #0F0B1A;
  --card:      #181225;
  --card-2:    #1F1733;
  --muted-bg:  #1B1430;
  --chip-bg:   #261B3D;
  --border:    #2A2342;
  --border-2:  #362C4F;

  --ink:       #F5F2FC;
  --ink-2:     #D7CFE8;
  --muted:     #A99FBF;
  --muted-2:   #7C7290;

  --ok:#34D399; --ok-bg:rgba(52,211,153,.14); --ok-bd:rgba(52,211,153,.32);
  --warn:#FBBF24; --warn-bg:rgba(251,191,36,.15);
  --danger:#FB7185; --danger-bg:rgba(251,113,133,.15);

  --sh-xs: 0 1px 2px rgba(0,0,0,.5);
  --sh-sm: 0 1px 2px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.4);
  --sh-md: 0 2px 8px rgba(0,0,0,.5), 0 16px 36px rgba(0,0,0,.45);
  --sh-lg: 0 10px 30px rgba(0,0,0,.55);
  background-color: #0F0B1A;
}
html.cv-dark body { background-color: var(--bg); color: var(--ink-2); }
html.cv-dark body::before {
  background:
    radial-gradient(60% 45% at 12% 0%, rgba(236,72,153,.12) 0%, transparent 60%),
    radial-gradient(55% 45% at 92% 6%, rgba(168,85,247,.14) 0%, transparent 60%),
    radial-gradient(45% 40% at 50% 100%, rgba(124,58,237,.10) 0%, transparent 70%);
}

/* surfaces that were hardcoded white → follow the card token in dark */
html.cv-dark .cv-nav { background: rgba(15,11,26,.85); border-bottom-color: var(--border); }
html.cv-dark .cv-iconbtn,
html.cv-dark .cv-search,
html.cv-dark .breadcrumb a,
html.cv-dark .cv-feature,
html.cv-dark .cv-mobile,
html.cv-dark table { background: var(--card); }
html.cv-dark .cv-iconbtn { border-color: var(--border-2); color: var(--ink-2); }
html.cv-dark .cv-hamburger { background: var(--card); border-color: var(--border-2); color: var(--ink); }
html.cv-dark .cv-btn--ghost { background: var(--card) !important; color: var(--brand-rose) !important; border-color: var(--border-2); }
html.cv-dark input:not([type="checkbox"]):not([type="radio"]), html.cv-dark select, html.cv-dark textarea, html.cv-dark .form-input,
html.cv-dark .form-select, html.cv-dark .form-textarea { background: var(--card) !important; border-color: var(--border-2) !important; color: var(--ink) !important; }
html.cv-dark .form-checkbox { background-color: var(--card); border-color: var(--border-2); }
html.cv-dark .form-checkbox:checked { border-color: transparent; }
html.cv-dark .bg-white { background: var(--card) !important; }

/* generated bin-code tables in dark */
html.cv-dark .bin-table, html.cv-dark .bin-table tr, html.cv-dark .bin-table tr:nth-child(odd) { background: var(--card) !important; }
html.cv-dark .bin-table tr:nth-child(even) { background: var(--card-2) !important; }
html.cv-dark table[style*="border-collapse"] tr { background: var(--card) !important; }
html.cv-dark table[style*="border-collapse"] tr:nth-child(even) { background: var(--card-2) !important; }

/* a wallet icon on the homepage is inline black; keep it visible in dark */
html.cv-dark .cv-wallet i[style*="color:#000"] { color: var(--ink) !important; }

/* ───────────────── Homepage: stat band · tools grid · sections ───────────────── */
.cv-sec { margin-top: 3.25rem; }
.cv-sec__head { text-align: center; max-width: 660px; margin: 0 auto 1.6rem; }
.cv-sec__head h2 { margin: 0 0 .4rem; }
.cv-sec__head p { color: var(--muted); margin: 0; }

.cv-statband {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-top: 1.5rem;
}
.cv-statband .cv-stat {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 20px 18px; text-align: center; box-shadow: var(--sh-xs);
}
.cv-stat__num {
  font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; line-height: 1;
  background: var(--grad-primary); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cv-stat__label { color: var(--muted); font-size: .85rem; margin-top: .45rem; font-weight: 600; }

.cv-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cv-tool {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 22px 20px; color: var(--ink); transition: var(--transition);
  position: relative; overflow: hidden;
}
.cv-tool:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--brand-purple); }
.cv-tool__ico {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px;
  background: var(--grad-soft); color: var(--brand-magenta); font-size: 1.2rem; margin-bottom: 6px;
}
.cv-tool h3 { margin: 0; font-size: 1.05rem; }
.cv-tool p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.cv-tool__go { margin-top: auto; color: var(--brand-magenta); font-weight: 700; font-size: .85rem; padding-top: 8px; }
.cv-tool .cv-tool__tag {
  position: absolute; top: 14px; right: 14px; font-size: .65rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: #fff; background: var(--grad-primary); padding: 3px 8px; border-radius: var(--r-pill);
}

@media (max-width: 980px) {
  .cv-statband { grid-template-columns: repeat(2, 1fr); }
  .cv-tools { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .cv-tools { grid-template-columns: 1fr; }
  .cv-stat__num { font-size: 1.6rem; }
}

/* ════════════════ Landing page (homepage) ════════════════ */
.lp-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:128px 0 44px}
.lp-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.02em;
  color:var(--brand-magenta);background:var(--grad-soft);border:1px solid var(--border);padding:6px 14px;border-radius:var(--r-pill);margin-bottom:18px}
.lp-hero h1{font-size:clamp(2.1rem,4.4vw,3.2rem);line-height:1.08;margin:0 0 .9rem}
.lp-hero .sub{color:var(--muted);font-size:1.06rem;max-width:520px;margin:0 0 1.6rem}
.lp-cta{display:flex;gap:12px;flex-wrap:wrap}
.lp-btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:.96rem;padding:14px 24px;border-radius:var(--r-pill);text-decoration:none;transition:var(--transition);white-space:nowrap}
.lp-btn--primary{background:var(--grad-primary);color:#fff;box-shadow:var(--sh-brand)}
.lp-btn--primary:hover{transform:translateY(-2px);filter:brightness(1.04);color:#fff}
.lp-btn--ghost{background:var(--card);color:var(--ink);border:1px solid var(--border)}
.lp-btn--ghost:hover{border-color:var(--brand-purple);transform:translateY(-2px)}
.lp-trust{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:1.3rem;color:var(--muted);font-size:.85rem;font-weight:600}
.lp-trust span{display:inline-flex;align-items:center;gap:7px}
.lp-trust i{color:var(--ok)}

/* 3D card visual */
.lp-cardwrap{perspective:1300px;display:grid;place-items:center;position:relative;min-height:430px;overflow-x:clip}
/* big soft glow ellipse, perfectly centered behind the card (card centered by the grid) */
.lp-orbit{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  width:min(640px,94vw);aspect-ratio:1.75;border-radius:50%;
  background:radial-gradient(ellipse 58% 58% at 50% 50%, rgba(217,70,239,.22), rgba(124,58,237,.08) 50%, transparent 74%)}
.lp-orbit::before{content:"";position:absolute;inset:11%;border-radius:50%;border:1px solid rgba(217,70,239,.16)}
.lp-card3d{position:relative;width:340px;height:212px;border-radius:18px;padding:22px;color:#fff;
  background:linear-gradient(135deg,#ec4899 0%,#d946ef 48%,#7c3aed 100%);
  box-shadow:0 34px 60px -18px rgba(124,58,237,.55),inset 0 1px 0 rgba(255,255,255,.25);
  transform:rotateY(-17deg) rotateX(7deg);transform-style:preserve-3d;animation:lp-float 6s ease-in-out infinite;z-index:2}
@keyframes lp-float{0%,100%{transform:rotateY(-17deg) rotateX(7deg) translateY(0)}50%{transform:rotateY(-13deg) rotateX(7deg) translateY(-14px)}}
.lp-card3d::before{content:"";position:absolute;inset:0;border-radius:18px;background:radial-gradient(120px 80px at 80% 0%,rgba(255,255,255,.35),transparent 70%)}
.lp-card3d__top{display:flex;justify-content:space-between;align-items:flex-start}
.lp-chip{width:44px;height:33px;border-radius:7px;background:linear-gradient(135deg,#f7e08a,#cda93a 60%,#b8862e);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.lp-card3d__brand{font-style:italic;font-weight:800;font-size:1.5rem;letter-spacing:.5px}
.lp-card3d__num{font-family:ui-monospace,monospace;font-size:1.32rem;letter-spacing:2.5px;margin-top:34px;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.lp-card3d__row{display:flex;justify-content:space-between;margin-top:16px;font-size:.62rem;letter-spacing:.08em;opacity:.92}
.lp-card3d__row b{display:block;font-size:.82rem;letter-spacing:1px;margin-top:3px}

/* stat band with icons */
.lp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-xl);box-shadow:var(--sh-sm);overflow:hidden;margin-top:8px}
.lp-stat{display:flex;align-items:center;gap:14px;padding:22px 24px;border-right:1px solid var(--border)}
.lp-stat:last-child{border-right:0}
.lp-stat__ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--grad-soft);color:var(--brand-magenta);font-size:1.2rem;flex:none}
.lp-stat__num{font-family:var(--font-display);font-weight:800;font-size:1.5rem;line-height:1;background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lp-stat__label{color:var(--muted);font-size:.8rem;font-weight:600;margin-top:3px}

/* why-us 6 grid (reuses cv-feature look but 3-up) */
.lp-why{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* featured demo cards */
.lp-featured{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.lp-feat{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:26px;box-shadow:var(--sh-sm)}
.lp-feat h3{margin:0 0 .5rem;font-size:1.2rem}
.lp-feat__list{list-style:none;padding:0;margin:0 0 1.1rem}
.lp-feat__list li{display:flex;align-items:center;gap:9px;padding:6px 0;color:var(--ink-2);font-size:.92rem}
.lp-feat__list i{color:var(--ok)}
.lp-demo{background:var(--bg-tint-a,#faf7ff);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px}
.lp-demo__row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed var(--border);font-size:.85rem}
.lp-demo__row:last-child{border-bottom:0}
.lp-demo__k{color:var(--muted)}
.lp-demo__v{font-weight:700;color:var(--ink)}

/* wallet + gauge row */
.lp-wg{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.lp-gauge{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.lp-gauge svg{flex:none}
.lp-gauge__lvl{font-family:var(--font-display);font-weight:800;font-size:1.6rem}

@media(max-width:880px){
  .lp-hero{grid-template-columns:1fr;text-align:center;padding:108px 0 8px}
  .lp-hero .sub{margin-left:auto;margin-right:auto}
  .lp-cta,.lp-trust{justify-content:center}
  .lp-cardwrap{min-height:340px;margin-top:6px}
  .lp-stats{grid-template-columns:repeat(2,1fr)}
  .lp-stat:nth-child(2){border-right:0}
  .lp-stat:nth-child(-n+2){border-bottom:1px solid var(--border)}
  .lp-why{grid-template-columns:repeat(2,1fr)}
  .lp-featured,.lp-wg{grid-template-columns:1fr}
}
@media(max-width:560px){
  .lp-why{grid-template-columns:1fr}
  .lp-stats{grid-template-columns:1fr}
  .lp-stat{border-right:0;border-bottom:1px solid var(--border)}
  .lp-stat:last-child{border-bottom:0}
  .lp-card3d{width:min(290px,82vw);height:auto;aspect-ratio:1.6}
}

/* ─── Virtual-card probability widget (homepage) ─── */
.vc-form{display:flex;gap:8px;margin:.2rem 0 1.2rem;flex-wrap:wrap}
.vc-form input{flex:1;min-width:150px;padding:11px 15px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--card);color:var(--ink);font-size:.95rem}
.vc-form button{padding:11px 20px;border-radius:var(--r-pill);background:var(--grad-primary);color:#fff;font-weight:700;border:0;cursor:pointer;white-space:nowrap;transition:var(--transition)}
.vc-form button:hover{filter:brightness(1.05);transform:translateY(-1px)}
.vc-body{display:grid;grid-template-columns:170px 1fr;gap:22px;align-items:center}
.vc-gauge{position:relative;width:170px;flex:none}
.vc-gauge svg{width:100%;height:auto;display:block;overflow:visible}
.vc-track{fill:none;stroke:var(--muted-bg);stroke-width:15;stroke-linecap:round}
.vc-arc{fill:none;stroke-width:15;stroke-linecap:round;stroke-dasharray:0 252;transition:stroke-dasharray 1s cubic-bezier(.2,.8,.2,1),stroke .45s}
.vc-arc.low{stroke:#16a34a}.vc-arc.med{stroke:#f59e0b}.vc-arc.high{stroke:#ef4444}
.vc-needle{transition:transform 1s cubic-bezier(.34,1.4,.5,1);transform-origin:100px 100px}
.vc-needle line{stroke:var(--ink);stroke-width:3.5;stroke-linecap:round}
.vc-needle circle{fill:var(--ink)}
.vc-gscore{position:absolute;left:0;right:0;bottom:2px;text-align:center}
.vc-gscore b{font-family:var(--font-display);font-weight:800;font-size:1.7rem;line-height:1}
.vc-gscore small{display:block;color:var(--muted);font-size:.7rem;margin-top:-2px}
.vc-level{font-family:var(--font-display);font-weight:800;font-size:1.5rem;line-height:1}
.vc-level.low{color:#16a34a}.vc-level.med{color:#f59e0b}.vc-level.high{color:#ef4444}
.vc-sub{color:var(--muted);font-size:.82rem;margin:.1rem 0 .7rem}
.vc-signals{display:flex;flex-direction:column;gap:0}
.vc-signal{display:flex;justify-content:space-between;gap:10px;font-size:.84rem;padding:6px 0;border-bottom:1px dashed var(--border)}
.vc-signal:last-child{border-bottom:0}
.vc-signal>span{color:var(--muted)}
.vc-signal b{color:var(--ink);font-weight:700;text-align:right}
.vc-signal b.up{color:var(--warn)}.vc-signal b.down{color:var(--ok)}
.vc-scale{display:flex;gap:6px;margin-top:16px}
.vc-scale__seg{flex:1;text-align:center;font-size:.72rem;font-weight:800;letter-spacing:.02em;padding:7px;border-radius:9px;color:#fff;opacity:.32;transition:opacity .35s,transform .35s}
.vc-scale__seg.low{background:#16a34a}.vc-scale__seg.med{background:#f59e0b}.vc-scale__seg.high{background:#ef4444}
.vc-scale__seg.on{opacity:1;transform:translateY(-2px);box-shadow:var(--sh-sm)}
.vc-reason{margin:.9rem 0 0;font-size:.84rem;color:var(--ink-2);background:var(--grad-soft);border:1px solid var(--border);border-radius:var(--r);padding:11px 14px}
@media(max-width:560px){.vc-body{grid-template-columns:1fr;justify-items:center;text-align:center}.vc-signals{width:100%}.vc-signal b{text-align:right}}

/* ─── Virtual-card promo banner (cross-sell to cardvcc.com) ─── */
.cv-promo{display:grid;grid-template-columns:320px 1fr;gap:30px;align-items:center;position:relative;overflow:hidden;
  background:linear-gradient(120deg,rgba(236,72,153,.10),rgba(168,85,247,.13));
  border:1px solid var(--border);border-radius:var(--r-xl);padding:28px 34px;margin:2.5rem 0;box-shadow:var(--sh-sm)}
.cv-promo::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(217,70,239,.16),transparent 70%);pointer-events:none}
.cv-promo__visual{display:grid;place-items:center;min-height:172px}
.cv-promo__card{width:280px;height:176px;border-radius:16px;padding:18px;color:#fff;position:relative;
  background:linear-gradient(135deg,#7C3AED 0%,#C026D3 52%,#EC4899 100%);
  box-shadow:0 24px 46px -16px rgba(124,58,237,.55),inset 0 1px 0 rgba(255,255,255,.25);
  transform:rotate(-7deg);transition:var(--transition)}
.cv-promo:hover .cv-promo__card{transform:rotate(-4deg) translateY(-3px)}
.cv-promo__crow{display:flex;justify-content:space-between;align-items:center}
.cv-promo__brand{font-weight:800;font-size:1rem;display:inline-flex;align-items:center;gap:7px}
.cv-promo__chip{display:block;width:40px;height:30px;border-radius:6px;margin:16px 0 14px;background:linear-gradient(135deg,#f7e08a,#cda93a 60%,#b8862e)}
.cv-promo__num{font-family:ui-monospace,monospace;font-size:1.12rem;letter-spacing:1.5px;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.cv-promo__cfoot{margin-top:14px;font-size:.7rem;letter-spacing:.08em;opacity:.92}
.cv-promo__visa{font-style:italic;font-weight:800;font-size:1.15rem;letter-spacing:0}
.cv-promo__tag{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--brand-magenta);background:#fff;border:1px solid var(--border);padding:4px 12px;border-radius:var(--r-pill);margin-bottom:11px}
.cv-promo__body h3{font-size:clamp(1.3rem,2.4vw,1.6rem);margin:0 0 .5rem}
.cv-promo__body>p{color:var(--ink-2);margin:0 0 1rem;max-width:580px}
.cv-promo__feats{display:flex;flex-wrap:wrap;gap:9px 24px;margin:0 0 1.3rem;padding:0}
.cv-promo__feats li{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-size:.9rem;font-weight:600}
.cv-promo__feats i{color:var(--ok)}
.cv-promo__cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.cv-promo__learn{font-weight:700;color:var(--brand-magenta);white-space:nowrap}
@media(max-width:760px){.cv-promo{grid-template-columns:1fr;text-align:center;padding:26px 20px;gap:18px}
  .cv-promo__feats,.cv-promo__cta{justify-content:center}.cv-promo__body>p{margin-left:auto;margin-right:auto}}