/* ==================================================
   N.B.S.V.A — Design System v5 "AUTHORITY"
   Emerald • Black • White • Verification Blue
   Apple + Discord + Stripe. Minimal. Premium.
   ================================================== */

:root {
  --green: #12B76A;
  --green-soft: rgba(18, 183, 106, .12);
  --blue: #1D9BF0;
  --gold: #F5B301;
  --red: #F04438;
  --bg: #070808;
  --panel: #0D0F0E;
  --card: #101312;
  --card-raised: #131715;
  --line: rgba(255, 255, 255, .07);
  --line-strong: rgba(255, 255, 255, .13);
  --text: #F4F6F5;
  --muted: #8B9490;
  --font: 'Inter', -apple-system, sans-serif;
  --display: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --r: 16px;
  /* Elevation — layered, tinted shadows read as "premium" far more than a
     single flat drop-shadow; the green tint ties every raised surface back
     to the brand instead of a generic gray glow. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
  --shadow-lg: 0 24px 60px -16px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
  --shadow-glow: 0 12px 32px -8px rgba(18,183,106,.25);
  --ease: cubic-bezier(.2, .7, .3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--green); text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.15; letter-spacing: -.02em; font-weight: 700; }

.container { width: min(1140px, 91%); margin: 0 auto; }

/* Label — small caps section markers (Stripe style) */
.label-caps {
  font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--green); margin-bottom: 14px; display: block;
}



/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(7, 8, 8, .82);
  backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 16px; }
.nav-logo { display: flex; align-items: center; gap: 11px; color: var(--text); flex-shrink: 0; }
.nav-logo img { width: 36px; height: 36px; border-radius: 50%; }
.nav-logo .wordmark { font-family: var(--display); font-weight: 800; font-size: 1.03rem; letter-spacing: .01em; }
.nav-logo .sub { display: block; font-size: .58rem; color: var(--muted); font-weight: 500; letter-spacing: .13em; text-transform: uppercase; margin-top: -2px; }

.nav-links { display: flex; gap: 2px; list-style: none; align-items: center; }
.nav-links a {
  display: inline-flex; align-items: center;
  color: var(--muted); font-size: .87rem; font-weight: 600;
  padding: 9px 15px; border-radius: 100px; transition: color .18s, background .18s;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.nav-links a.active { color: #7fe0af; background: var(--green-soft); }
.nav-cta {
  background: var(--green) !important; color: #04130c !important;
  font-weight: 700 !important; margin-left: 8px;
}
.nav-cta:hover { background: #16d67e !important; }
.nav-cta-red { background: var(--red) !important; color: #fff !important; }
.nav-cta-red:hover { background: #ff5c4d !important; }
.nav-search-icon { padding: 9px 12px !important; font-size: 1rem; }

.nav-acct { display: flex; align-items: center; gap: 2px; margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--line); }
.nav-acct-name { background: var(--green-soft); color: #4fdc9c !important; }
.nav-acct-out { color: var(--muted) !important; }
.nav-acct-out:hover { color: #ff8d84 !important; background: rgba(240,68,56,.08) !important; }

.nav-toggle {
  display: none; position: relative; width: 44px; height: 44px; flex-shrink: 0;
  background: none; border: 1px solid var(--line-strong); border-radius: 10px;
  cursor: pointer; padding: 0;
}
.nav-toggle span {
  position: absolute; left: 12px; right: 12px; height: 2px; background: var(--text);
  border-radius: 2px; transition: transform .22s ease, opacity .22s ease, top .22s ease;
}
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 26px; }
.nav-toggle.open span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 12px;
  font-family: var(--font); font-weight: 600; font-size: .93rem;
  border: none; cursor: pointer; transition: all .22s var(--ease);
}
.btn-green { background: var(--green); color: #04130c; }
.btn-green:hover { background: #16d67e; transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.btn-green:active { transform: translateY(0); }
.btn-white { background: var(--text); color: #0a0a0a; }
.btn-white:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line-strong); }
.btn-ghost:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .04); transform: translateY(-2px); }
.btn-blue { background: var(--blue); color: #fff; }
.btn-red { background: var(--red); color: #fff; }
.btn-sm { padding: 9px 16px; font-size: .82rem; border-radius: 10px; }

/* ---------- Hero ---------- */
/* Split, asymmetric composition (copy left / live-status panel right) —
   deliberately NOT the old fully-centered layout, so it reads as a genuinely
   different structure rather than the same page with nicer shadows. */
.hero { position: relative; padding: 76px 0 90px; overflow: hidden; }
#particles { position: absolute; inset: 0; pointer-events: none; }
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(900px 560px at 82% -12%, rgba(18, 183, 106, .18), transparent 60%),
    radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: auto, 28px 28px;
  mask-image: radial-gradient(900px 640px at 78% 0%, #000 40%, transparent 85%);
}
.hero > .container { position: relative; z-index: 2; }
.hero-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; }
@media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; text-align: center; } }
.hero-copy h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); font-weight: 800; margin: 0 0 20px; letter-spacing: -.03em; line-height: 1.05; }
@media (max-width: 900px) { .hero-copy h1 { margin: 0 auto 20px; max-width: 640px; } }
.hero-copy h1 .grn { color: var(--green); }
.hero-copy .lede { color: var(--muted); font-size: 1.08rem; max-width: 480px; margin: 0 0 32px; line-height: 1.6; }
@media (max-width: 900px) { .hero-copy .lede { margin: 0 auto 32px; } }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 900px) { .hero-actions { justify-content: center; } }
.official-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 600; color: #b9e8d2;
  background: var(--green-soft); border: 1px solid rgba(18, 183, 106, .3);
  padding: 8px 18px 8px 14px; border-radius: 100px; margin-bottom: 24px;
  box-shadow: 0 0 0 1px rgba(18,183,106,.06) inset;
}
.official-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulseDot 2s infinite; box-shadow: 0 0 8px rgba(18,183,106,.8); }
@keyframes pulseDot { 50% { opacity: .4; } }

/* Right-side hero art — big freestanding character cutout with a faint
   crest watermark behind it, no bordered card (matches the approved
   mockup — a boxed panel there read as "generic SaaS card", not a poster). */
.hero-art { position: relative; display: flex; align-items: center; justify-content: center; min-height: 320px; }
.hero-art-watermark {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 85%; max-width: 380px; opacity: .06; pointer-events: none; filter: grayscale(1);
}
.hero-art-char {
  position: relative; max-width: 100%; max-height: 480px; width: auto; height: auto;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.6));
}
@media (max-width: 900px) { .hero-art { min-height: 220px; } .hero-art-char { max-height: 300px; } }
.trust-item {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; font-size: .82rem; font-weight: 600; color: #c6ccc8;
}
.trust-item .ti-icon { font-size: 1rem; flex-shrink: 0; }
.verify-row { display: flex; gap: 8px; }
@media (max-width: 480px) {
  .verify-row { flex-direction: column; }
  .verify-row button { width: 100%; }
}
@media (max-width: 640px) {
  .trust-item { font-size: .8rem; padding: 9px 13px; }
}

/* ---------- Sections ---------- */
.section { padding: 88px 0; }
.section.tight { padding: 56px 0; }
.section-head { max-width: 620px; margin-bottom: 50px; }
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: 14px; }
.section-head p { color: var(--muted); font-size: 1rem; }
.divider { height: 1px; background: var(--line); }
/* Alternating full-bleed panel band — breaks the single-flat-background
   monotony of stacking every section directly on .bg. Deliberately used
   sparingly (2-3 bands per page), not every other section. */
.band { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---------- Stats ---------- */
/* Separate cards, each with a colored left-edge accent bar matching its
   icon/number color. */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.stat {
  padding: 22px 20px; text-align: left; position: relative;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  border-left: 3px solid currentColor; box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.stat.grn { color: var(--green); } .stat.rd { color: var(--red); } .stat.blu { color: var(--blue); } .stat.gld { color: var(--gold); }
.stat:hover { box-shadow: var(--shadow-md); }
.stat .icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 1.15rem; margin-bottom: 10px; }
.stat.grn .icon { background: var(--green-soft); }
.stat.rd .icon { background: rgba(240,68,56,.14); }
.stat.blu .icon { background: rgba(29,155,240,.14); }
.stat.gld .icon { background: rgba(245,179,1,.14); }
.stat .num { font-family: var(--display); font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.stat .num.grn { color: var(--green); } .stat .num.blu { color: var(--blue); }
.stat .num.gld { color: var(--gold); } .stat .num.rd { color: var(--red); }
.stat .label { color: var(--muted); font-size: .8rem; margin-top: 10px; font-weight: 600; letter-spacing: .02em; }

/* Custom dropdown — replaces a native <select> (which pops up the OS's
   own picker UI on mobile, jarring next to the rest of the design). Keep
   a parallel hidden input carrying the actual value/id so existing
   .value reads elsewhere don't need to change. */
.csel { position: relative; display: inline-block; width: 100%; }
.csel-btn {
  width: 100%; text-align: left; background: #0b0e0b; color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font-size: .8rem;
  cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 6px;
  font-family: var(--font);
}
.csel-btn:hover { border-color: var(--line-strong); }
.csel-menu {
  display: none; position: fixed; min-width: 160px;
  max-height: 240px; overflow-y: auto; background: var(--card); border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 6px; z-index: 500; box-shadow: 0 12px 28px rgba(0,0,0,.4);
}
.csel.open .csel-menu { display: block; }
.csel-menu button {
  display: block; width: 100%; text-align: left; background: transparent; border: none;
  color: var(--text); padding: 8px 10px; border-radius: 8px; font-size: .82rem; cursor: pointer; font-family: var(--font);
}
.csel-menu button:hover { background: var(--green-soft); color: #4fdc9c; }

/* Fixed-size wrapper for Chart.js canvases — without an explicit height,
   a responsive Chart.js canvas can grow unbounded on re-render (its
   intrinsic size feeds back into the parent's size), ballooning the whole
   page. Chart options must pass maintainAspectRatio:false to actually fill
   this box instead of an auto aspect ratio. */
.chart-box { position: relative; height: 220px; width: 100%; }
@media (max-width: 640px) { .chart-box { height: 180px; } }

/* ---------- Cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 30px; box-shadow: var(--shadow-sm);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
/* No hover lift/transform here on purpose — a transform on the card shifts
   any position:fixed dropdown menu underneath it out of alignment with its
   own button the moment the cursor reaches it (the menu's position is
   computed once at open time, the transform moves the button after). */
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.card h3 { font-size: 1.06rem; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: .92rem; }
.card .icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--green-soft); border: 1px solid rgba(18, 183, 106, .25);
  display: grid; place-items: center; font-size: 1.25rem; margin-bottom: 18px;
}

/* ---------- Enforcement / scam cards (job-listing style) — shared by
   enforcement.html's full grid and the homepage's "Recent Alerts" strip */
.enf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.enf-card { display: flex; flex-direction: column; }
.enf-card-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.enf-card-top h3 { font-size: 1.05rem; margin-bottom: 6px; }
.enf-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.enf-date { color: var(--muted); font-size: .76rem; white-space: nowrap; flex-shrink: 0; }
.enf-reason {
  color: #c4cbc7; font-size: .87rem; margin-bottom: 16px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  line-clamp: 3;
}
.enf-empty { text-align: center; padding: 60px 20px; color: var(--muted); grid-column: 1 / -1; }

/* ---------- Enforcement page v2 (mockup layout) — left sidebar (intro,
   live stats, category filters, warning) + main feed. Scoped under
   .enf-page so the red accent sub-theme only applies inside Enforcement,
   never bleeding into the rest of the green site. ---------- */
.enf-page { --enf-accent: var(--red); overflow-x: hidden; }
.enf-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 860px) { .enf-layout { grid-template-columns: 1fr; } }
.enf-side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 860px) { .enf-side { position: static; } }
.enf-side-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.enf-side-card h3 { font-size: .95rem; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.enf-side-card p { color: var(--muted); font-size: .82rem; }
.enf-stat-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.enf-stat-row { display: flex; justify-content: space-between; align-items: baseline; }
.enf-stat-row .lbl { color: var(--muted); font-size: .82rem; }
.enf-stat-row .val { font-family: var(--display); font-weight: 800; font-size: 1.3rem; }
.enf-warn { background: rgba(240, 68, 56, .08); border: 1px solid rgba(240, 68, 56, .3); border-radius: 12px; padding: 14px 16px; font-size: .8rem; color: #ffb3ac; }
.enf-cat-list { display: flex; flex-direction: column; gap: 3px; }
.enf-cat-row {
  display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 44px;
  background: transparent; border: none; color: var(--text); cursor: pointer;
  padding: 10px 10px; border-radius: 10px; font-size: .85rem; font-family: var(--font); text-align: left;
}
.enf-cat-row:hover { background: rgba(255, 255, 255, .05); }
.enf-cat-row.active { background: rgba(240, 68, 56, .12); color: #ff8d84; }
.enf-cat-row .n { color: var(--muted); font-weight: 700; font-size: .78rem; }
.enf-cat-row.active .n { color: #ff8d84; }

.enf-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.enf-toolbar .big-search { flex: 1; min-width: 220px; }
.enf-filter { background: #0b0e0b; color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: .82rem; font-family: var(--font); }
@media (max-width: 640px) {
  .enf-toolbar { flex-direction: column; align-items: stretch; }
  .enf-toolbar .big-search { min-width: 0; }
  .enf-filter, .enf-toolbar #reportScamBtn { width: 100%; }
}

.enf-card2 { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; margin-bottom: 14px; overflow: hidden; }
.enf-card2-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; flex-wrap: wrap; min-width: 0; }
.enf-card2-head > div { min-width: 0; }
.enf-avatar {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
  background: #1a1e1c; display: grid; place-items: center; font-size: 1.5rem; color: var(--muted);
  border: 1px solid var(--line-strong);
}
.enf-card2-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.enf-card2-name h3 { font-size: 1.08rem; }
.enf-aka { color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; word-break: break-word; }
.enf-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 14px; }
@media (max-width: 700px) { .enf-cols { grid-template-columns: 1fr; } }
.enf-col { min-width: 0; } /* grid items default to min-width:auto — without this, long unbroken
  strings (fake page URLs, UIDs) refuse to shrink and push the whole card into horizontal
  overflow, shifting everything below it (incl. the report link) out past the viewport on mobile */
.enf-col-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 8px; }
.enf-col p, .enf-col li { font-size: .84rem; color: #c4cbc7; overflow-wrap: anywhere; word-break: break-word; }
.enf-col ul { list-style: none; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.enf-evidence-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 6px; max-width: 220px; }
.enf-evidence-grid img, .enf-evidence-more {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line);
}
.enf-evidence-more { display: grid; place-items: center; background: rgba(255,255,255,.06); color: var(--text); font-weight: 700; font-size: .82rem; }
.enf-card2-foot { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--muted); }
.enf-card2-foot strong { color: var(--text); font-weight: 600; }
.enf-reported-badge { display: inline-flex; align-items: center; gap: 5px; }

.enf-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 24px; flex-wrap: wrap; }
.enf-pagination button {
  min-width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--card);
  color: var(--text); cursor: pointer; font-size: .82rem; font-family: var(--font);
}
.enf-pagination button.active { background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; }
.enf-pagination button:disabled { opacity: .4; cursor: default; }

/* ---------- Admin approvals table (Pending/Approved/Rejected) ---------- */
.appr-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.appr-tab {
  background: var(--panel); border: 1px solid var(--line); color: var(--muted);
  padding: 9px 16px; border-radius: 10px; font-size: .84rem; font-weight: 600; cursor: pointer; font-family: var(--font);
}
.appr-tab.active { background: rgba(240, 68, 56, .12); border-color: rgba(240, 68, 56, .35); color: #ff8d84; }
.appr-table-wrap { overflow-x: auto; }
.appr-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.appr-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.appr-table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.appr-table tr:last-child td { border-bottom: none; }

/* ---------- Homepage: enforcement ticker, how-it-works, vendor of the
   month, recent reviews strip ---------- */
.enf-ticker {
  background: rgba(240, 68, 56, .08); border-top: 1px solid rgba(240, 68, 56, .25); border-bottom: 1px solid rgba(240, 68, 56, .25);
  padding: 10px 0; overflow: hidden;
}
.enf-ticker a { display: flex; align-items: center; gap: 8px; color: #ff8d84; font-size: .84rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enf-ticker a:hover { color: #ffb3ac; }

.how-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; position: relative; }
/* Dotted connector between steps — only makes sense once they're side by
   side, so it's added at the desktop breakpoint rather than always-on. */
@media (min-width: 701px) {
  .how-steps::before {
    content: ''; position: absolute; top: 30px; left: 16.5%; right: 16.5%; height: 1px;
    background: repeating-linear-gradient(90deg, var(--line-strong) 0 8px, transparent 8px 16px);
    z-index: 0;
  }
}
@media (max-width: 700px) { .how-steps { grid-template-columns: 1fr; } }
.how-step { text-align: center; padding: 10px; position: relative; }
.how-step .n {
  width: 60px; height: 60px; border-radius: 50%; position: relative; z-index: 1;
  background: var(--card); border: 1px solid var(--line-strong); color: var(--green);
  display: grid; place-items: center; font-weight: 800; font-size: 1.15rem;
  margin: 0 auto 16px; font-family: var(--display); box-shadow: var(--shadow-sm);
}
.how-step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.how-step p { color: var(--muted); font-size: .87rem; max-width: 260px; margin: 0 auto; }

.votm-card {
  background: linear-gradient(160deg, rgba(245, 179, 1, .12), var(--card) 60%);
  border: 1px solid rgba(245, 179, 1, .4); border-radius: var(--r); padding: 34px;
  display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
  box-shadow: var(--shadow-md), 0 0 60px -24px rgba(245,179,1,.5); position: relative; overflow: hidden;
}
.votm-card::before {
  content: ''; position: absolute; top: -40%; right: -10%; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,179,1,.14), transparent 70%); pointer-events: none;
}
.votm-crown { font-size: 2.2rem; filter: drop-shadow(0 2px 8px rgba(245,179,1,.5)); }
.votm-card h3 { font-size: 1.25rem; }

.reviews-strip { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.reviews-strip::-webkit-scrollbar { height: 6px; }
.reviews-strip::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 100px; }
.review-tile {
  flex: 0 0 260px; scroll-snap-align: start; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.review-tile:hover { border-color: rgba(18, 183, 106, .35); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.review-tile .stars { color: var(--gold); font-size: .82rem; margin-bottom: 8px; display: block; }
.review-tile p {
    font-size: 0.86rem;
    color: #c4cbc7;
    margin-bottom: 10px;
    line-height: 1.5;

    overflow: hidden;
    text-overflow: ellipsis;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    display: box;
    line-clamp: 3;
}.review-tile .who { font-size: .78rem; color: var(--muted); font-weight: 600; }

/* Stat "View X ->" link under each number */
.stat-link { display: block; margin-top: 8px; font-size: .74rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.stat-link:hover { color: var(--text); text-decoration: underline; }

/* Bottom feature strip (icon + title + subtitle, no card/border) */
.feature-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; }
.feature-strip-item { display: flex; align-items: flex-start; gap: 12px; }
.feature-strip-item .icon { width: 40px; height: 40px; border-radius: 10px; background: var(--green-soft); color: var(--green); display: grid; place-items: center; font-size: 1.05rem; flex-shrink: 0; }
.feature-strip-item h4 { font-size: .9rem; margin-bottom: 3px; }
.feature-strip-item p { color: var(--muted); font-size: .78rem; }

/* How-it-works with a colored icon medallion + small overlapping step
   number + dashed connector arrow between steps (desktop only). */
.how-steps-v2 { display: flex; align-items: flex-start; justify-content: center; gap: 6px; flex-wrap: wrap; }
.how-step-v2 { display: flex; align-items: flex-start; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; flex: 1; min-width: 220px; box-shadow: var(--shadow-sm); }
.how-step-v2-icon { position: relative; flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; }
.how-step-v2-icon.grn { background: var(--green-soft); color: var(--green); }
.how-step-v2-icon.blu { background: rgba(29,155,240,.12); color: var(--blue); }
.how-step-v2-icon.ppl { background: rgba(168,85,247,.14); color: #c084fc; }
.how-step-v2-num { position: absolute; top: -6px; left: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); border: 1px solid currentColor; font-size: .66rem; font-weight: 800; display: grid; place-items: center; }
.how-step-v2 h3 { font-size: .96rem; margin-bottom: 4px; }
.how-step-v2 p { color: var(--muted); font-size: .82rem; }
.how-arrow { display: flex; align-items: center; color: var(--line-strong); font-size: 1.3rem; padding: 0 2px; align-self: center; }
@media (max-width: 900px) { .how-arrow { display: none; } .how-steps-v2 { flex-direction: column; } .how-step-v2 { width: 100%; } }

/* Vendor of the Month laurel wreaths */
.votm-wreath { font-size: 1.6rem; opacity: .55; flex-shrink: 0; align-self: center; }
@media (max-width: 640px) { .votm-wreath { display: none; } }

/* Category tiles: icon + name + count */
.cat-tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.cat-tile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px;
  text-align: center; text-decoration: none; color: var(--text); box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cat-tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.cat-tile .cat-tile-icon { width: 46px; height: 46px; border-radius: 12px; margin: 0 auto 12px; display: grid; place-items: center; font-size: 1.2rem; }
.cat-tile .cat-tile-count { color: var(--muted); font-size: .76rem; margin-top: 3px; }

/* Newsletter signup band */
.newsletter-box {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: linear-gradient(120deg, rgba(240,68,56,.08), var(--card) 60%);
  border: 1px solid rgba(240,68,56,.25); border-radius: var(--r); padding: 28px 32px; box-shadow: var(--shadow-sm);
}
.newsletter-box .nl-icon { width: 52px; height: 52px; border-radius: 14px; background: rgba(240,68,56,.12); color: var(--red); display: grid; place-items: center; font-size: 1.4rem; flex-shrink: 0; }
.newsletter-box h3 { font-size: 1.15rem; margin-bottom: 4px; }
.newsletter-box p { color: var(--muted); font-size: .84rem; max-width: 380px; }
.newsletter-form { display: flex; gap: 10px; flex: 1; min-width: 280px; max-width: 460px; }
.newsletter-form input { flex: 1; background: #0b0e0b; border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px 14px; color: var(--text); font-size: .9rem; }
.newsletter-hint { font-size: .74rem; color: var(--muted); width: 100%; margin-top: 8px; }

/* "Together we build a safer community" split banner */
.together-banner {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 30px;
  background: linear-gradient(120deg, rgba(240,68,56,.1), var(--card) 55%);
  border: 1px solid rgba(240,68,56,.3); border-radius: var(--r); padding: 40px; overflow: hidden; position: relative;
}
.together-banner .rd { color: var(--red); }
.together-banner-art { text-align: center; }
.together-banner-art img { max-height: 260px; width: auto; margin: 0 auto; border-radius: 12px; }
@media (max-width: 800px) { .together-banner { grid-template-columns: 1fr; text-align: center; } .together-banner-art { order: -1; } }

/* Mega footer */
.mega-footer { background: var(--panel); border-top: 1px solid var(--line); padding: 56px 0 0; }
.mega-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 30px; padding-bottom: 40px; }
@media (max-width: 900px) { .mega-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mega-footer-grid { grid-template-columns: 1fr; } }
.mega-footer-brand p { color: var(--muted); font-size: .84rem; margin: 14px 0 18px; max-width: 280px; }
.mega-footer-social { display: flex; gap: 8px; }
.mega-footer-social a {
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.05); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--muted); text-decoration: none; font-size: .95rem;
  transition: background .2s, color .2s;
}
.mega-footer-social a:hover { background: var(--green-soft); color: #7fe0af; }
.mega-footer-col h4 { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.mega-footer-col a { display: block; color: #c6ccc8; font-size: .87rem; text-decoration: none; margin-bottom: 10px; }
.mega-footer-col a:hover { color: var(--green); }
.mega-footer-col .trust-line { display: flex; align-items: center; gap: 8px; color: #c6ccc8; font-size: .85rem; margin-bottom: 10px; }
.mega-footer-col .trust-line .dot-ic { color: var(--green); }
.mega-footer-bottom {
  border-top: 1px solid var(--line); padding: 18px 0; display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: .78rem;
}
.mega-footer-bottom .rd { color: var(--red); font-weight: 600; }

/* Live Enforcement Feed — horizontal carousel of compact cards, replacing
   the plain text ticker on pages wide enough to show it. */
.feed-carousel-wrap { background: rgba(240,68,56,.06); border: 1px solid rgba(240,68,56,.25); border-radius: var(--r); padding: 18px; position: relative; }
.feed-carousel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }
.v2-live-label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.feed-carousel-head .live-dot { display: inline-flex; align-items: center; gap: 6px; color: var(--red); font-weight: 700; font-size: .84rem; }
.v2-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: pulseDot 2s infinite; flex-shrink: 0; }
.v2-live-sub { font-size: .78rem; color: var(--muted); font-weight: 500; }
.feed-carousel-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.feed-carousel-track::-webkit-scrollbar { display: none; }
.feed-card {
  flex: 0 0 210px; scroll-snap-align: start; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px; cursor: pointer; transition: border-color .2s;
}
.feed-card:hover { border-color: rgba(240,68,56,.4); }
.feed-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.feed-card-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #1a1e1c; display: grid; place-items: center; color: var(--muted); font-size: 1.1rem; flex-shrink: 0; }
.feed-card-name { font-weight: 700; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-card-meta { font-size: .74rem; color: var(--muted); }
.feed-carousel-arrows { display: flex; gap: 6px; }
.feed-carousel-arrows button {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--card);
  color: var(--text); cursor: pointer; font-size: .9rem;
}
.feed-carousel-dots { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.feed-carousel-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.feed-carousel-dots span.active { background: var(--red); }


/* Availability dot + response badge — shared by vendor cards and profile modal */
.vc-online-dot { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; color: #7fe0af; }
.vc-online-dot .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulseDot 2s infinite; }
.vc-response-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; color: #ffcf4d; background: rgba(245,179,1,.1); border: 1px solid rgba(245,179,1,.3); border-radius: 100px; padding: 3px 9px; }
.vc-catalog-strip { display: flex; gap: 6px; margin: 8px 0; }
.vc-catalog-strip img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line); }

/* ---------- Directory toolbar additions: sort + category chips ---------- */
.dir-toolbar-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0; }
.cat-chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.cat-chip {
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--card); border: 1px solid var(--line); color: var(--muted); font-size: .8rem; font-weight: 600;
  padding: 7px 14px; border-radius: 100px; cursor: pointer; font-family: var(--font);
}
.cat-chip.active { background: var(--green-soft); border-color: rgba(18,183,106,.4); color: #7fe0af; }

/* ---------- Messages panel (Phase 5 member messaging) ---------- */
.msg-shell { display: grid; grid-template-columns: 280px 1fr; gap: 16px; height: 72vh; max-width: 900px; }
@media (max-width: 760px) { .msg-shell { grid-template-columns: 1fr; height: auto; } }
.msg-list-pane { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; overflow-y: auto; }
.msg-thread-pane { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); display: flex; flex-direction: column; overflow: hidden; }
@media (max-width: 760px) {
  .msg-thread-pane { display: none; position: fixed; inset: 0; z-index: 300; border-radius: 0; height: 100vh; }
  .msg-thread-pane.mobile-show { display: flex; }
}
.msg-back-btn { display: none; background: none; border: none; color: var(--text); font-size: 1.2rem; cursor: pointer; padding: 4px 8px; }
@media (max-width: 760px) { .msg-back-btn { display: inline-block; } }
.msg-thread-row { display: flex; align-items: center; gap: 8px; padding: 10px 8px; border-radius: 10px; cursor: pointer; }
.msg-thread-row:hover, .msg-thread-row.active { background: rgba(255,255,255,.05); }
.msg-thread-name { font-size: .88rem; font-weight: 700; }
.msg-thread-preview { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.msg-pick-row { padding: 12px 10px; border-radius: 10px; cursor: pointer; font-size: .88rem; }
.msg-pick-row:hover { background: rgba(255,255,255,.05); }
.msg-pick-row.blocked { opacity: .45; cursor: default; }

/* ---------- Verification badge (recognizable blue check) ---------- */
.vcheck {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 19px; height: 19px; color: #fff; font-size: .62rem; font-weight: 800;
  background: var(--blue);
  clip-path: polygon(50% 0%, 61% 6%, 73% 3%, 80% 13%, 92% 15%, 93% 27%, 100% 36%, 95% 47%, 100% 58%, 93% 67%, 92% 79%, 80% 81%, 73% 91%, 61% 88%, 50% 94%, 39% 88%, 27% 91%, 20% 81%, 8% 79%, 7% 67%, 0% 58%, 5% 47%, 0% 36%, 7% 27%, 8% 15%, 20% 13%, 27% 3%, 39% 6%);
}
.vcheck.lg { width: 26px; height: 26px; font-size: .8rem; }

/* ---------- Vendor cards ---------- */
.vendor-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px; position: relative; overflow: hidden;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.vendor-card:hover {
  border-color: rgba(18, 183, 106, .4); transform: translateY(-4px);
  box-shadow: 0 20px 46px rgba(0, 0, 0, .5), 0 0 0 1px rgba(18, 183, 106, .12);
}
.vc-status {
  position: absolute; top: 18px; right: 18px;
  font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  padding: 4px 11px; border-radius: 100px;
  background: rgba(29, 155, 240, .12); color: #6cc0ff; border: 1px solid rgba(29, 155, 240, .3);
}
.vc-top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.vc-avatar {
  width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
  background: linear-gradient(135deg, #17231d, #0e1512);
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: var(--green);
}
.vc-name { font-family: var(--display); font-weight: 700; font-size: 1.08rem; display: flex; align-items: center; gap: 7px; }
.vc-sub { color: var(--muted); font-size: .78rem; margin-top: 2px; }
.vc-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 14px 0; }
.vc-meta > div { background: var(--panel); padding: 10px 14px; }
.vc-meta .k { display: block; color: var(--muted); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
.vc-meta .v { font-weight: 600; font-size: .88rem; }
.vc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.stars { color: var(--gold); letter-spacing: 1.5px; }
.rating-line { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rating-line .score { font-weight: 800; font-family: var(--display); }
.rating-line .count { color: var(--muted); font-size: .8rem; }
.pay-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 14px; }
.pay-chip { font-size: .68rem; font-weight: 600; padding: 3px 10px; border-radius: 100px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--muted); }

/* Vendor of the Month — skeleton + empty state */
.votm-skeleton {
  align-items: center;
  gap: 18px;
  position: relative;
  overflow: hidden;
}
.votm-skeleton::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.05) 45%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.05) 55%, transparent 80%);
  transform: translateX(-100%);
  animation: votmShimmer 1.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes votmShimmer { to { transform: translateX(100%); } }
.votm-skel-avatar { width: 84px; height: 84px; border-radius: 50%; background: rgba(255,255,255,.06); flex-shrink: 0; }
.votm-skel-body { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 10px; }
.votm-skel-name { width: 60%; height: 20px; background: rgba(255,255,255,.06); border-radius: 6px; }
.votm-skel-meta { width: 45%; height: 12px; background: rgba(255,255,255,.06); border-radius: 6px; }
.votm-skel-badge { width: 100px; height: 26px; background: rgba(255,255,255,.06); border-radius: 999px; }
.votm-skel-btn { width: 130px; height: 40px; background: rgba(255,255,255,.06); border-radius: 10px; flex-shrink: 0; }

.votm-empty { justify-content: center; gap: 24px; padding: 26px; }
.votm-empty h3 { font-family: 'Archivo', var(--display, sans-serif); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce) {
  .votm-skeleton::after { animation: none; opacity: .4; }
}
/* Vendor of the Month — skeleton + empty state */
.votm-skeleton {
  align-items: center;
  gap: 18px;
  position: relative;
  overflow: hidden;
}
.votm-skeleton::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.05) 45%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.05) 55%, transparent 80%);
  transform: translateX(-100%);
  animation: votmShimmer 1.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes votmShimmer { to { transform: translateX(100%); } }
.votm-skel-avatar { width: 84px; height: 84px; border-radius: 50%; background: rgba(255,255,255,.06); flex-shrink: 0; }
.votm-skel-body { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 10px; }
.votm-skel-name { width: 60%; height: 20px; background: rgba(255,255,255,.06); border-radius: 6px; }
.votm-skel-meta { width: 45%; height: 12px; background: rgba(255,255,255,.06); border-radius: 6px; }
.votm-skel-badge { width: 100px; height: 26px; background: rgba(255,255,255,.06); border-radius: 999px; }
.votm-skel-btn { width: 130px; height: 40px; background: rgba(255,255,255,.06); border-radius: 10px; flex-shrink: 0; }

.votm-empty { justify-content: center; gap: 24px; padding: 26px; }
.votm-empty h3 { font-family: 'Archivo', var(--display, sans-serif); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce) {
  .votm-skeleton::after { animation: none; opacity: .4; }
}

/* Recent Reviews skeleton + empty state */
.review-skeleton {
  position: relative;
  overflow: hidden;
  padding: 16px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.review-skeleton::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.05) 45%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.05) 55%, transparent 80%);
  transform: translateX(-100%);
  animation: votmShimmer 1.4s ease-in-out infinite;
  pointer-events: none;
}
.rv-skel-stars { width: 80px; height: 14px; background: rgba(255,255,255,.06); border-radius: 4px; }
.rv-skel-line { height: 10px; background: rgba(255,255,255,.06); border-radius: 4px; }
.rv-skel-line.l1 { width: 90%; }
.rv-skel-line.l2 { width: 70%; }
.rv-skel-who { width: 60%; height: 10px; background: rgba(255,255,255,.06); border-radius: 4px; margin-top: auto; }

.reviews-empty { text-align: center; padding: 30px 20px; color: var(--muted); }
.reviews-empty span { font-size: 1.6rem; display: block; margin-bottom: 8px; }
.reviews-empty p { font-size: .88rem; max-width: 260px; margin: 0 auto; }



/* ---------- Leadership ---------- */
.lead-card { text-align: center; padding: 38px 26px; position: relative; overflow: hidden; }
.lead-card::before {
  content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--green), transparent); opacity: .7;
}
.lead-avatar {
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 18px;
  background: linear-gradient(135deg, #16281e, #0c120f);
  border: 1px solid rgba(18, 183, 106, .35); box-shadow: 0 0 0 6px rgba(18,183,106,.05), var(--shadow-sm);
  display: grid; place-items: center; font-size: 1.9rem;
}
.lead-role { color: var(--green); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; }

/* ---------- Search ---------- */
.big-search {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: 16px; padding: 6px 8px 6px 20px;
  max-width: 640px; margin: 0 auto 40px;
  transition: border-color .2s, box-shadow .2s;
}
.big-search:focus-within { border-color: rgba(18, 183, 106, .5); box-shadow: 0 0 0 4px rgba(18, 183, 106, .1); }
.big-search .mag { color: var(--muted); font-size: 1.05rem; }
.big-search input { flex: 1; background: none; border: none; color: var(--text); font-size: 1rem; padding: 12px 0; outline: none; font-family: var(--font); }
.big-search input::placeholder { color: #5b625f; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: 38px; }
.tab-btn {
  display: inline-flex; align-items: center; min-height: 44px;
  background: transparent; border: 1px solid var(--line);
  color: var(--muted); padding: 9px 18px; border-radius: 100px;
  font-family: var(--font); font-size: .85rem; font-weight: 600; cursor: pointer; transition: all .2s;
}
.tab-btn:hover { color: var(--text); border-color: var(--line-strong); }
.tab-panel { display: none; } .tab-panel.active { display: block; }

/* ---------- Modal (vendor profile popup) ---------- */
.modal-back {
  display: none; position: fixed; inset: 0; z-index: 300;
  background: rgba(4, 5, 5, .8); backdrop-filter: blur(8px);
  overflow-y: auto; padding: 4vh 4% 6vh;
}
.modal-back.open { display: flex; justify-content: center; align-items: flex-start; animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; } }
.modal {
  background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: 22px; max-width: 680px; width: 100%; margin: 0 auto;
  padding: 34px; position: relative; box-shadow: var(--shadow-lg);
  animation: slideUp .28s cubic-bezier(.16, 1, .3, 1);
}
@keyframes slideUp { from { transform: translateY(26px); opacity: 0; } }
.modal-close {
  /* Fixed to the viewport, not the card, so it stays reachable no matter
     how far you've scrolled into a long profile — it used to scroll away
     with the content, leaving no way to close on mobile without hunting
     for the sliver of backdrop still visible. */
  position: fixed; top: 18px; right: 18px; z-index: 310;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(20, 22, 20, .85); border: 1px solid var(--line);
  color: var(--muted); font-size: 1rem; cursor: pointer;
}
.modal-close:hover { color: var(--text); background: rgba(255, 255, 255, .1); }

/* ---------- Tags / status ---------- */
.tag { display: inline-block; padding: 4px 12px; border-radius: 100px; font-size: .72rem; font-weight: 700; }
.tag-green { background: var(--green-soft); color: #4fdc9c; border: 1px solid rgba(18, 183, 106, .3); }
.tag-blue { background: rgba(29, 155, 240, .1); color: #6cc0ff; border: 1px solid rgba(29, 155, 240, .3); }
.tag-gold { background: rgba(245, 179, 1, .1); color: #ffcf4d; border: 1px solid rgba(245, 179, 1, .3); }
.tag-red { background: rgba(240, 68, 56, .1); color: #ff8d84; border: 1px solid rgba(240, 68, 56, .3); }
.tag-teal { background: rgba(0, 200, 200, .1); color: #6fe3e3; border: 1px solid rgba(0, 200, 200, .35); }

/* ---------- Forms ---------- */
.form-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 34px; max-width: 640px; margin: 0 auto; box-shadow: var(--shadow-sm); }
/* Form + sticky reassurance sidebar, side by side — used by multi-step
   wizards so the page isn't just one long centered column. */
.wizard-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 24px; align-items: start; max-width: 980px; margin: 0 auto; }
.wizard-layout .form-card { max-width: none; margin: 0; }
.wizard-side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 14px; }
.wizard-side-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow-sm); }
.wizard-side-card h4 { font-size: .85rem; margin-bottom: 10px; }
.wizard-side-card p, .wizard-side-card li { color: var(--muted); font-size: .82rem; line-height: 1.6; }
.wizard-side-card ul { padding-left: 18px; }
@media (max-width: 900px) { .wizard-layout { grid-template-columns: 1fr; } .wizard-side { position: static; } }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 8px; color: #cfd6d2; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 13px 15px; color: var(--text);
  font-family: var(--font); font-size: .94rem; transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: rgba(18, 183, 106, .55); outline: none; box-shadow: 0 0 0 4px rgba(18, 183, 106, .1);
}
.field .hint { color: var(--muted); font-size: .76rem; margin-top: 6px; }
.form-msg { display: none; padding: 12px 16px; border-radius: 12px; font-size: .87rem; margin-bottom: 16px; }
.form-msg.ok { display: block; background: var(--green-soft); color: #4fdc9c; }
.form-msg.err { display: block; background: rgba(240, 68, 56, .1); color: #ff8d84; }
.form-msg.info { display: block; background: rgba(29, 155, 240, .1); color: #7dc6f5; }

/* Wizard */
.wizard-progress { display: flex; gap: 6px; margin-bottom: 30px; }
.wizard-progress .seg { flex: 1; height: 4px; border-radius: 100px; background: rgba(255, 255, 255, .08); transition: background .3s; }
.wizard-progress .seg.done { background: var(--green); }
.wizard-step { display: none; } .wizard-step.active { display: block; animation: fadeIn .25s; }
.wizard-nav { display: flex; gap: 10px; margin-top: 24px; }
.step-label { color: var(--muted); font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; background: var(--card); font-size: .88rem; }
th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
th { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255, 255, 255, .015); }

/* Below 640px a 3-column table (Name/Violation/Status) can't fit a phone
   screen without either shrinking to unreadable text or overflowing —
   so each row becomes its own stacked card instead, with the column
   name shown as a label in front of the value (data-label attr on td). */
@media (max-width: 640px) {
  .table-wrap { border: none; }
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; }
  .table-wrap thead { display: none; }
  .table-wrap tr { border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 12px; padding: 4px 14px; background: var(--card); }
  .table-wrap tr:last-child { margin-bottom: 0; }
  .table-wrap td {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    text-align: right; padding: 10px 0; border-bottom: 1px solid var(--line);
  }
  .table-wrap td:last-child { border-bottom: none; }
  .table-wrap td::before {
    content: attr(data-label); flex-shrink: 0; text-align: left;
    font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700;
  }
}

/* ---------- Reviews ---------- */
.review-item { border-bottom: 1px solid var(--line); padding: 16px 0; overflow-wrap: anywhere; }
.review-item:last-child { border-bottom: none; }
.review-item a { overflow-wrap: anywhere; }
.rv-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 5px; }
.rv-name { font-weight: 700; font-size: .92rem; overflow-wrap: anywhere; }
.rv-date { color: var(--muted); font-size: .74rem; }
.review-item p { color: #c4cbc7; font-size: .9rem; }
.review-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: .82rem; color: var(--muted); }
.review-bar .track { flex: 1; height: 6px; background: rgba(255, 255, 255, .07); border-radius: 100px; overflow: hidden; }
.review-bar .fill { height: 100%; background: var(--gold); border-radius: 100px; }
.star-picker { display: flex; gap: 5px; font-size: 1.7rem; cursor: pointer; user-select: none; }
.star-picker span { color: #2c322f; transition: color .15s, transform .15s; }
.star-picker span.lit { color: var(--gold); }
.star-picker span:hover { transform: scale(1.12); }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 800px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 10px; overflow: hidden; box-shadow: var(--shadow-sm); }
.faq-grid .faq-item { margin-bottom: 0; }
.faq-q { width: 100%; background: none; border: none; color: var(--text); font-family: var(--display); font-weight: 600; font-size: .96rem; padding: 20px 24px; text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.faq-a { display: none; padding: 0 24px 20px; color: var(--muted); font-size: .92rem; }
.faq-item.open .faq-a { display: block; }
.faq-q span:last-child { color: var(--green); font-size: 1.2rem; transition: transform .2s; }
.faq-item.open .faq-q span:last-child { transform: rotate(45deg); }


/* ---------- Page hero ---------- */
.page-hero { padding: 76px 0 40px; text-align: center; position: relative; overflow: hidden; }
.page-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(620px 340px at 50% -10%, rgba(18, 183, 106, .14), transparent 65%);
}
.page-hero > * { position: relative; z-index: 1; }
.enf-page .page-hero::before { background: radial-gradient(620px 340px at 50% -10%, rgba(240, 68, 56, .14), transparent 65%); }
.page-hero h1 { font-size: clamp(1.9rem, 4.2vw, 2.8rem); margin-bottom: 12px; letter-spacing: -.02em; }
.page-hero p { color: var(--muted); max-width: 560px; margin: 0 auto; font-size: 1.02rem; }

/* ---------- Prose ---------- */
.prose { max-width: 740px; margin: 0 auto; }
.prose h2 { font-size: 1.25rem; margin: 36px 0 12px; }
.prose p, .prose li { color: #b9c1bd; font-size: .95rem; margin-bottom: 12px; }
.prose ul { padding-left: 22px; }

/* ---------- Dash ---------- */
.dash-layout { display: grid; grid-template-columns: 250px 1fr; gap: 26px; padding: 44px 0; }
.dash-side {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 14px; height: fit-content; box-shadow: var(--shadow-sm); position: sticky; top: 88px;
}
.dash-side a {
  display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 11px 14px;
  border-radius: 10px; font-size: .89rem; font-weight: 600; margin-bottom: 4px; position: relative;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.dash-side a.active, .dash-side a:hover { background: var(--green-soft); color: #4fdc9c; }
.dash-side a.active::before {
  content: ''; position: absolute; left: -14px; top: 20%; bottom: 20%; width: 3px;
  background: var(--green); border-radius: 0 3px 3px 0;
}
.nav-badge { margin-left: auto; background: var(--red); color: #fff; font-size: .68rem; font-weight: 800; padding: 2px 7px; border-radius: 100px; line-height: 1.4; box-shadow: 0 2px 6px rgba(240,68,56,.4); }

/* ---------- Off-canvas drawer nav (admin.html / dashboard.html on
   mobile) — the sidebar used to just stack above the content, eating the
   whole screen before you reached anything. Below 900px it becomes a
   slide-in/out drawer instead; injected + wired up by js/nav.js. Desktop
   layout above 900px is untouched (static column, no drawer). ---------- */
.dash-drawer-bar { display: none; }
.dash-drawer-backdrop {
  display: none; position: fixed; inset: 0; z-index: 240;
  background: rgba(4, 5, 5, .75); backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  /* Prevent touch-scroll from leaking through to the page behind */
  touch-action: none;
  overscroll-behavior: contain;
}
.dash-drawer-backdrop.open { animation: fadeIn .2s ease; }
@media (max-width: 900px) {
  .dash-drawer-bar {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
    padding: 12px 16px; margin-bottom: 16px;
  }
  .dash-drawer-toggle {
    background: none; border: none; color: var(--text); font-weight: 700;
    font-size: .92rem; display: flex; align-items: center; gap: 8px; cursor: pointer;
  }
  .dash-drawer-toggle .bars { font-size: 1.1rem; color: var(--green); }
  .dash-side {
    position: fixed; top: 65px; left: 0; bottom: 0; z-index: 250;
    width: 82%; max-width: 300px; max-height: 100dvh; border-radius: 0;
    transform: translateX(-105%); transition: transform .25s cubic-bezier(.16,1,.3,1);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    box-shadow: 0 0 40px rgba(0,0,0,.5);
  }
  .dash-side.open { transform: translateX(0); }
  .dash-drawer-close { display: flex !important; }
}
.dash-drawer-close {
  display: none; width: 100%; justify-content: flex-end !important;
  align-items: center; gap: 6px;
  color: var(--muted); background: none; border: none;
  font-size: .85rem; font-weight: 600;
  padding: 12px 14px 16px; cursor: pointer;
  border-bottom: 1px solid var(--line, rgba(255,255,255,.08));
  margin-bottom: 8px;
  transition: color .15s;
}
.dash-drawer-close:hover { color: var(--text, #e6e9e7); }
/* WhatsApp-style bubbles: capped width + side alignment (own messages
   right/green, theirs left/neutral) so a chat-body full of messages reads
   as a conversation instead of a stack of full-width bars running edge
   to edge on narrow screens. */
.chat-msg {
  max-width: 78%; align-self: flex-start;
  padding: 8px 12px; border-radius: 14px 14px 14px 4px;
  background: var(--panel); border: 1px solid var(--line); margin-bottom: 8px;
  overflow-wrap: anywhere; word-break: break-word;
}
.chat-msg .chat-meta { font-size: .68rem; color: var(--muted); margin-bottom: 3px; }
.chat-msg.mine { align-self: flex-end; background: var(--green-soft); border-color: rgba(18,183,106,.3); border-radius: 14px 14px 4px 14px; }

/* ---------- Chat window shell — shared by admin.html (Messages),
   dashboard.html (Message the Team), and the public site-chat widget
   (js/main.js openSiteChat) ---------- */
.chat-window { border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; background: var(--panel); }
.chat-header { padding: 12px 16px; border-bottom: 1px solid var(--line-strong); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chat-header img { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.chat-header > div { flex: 1; min-width: 0; }
.chat-header-title, .chat-header-status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-header-title { font-weight: 700; color: var(--text); font-size: .92rem; }
.chat-header-status { font-size: .75rem; color: var(--muted); }
.chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column-reverse; }
.chat-footer { padding: 12px 16px; border-top: 1px solid var(--line-strong); display: flex; gap: 8px; align-items: center; }

/* Admin "Messages" panel — thread list + open thread side by side on
   desktop/tablet, stacked on phones (a 220-280px list column next to a
   1fr thread column simply doesn't fit inside a ~360px viewport, which
   was pushing the whole panel off-screen horizontally). */
.admin-chat-grid { display: grid; grid-template-columns: minmax(220px, 280px) 1fr; gap: 16px; }
.admin-chat-list { max-height: 500px; }
.admin-chat-window { height: 500px; }
@media (max-width: 700px) {
  .admin-chat-grid { grid-template-columns: 1fr; }
  .admin-chat-list { max-height: 220px; }
  .admin-chat-window { height: 62vh; }
}
.chat-footer input { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 10px; padding: 11px 13px; color: var(--text); font-size: .9rem; }
.chat-img-btn { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--muted); font-size: 1.05rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chat-img-btn:hover { color: var(--text); border-color: var(--green); }
.chat-msg img { max-width: 100%; border-radius: 8px; margin-top: 6px; cursor: pointer; display: block; }
.chat-closed-banner { text-align: center; color: var(--muted); font-size: .78rem; padding: 8px 12px; background: var(--bg); border-top: 1px solid var(--line-strong); }

/* ---------- Site-chat corner widget (public support chat, js/main.js
   openSiteChat) — anchored bottom-right like a normal support-chat bubble
   instead of a full-page modal, so the rest of the page stays usable while
   it's open. ---------- */
.site-chat-panel {
  display: none; position: fixed; right: 18px; bottom: 18px; z-index: 400;
  width: 360px; max-width: calc(100vw - 24px);
  height: 74vh; max-height: 560px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .5);
  animation: slideUp .25s cubic-bezier(.16, 1, .3, 1);
}
.site-chat-panel.open { display: flex; }
.site-chat-panel .chat-window { width: 100%; height: 100%; border-radius: 16px; }
.site-chat-panel .chat-header { position: relative; }
.site-chat-close-x { position: absolute; top: 10px; right: 12px; background: none; border: none; color: var(--muted); font-size: 1rem; cursor: pointer; padding: 4px; }
.site-chat-close-x:hover { color: var(--text); }
@media (max-width: 640px) {
  .site-chat-panel { right: 0; bottom: 0; left: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; }
  .site-chat-panel .chat-window { border-radius: 0; }
}

/* ---------- News feed (Facebook-style post cards) ---------- */
.fb-feed { max-width: 600px; margin: 0 auto; }
.fb-post { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin-bottom: 16px; }
.fb-post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.fb-post-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.fb-post-name { font-weight: 700; font-size: .92rem; display: flex; align-items: center; gap: 5px; }
.fb-post-time { font-size: .76rem; color: var(--muted); }
.fb-post-body h3 { font-size: 1.05rem; margin-bottom: 6px; }
.fb-post-body p { color: #dfe3e1; font-size: .93rem; line-height: 1.55; white-space: pre-wrap; }
.fb-post-img { width: 100%; max-height: 420px; object-fit: cover; border-radius: 10px; margin-top: 12px; }
.fb-post-stats { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: .8rem; padding: 10px 0; margin-top: 4px; border-bottom: 1px solid var(--line); }
.fb-post-stats .likes { display: flex; align-items: center; gap: 5px; }
.fb-post-stats .like-dot { width: 17px; height: 17px; border-radius: 50%; background: var(--blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .62rem; }
.fb-post-actions { display: flex; padding-top: 4px; }
.fb-action {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  background: none; border: none; cursor: pointer; padding: 9px 0; border-radius: 8px;
  color: var(--muted); font-size: .85rem; font-weight: 600; font-family: var(--font); transition: background .15s, color .15s;
}
.fb-action:hover { background: rgba(255,255,255,.05); color: var(--text); }
.fb-action.liked { color: var(--blue); }

/* ---------- Floating "Ask AI" button + assistant widget ---------- */
.ai-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--green), var(--blue)); color: #04130c;
  font-size: 1.5rem; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(18,183,106,.35); transition: transform .18s ease;
}
.ai-fab:hover { transform: translateY(-2px) scale(1.04); }
@media (max-width: 640px) { .ai-fab { right: 14px; bottom: 14px; width: 50px; height: 50px; font-size: 1.3rem; } }

.ai-msg { padding: 10px 13px; border-radius: 12px; margin-bottom: 8px; font-size: .87rem; line-height: 1.5; max-width: 85%; }
.ai-msg.user { background: var(--green-soft); color: #d7f5e6; margin-left: auto; }
.ai-msg.bot { background: var(--panel); border: 1px solid var(--line); color: #dfe3e1; }
.ai-msg.bot.pending { color: var(--muted); font-style: italic; }
.dash-main { min-width: 0; }

.dash-who {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 10px 18px; margin-bottom: -15px;
  border-bottom: 1px solid var(--line);
}
.dash-who-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
  background: var(--green-soft); color: #4fdc9c;
  display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  border: 1px solid rgba(18, 183, 106, .3);
}
.dash-who-name {
  font-weight: 700; font-size: .88rem; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; margin-bottom: 4px;
}
.action-row { display: flex; gap: 6px; flex-wrap: wrap; }
.mini-btn { padding: 6px 12px; border-radius: 8px; border: none; cursor: pointer; font-size: .76rem; font-weight: 600; font-family: var(--font); }
.mini-green { background: var(--green-soft); color: #4fdc9c; }
.mini-blue { background: rgba(29, 155, 240, .12); color: #6cc0ff; }
.mini-gold { background: rgba(245, 179, 1, .12); color: #ffcf4d; }
.mini-red { background: rgba(240, 68, 56, .12); color: #ff8d84; }

/* Role chips */
.role-chip { font-size: .68rem; font-weight: 800; padding: 4px 11px; border-radius: 100px; letter-spacing: .06em; display: inline-block; }
.role-founder { background: rgba(245, 179, 1, .14); border: 1px solid rgba(245, 179, 1, .45); color: #ffcf4d; }
.role-cofounder { background: rgba(255, 122, 0, .12); border: 1px solid rgba(255, 122, 0, .4); color: #ffab66; }
.role-director { background: rgba(160, 90, 255, .12); border: 1px solid rgba(160, 90, 255, .4); color: #c9a3ff; }
.role-officer { background: rgba(29, 155, 240, .12); border: 1px solid rgba(29, 155, 240, .4); color: #6cc0ff; }
.role-support { background: rgba(0, 200, 200, .1); border: 1px solid rgba(0, 200, 200, .35); color: #6fe3e3; }
.role-vendor { background: var(--green-soft); border: 1px solid rgba(18, 183, 106, .4); color: #4fdc9c; }

/* ---------- Footer (single, simple) ---------- */
footer { border-top: 1px solid var(--line); padding: 36px 0; margin-top: 70px; }
.foot-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-links a { color: var(--muted); font-size: .84rem; }
.foot-links a:hover { color: var(--text); }
.foot-note { color: #626a66; font-size: .78rem; width: 100%; margin-top: 18px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* ---------- Reveal ---------- */
/* Reveal animations removed — they were causing layout bugs. Everything
   is visible immediately. The .reveal class and initReveal() still exist
   in main.js but are now CSS no-ops. */
.reveal { opacity: 1; transform: none; transition: none; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) { .dash-layout { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .section { padding: 60px 0; }
  .hero { padding: 70px 0 60px; }
  .modal { padding: 26px 20px; }
}

/* ============ V6 — SHOP ============ */
.product-card {
  position: relative;
  background: linear-gradient(175deg, rgba(255,255,255,.04), rgba(255,255,255,.01) 45%), var(--card);
  border: 1px solid var(--line);
  border-radius: 16px; padding: 22px 18px 18px;
  text-align: center;
  transition: transform .18s, border-color .18s, box-shadow .18s;
  display: flex; flex-direction: column; gap: 8px;
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(18,183,106,.4);
  box-shadow: 0 16px 40px rgba(0,0,0,.4), 0 0 24px rgba(18,183,106,.12);
}
.p-tag {
  position: absolute; top: 12px; right: 12px;
  font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(135deg, var(--gold), #ff9d00);
  color: #211500; padding: 3px 9px; border-radius: 100px;
}
.p-icon {
  width: 66px; height: 66px; margin: 0 auto;
  display: grid; place-items: center; font-size: 1.9rem;
  background: radial-gradient(circle at 35% 30%, rgba(18,183,106,.28), rgba(18,183,106,.05));
  border: 1px solid rgba(18,183,106,.25); border-radius: 18px;
}
.p-name { font-family: var(--display); font-weight: 700; font-size: .98rem; }
.p-vendor {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: .78rem; font-family: var(--body);
  display: inline-flex; align-items: center; gap: 5px; justify-content: center;
}
.p-vendor:hover { color: var(--blue); }
.p-price { font-family: var(--display); font-weight: 800; font-size: 1.25rem; color: var(--green); }

.cat-chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 30px; }
.cat-chip {
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--card); border: 1px solid var(--line); color: var(--muted);
  padding: 10px 20px; border-radius: 100px; cursor: pointer;
  font-family: var(--body); font-size: .88rem; font-weight: 600;
  transition: all .18s;
}
.cat-chip.active, .cat-chip:hover { border-color: rgba(18,183,106,.5); color: #fff; background: rgba(18,183,106,.1); }

.grid-4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 16px; }

/* Shop promo banner */
.promo {
  border-radius: 20px; padding: 40px 30px; margin-bottom: 40px;
  background:
    radial-gradient(500px 200px at 90% 10%, rgba(18,183,106,.25), transparent 60%),
    radial-gradient(400px 200px at 10% 90%, rgba(29,155,240,.15), transparent 60%),
    linear-gradient(160deg, #0d130e, #0a0d0a);
  border: 1px solid rgba(18,183,106,.25);
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.promo h2 { font-size: clamp(1.3rem, 3vw, 1.9rem); margin-bottom: 8px; }
.promo p { color: var(--muted); font-size: .92rem; }


/* ============ V6 — MOBILE FIT, COMPACT CARDS, FOOTER ============ */

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    z-index: 200;
    background: rgba(7, 9, 7, .98); backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line); box-shadow: 0 20px 40px rgba(0, 0, 0, .6);
    flex-direction: column; gap: 4px; align-items: stretch;
    padding: 10px 5% 18px; max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 16px; font-size: .96rem; border-radius: 12px; }
  .nav-cta { margin: 10px 0 0; justify-content: center; }
  .nav-logo .sub { display: none; }
  .nav-acct { margin: 10px 0 0; padding: 12px 0 0; border-left: none; border-top: 1px solid var(--line); justify-content: space-between; }
  .nav-acct-name, .nav-acct-out { flex: 1; justify-content: center; }
}

/* ---------- Mobile bottom tab bar (app-style primary nav) ---------- */
.mobile-tabbar { display: none; }
/* Dashboard and admin pages already have the sidebar drawer for navigation,
   so hide the bottom tab bar AND remove its body padding on those pages —
   three navigation elements on mobile is too many. */
body.dashboard-v2 .mobile-tabbar,
body.admin-v2 .mobile-tabbar { display: none !important; }
body.dashboard-v2 { padding-bottom: 0 !important; }
body.admin-v2 { padding-bottom: 0 !important; }
@media (max-width: 640px) {
  body { padding-bottom: 62px; } /* keeps page content clear of the fixed tab bar */
  .mobile-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    background: rgba(7, 8, 8, .94); backdrop-filter: blur(20px) saturate(1.4);
    border-top: 1px solid var(--line); padding: 6px 2px calc(6px + env(safe-area-inset-bottom));
  }
  .mobile-tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 5px 2px; color: var(--muted); font-size: .62rem; font-weight: 600;
    text-decoration: none; border-radius: 10px; transition: color .15s, background .15s;
  }
  .mobile-tabbar a .mt-icon { font-size: 1.15rem; line-height: 1; }
  .mobile-tabbar a:hover, .mobile-tabbar a.active { color: #7fe0af; background: var(--green-soft); }
  .ai-fab { bottom: 76px; } /* clear of the tab bar */
}

/* --- Compact vendor cards (details live in the popup) --- */
.vendor-card { padding: 18px; }
.vendor-card .vc-avatar { width: 46px; height: 46px; font-size: 1.1rem; }
.vendor-card .vc-name { font-size: .98rem; }
.vendor-card .vc-sub { font-size: .74rem; }
.vendor-card .vc-actions { margin-top: 12px; }
.vendor-card .vc-actions .btn { padding: 9px 14px; font-size: .8rem; flex: 1; justify-content: center; }

/* --- Global mobile scale-down --- */
@media (max-width: 640px) {
  html { font-size: 15px; }
  .container { width: 94%; }
  .section { padding: 44px 0; }
  .hero { padding: 44px 0 50px; }
  .hero img.crest { width: 130px !important; }
  .hero h1 { font-size: clamp(1.7rem, 8vw, 2.3rem); }
  .hero p.lede { font-size: .95rem; margin-bottom: 24px; }
  .hero-actions .btn { padding: 12px 18px; font-size: .88rem; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 18px 14px; }
  .stat .num { font-size: 1.7rem; }
  .stat .label { font-size: .7rem; }
  .card { padding: 20px; }
  .section-head h2 { font-size: 1.4rem; }
  /* .grid-2's 330px-per-column minimum doesn't fit inside a phone-width
     form-card (padding included), which was pushing fields like Name /
     Violation Type off the right edge of the screen — stack to 1 column. */
  .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 14px; }
  .modal { padding: 22px 18px; border-radius: 18px 18px 0 0; }
  .btn { padding: 12px 20px; font-size: .88rem; min-height: 44px; box-sizing: border-box; }
  .btn-sm { min-height: 44px; box-sizing: border-box; }
  /* .vendor-card .vc-actions .btn (3-class selector, defined outside this
     query) outranks the general .btn override above regardless of media
     query — match its specificity here so card buttons still hit the 44px
     touch-target minimum on phones. */
  .vendor-card .vc-actions .btn { min-height: 44px; padding: 12px 14px; box-sizing: border-box; }
  .big-search input { padding: 15px 15px 15px 46px; font-size: .95rem; }
  .lead-avatar { width: 60px; height: 60px; font-size: 1.6rem; }
  .tabs { gap: 6px; }
  .tab-btn { padding: 8px 14px; font-size: .78rem; }

  /* Admin panel / dashboard — same 900px stacked layout, but the inner
     cards, tables and forms were never actually tuned for a phone screen. */
  .dash-layout { padding: 20px 0; gap: 14px; }
  .dash-side { padding: 12px 10px; }
  .dash-side a { padding: 11px 12px; font-size: .85rem; }
  .form-card { padding: 20px 16px; }
  th, td { padding: 10px 12px; font-size: .82rem; }
  .action-row { gap: 6px; }
  .mini-btn { padding: 6px 9px; font-size: .7rem; }
  #editBox { padding: 16px 4%; }
  #editBox .form-card { max-width: none; }
}

/* Modal slides from bottom on mobile (app feel) */
@media (max-width: 640px) {
  .modal-back { align-items: flex-end; padding: 0; }
  .modal { max-height: 92vh; width: 100%; max-width: none; }
}

/* --- Slimmer footer --- */
footer { padding: 26px 0 22px; margin-top: 40px; }
.foot-inner { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: center; }
.foot-links a { color: var(--muted); font-size: .8rem; }
.foot-links a:hover { color: var(--green); }
.foot-note { display: flex; flex-direction: column; gap: 2px; color: #5c655f; font-size: .72rem; }

/* --- Quick verify widget --- */
.verify-box {
  max-width: 560px; margin: 0 auto;
  background: linear-gradient(170deg, rgba(18,183,106,.07), var(--card) 55%);
  border: 1px solid rgba(18,183,106,.25); border-radius: 18px; padding: 26px;
}
.verify-result { margin-top: 14px; border-radius: 12px; padding: 14px 16px; font-size: .9rem; display: none; }
.verify-result.ok { display: block; background: rgba(18,183,106,.1); border: 1px solid rgba(18,183,106,.35); color: #8fdcb5; }
.verify-result.bad { display: block; background: rgba(255,77,106,.08); border: 1px solid rgba(255,77,106,.35); color: #ff98aa; }
.verify-result.warn { display: block; background: rgba(255,193,7,.08); border: 1px solid rgba(255,193,7,.3); color: #ffd75e; }

/* Helpful votes */
.helpful-btn {
  background: none; border: 1px solid var(--line); color: var(--muted);
  font-size: .72rem; padding: 4px 10px; border-radius: 100px; cursor: pointer;
}
.helpful-btn:hover { border-color: var(--green); color: var(--green); }
.helpful-btn.voted { border-color: var(--green); color: var(--green); background: var(--green-soft); }
.helpful-btn:disabled { opacity: .55; cursor: default; }
.helpful-btn:disabled:hover { border-color: var(--line); color: var(--muted); }

/* Password field show/hide toggle */
.pw-field { position: relative; }
.pw-field input { padding-right: 44px; }
.pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: .8rem; padding: 8px 10px;
}
.pw-toggle:hover { color: var(--text); }

/* ============ V12 — Contact page redesign ============ */
.contact-cards-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px; margin-bottom: 30px;
}
.contact-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px; text-align: center; cursor: pointer;
  transition: border-color .2s, transform .2s;
}
.contact-card:hover { transform: translateY(-2px); }
.contact-card .icon {
  width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 16px;
  display: grid; place-items: center; font-size: 1.8rem;
}
.contact-card h3 { font-size: 1.1rem; margin-bottom: 6px; }
.contact-card p { color: var(--muted); font-size: .85rem; }

.contact-card.red .icon { background: rgba(240,68,56,.1); border-color: rgba(240,68,56,.3); color: #ff8d84; }
.contact-card.red:hover { border-color: rgba(240,68,56,.45); }
.contact-card.green .icon { background: var(--green-soft); border-color: rgba(18,183,106,.3); color: #4fdc9c; }
.contact-card.green:hover { border-color: rgba(18,183,106,.45); }
.contact-card.gold .icon { background: rgba(245,179,1,.1); border-color: rgba(245,179,1,.3); color: #ffcf4d; }
.contact-card.gold:hover { border-color: rgba(245,179,1,.45); }
.contact-card.blue .icon { background: rgba(29,155,240,.1); border-color: rgba(29,155,240,.3); color: #6cc0ff; }
.contact-card.blue:hover { border-color: rgba(29,155,240,.45); }

.emergency-strip { background: rgba(240,68,56,.1); border: 1px solid rgba(240,68,56,.3); border-radius: 12px; padding: 14px 18px; margin-bottom: 30px; font-size: .9rem; color: #ff8d84; text-align: center; }
.emergency-strip a { color: #ffb3ac; text-decoration: underline; }

.contact-main-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 900px) { .contact-main-grid { grid-template-columns: 1fr; } .contact-sidebar { margin-top: 20px; } }

.ai-feedback { display: flex; gap: 6px; margin-top: 8px; }
.ai-feedback-btn { background: none; border: 1px solid var(--line); color: var(--muted); font-size: .72rem; padding: 4px 8px; border-radius: 100px; cursor: pointer; }
.ai-feedback-btn:hover { border-color: var(--green); color: var(--green); }
.ai-feedback-btn.voted { border-color: var(--green); color: var(--green); background: var(--green-soft); }
.ai-feedback-btn:disabled { opacity: .55; cursor: default; }
.ai-feedback-btn:disabled:hover { border-color: var(--line); color: var(--muted); }

.ai-quick-reply { background: var(--panel); border: 1px solid var(--line); color: var(--muted); }
.ai-quick-reply:hover { background: var(--green-soft); border-color: var(--green); color: var(--green); }

/* Notification badge (dashboard sidebar / review list) */
.notif-badge {
  display: inline-block; min-width: 18px; text-align: center;
  background: var(--red); color: #fff; font-size: .66rem; font-weight: 800;
  border-radius: 100px; padding: 2px 6px; margin-left: 6px;
}
.review-item.is-new { border-left: 2px solid var(--green); padding-left: 12px; }

/* Back to top */
#toTop {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(18,183,106,.9); color: #04160e; border: none;
  font-size: 1.1rem; cursor: pointer; display: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
#toTop.show { display: block; }

/* ============ V10 — CATALOG, TRUST SCORE ============ */

.trust-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .7rem; font-weight: 800; padding: 4px 10px; border-radius: 100px;
  letter-spacing: .04em;
}
.trust-badge.good { background: rgba(18,183,106,.14); color: #6fe0a8; border: 1px solid rgba(18,183,106,.4); }
.trust-badge.mid { background: rgba(255,193,7,.12); color: #ffd75e; border: 1px solid rgba(255,193,7,.35); }
.trust-badge.bad { background: rgba(255,77,106,.12); color: #ff98aa; border: 1px solid rgba(255,77,106,.4); }
.trust-badge.neutral { background: rgba(255,255,255,.05); color: var(--muted); border: 1px solid var(--line); }

/* Catalog grid */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cat-item {
  background: rgba(255,255,255,.02); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
}
.cat-img { position: relative; aspect-ratio: 1; background: #0b0e0b; }
.cat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-noimg { width: 100%; height: 100%; display: grid; place-items: center; font-size: 1.6rem; opacity: .3; }

/* Corner price tag seal */
.price-tag {
  position: absolute; top: 8px; left: 8px;
  background: linear-gradient(135deg, #17e884, #0e9a54);
  color: #04160e; font-weight: 800; font-size: .72rem;
  padding: 4px 10px; border-radius: 7px;
  box-shadow: 0 3px 10px rgba(0,0,0,.4);
}
.price-tag:empty { display: none; }

/* SOLD stamp banner */
.cat-item.sold .cat-img img { filter: grayscale(.9) brightness(.6); }
.sold-stamp {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-18deg);
  border: 3px solid #ff4d6a; color: #ff4d6a;
  font-family: var(--display); font-weight: 800; font-size: 1.1rem;
  letter-spacing: .2em; padding: 4px 16px; border-radius: 6px;
  background: rgba(9,9,9,.55); backdrop-filter: blur(2px);
  text-shadow: 0 0 12px rgba(255,77,106,.5);
}
.cat-body { padding: 10px 12px; }
.cat-title { font-weight: 700; font-size: .82rem; }
.cat-desc { color: var(--muted); font-size: .72rem; margin-top: 2px; }

/* status chips for dashboard/admin lists */
.st-chip { font-size: .66rem; font-weight: 800; padding: 3px 9px; border-radius: 100px; letter-spacing: .06em; }
.st-pending { background: rgba(255,193,7,.14); color: #ffd75e; }
.st-live { background: rgba(18,183,106,.14); color: #6fe0a8; }
.st-sold { background: rgba(255,77,106,.14); color: #ff98aa; }

@media (max-width: 640px) { .cat-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); } }

/* ============ V10 — CATALOG + TRUST SCORE ============ */

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cat-card {
  position: relative; border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; background: #0c0f0c;
}
.cat-img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #131713; }
.cat-body { padding: 10px 12px; }
.cat-title { font-size: .82rem; font-weight: 700; line-height: 1.3; }
.cat-desc { font-size: .72rem; color: var(--muted); margin-top: 3px; }

/* Corner price tag (seal) */
.price-tag {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: linear-gradient(135deg, #12B76A, #0b7a45);
  color: #04160e; font-weight: 800; font-size: .72rem;
  padding: 5px 10px; border-radius: 100px;
  box-shadow: 0 3px 10px rgba(0,0,0,.4);
}

/* SOLD stamp */
.cat-card.sold .cat-img { filter: grayscale(1) brightness(.55); }
.cat-card.sold .price-tag { background: #3a3f3a; color: #cfcfcf; }
.sold-stamp {
  position: absolute; top: 42%; left: 50%; z-index: 3;
  transform: translate(-50%, -50%) rotate(-16deg);
  border: 3px solid #FF4D6A; color: #FF4D6A;
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  letter-spacing: .2em; padding: 4px 16px; border-radius: 6px;
  background: rgba(9,9,9,.55); text-transform: uppercase;
}
.cat-status { font-size: .64rem; font-weight: 700; padding: 3px 8px; border-radius: 100px; }
.cat-status.pending { background: rgba(255,193,7,.12); color: #ffd75e; }
.cat-status.live { background: rgba(18,183,106,.12); color: #7fe0af; }
.cat-status.sold { background: rgba(255,77,106,.12); color: #ff98aa; }

/* Trust score */
.trust-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 100px;
  border: 1px solid;
}
.trust-hi  { color: #7fe0af; border-color: rgba(18,183,106,.4); background: rgba(18,183,106,.07); }
.trust-mid { color: #ffd75e; border-color: rgba(255,193,7,.35); background: rgba(255,193,7,.06); }
.trust-lo  { color: #ff98aa; border-color: rgba(255,77,106,.4); background: rgba(255,77,106,.07); }
.trust-meter { height: 8px; border-radius: 100px; background: #1a1f1a; overflow: hidden; margin-top: 6px; }
.trust-meter .fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, #FF4D6A, #FFC107 45%, #12B76A 75%); }

/* ============ V11 — Vendor profile popup redesign ============ */
.vp-hero {
  position: relative; margin: -34px -34px 24px; padding: 32px 34px 26px;
  background:
    radial-gradient(480px 220px at 12% -15%, rgba(18,183,106,.24), transparent 60%),
    radial-gradient(380px 200px at 92% -20%, rgba(29,155,240,.14), transparent 60%),
    linear-gradient(180deg, #101a13 0%, var(--panel) 92%);
  border-bottom: 1px solid var(--line);
  border-radius: 22px 22px 0 0;
}
.vp-top { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.vp-avatar-wrap img, .vp-avatar-wrap .vc-avatar {
  box-shadow: 0 0 0 3px var(--panel), 0 0 0 4px rgba(18,183,106,.5), 0 14px 30px rgba(0,0,0,.45);
}
.vp-id { min-width: 0; flex: 1; }
.vp-name-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.vp-name-row h2 { font-size: 1.5rem; letter-spacing: -.01em; }
.vp-badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 2px; }
.vp-stats { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 16px; }
.vp-stat .n { font-family: var(--display); font-weight: 800; font-size: 1.2rem; line-height: 1; }
.vp-stat .l { font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin-top: 4px; display: block; }

.vp-section { margin-bottom: 16px; }
.vp-section:last-child { margin-bottom: 0; }
.vp-section-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
@media (max-width: 640px) {
  .vp-section { margin-bottom: 14px; }
  .vp-section-head { margin-bottom: 8px; }
}
.vp-section-head .ico {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  background: var(--green-soft); border: 1px solid rgba(18,183,106,.25);
  display: grid; place-items: center; font-size: .8rem;
}
.vp-section-head h3 { font-size: .92rem; font-weight: 700; }
.vp-box { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.vp-box + .vp-box { margin-top: 12px; }

.vp-actions-row { display: flex; gap: 10px; flex-wrap: wrap; }
.vp-actions-sub { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

@media (max-width: 640px) {
  .vp-hero { margin: -22px -18px 20px; padding: 22px 18px 20px; border-radius: 18px 18px 0 0; }
}

/* ============ V11 — Toast + custom confirm/prompt (replaces alert/confirm/prompt) ============ */
#toastBox {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 500;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none;
  width: 90vw; max-width: 420px;
}
.toast {
  pointer-events: auto; background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 12px 20px; font-size: .87rem; text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.45); opacity: 0; transform: translateY(-10px);
  transition: opacity .25s ease, transform .25s ease; width: 100%;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.ok { border-color: rgba(18,183,106,.4); color: #8fdcb5; }
.toast.err { border-color: rgba(240,68,56,.4); color: #ff98aa; }
.toast.info { border-color: rgba(29,155,240,.4); color: #9fd3ff; }

.cf-back {
  display: none; position: fixed; inset: 0; z-index: 400;
  background: rgba(4,5,5,.75); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 20px;
}
.cf-back.open { display: flex; animation: fadeIn .18s ease; }
.cf-box {
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 18px;
  padding: 26px; max-width: 380px; width: 100%; animation: slideUp .22s cubic-bezier(.16,1,.3,1);
}
.cf-box p { font-size: .92rem; margin-bottom: 18px; color: var(--text); line-height: 1.5; }
.cf-box input {
  width: 100%; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 11px 13px; color: var(--text); margin-bottom: 16px; font-family: var(--font); font-size: .9rem;
}
.cf-actions { display: flex; gap: 10px; }

/* ################################################################
   V2 REDESIGN — merged from home-v2.css + vendors-v2.css
   Homepage rules are scoped to body.home-v2, vendor-directory
   rules to body.vendors-v2; nav skin is site-wide.
   ################################################################ */

/* ============================================================
   N.B.S.V.A — HOMEPAGE V2 ("Trade Safe. Deal Smart. Stay Protected.")
   Loaded AFTER css/style.css. Restyles the homepage to the new
   red/dark design without touching shared components elsewhere.
   Everything is scoped to body.home-v2 so other pages are safe.
   ============================================================ */

body.home-v2 {
  --red2: #E02B2B;             /* primary brand red (mockups) */
  --red-soft: rgba(224, 43, 43, .12);
  --bg: #060606;
  --panel: #0C0C0D;
  --card: #101011;
  --card-raised: #141416;
  background:
    radial-gradient(1000px 500px at 85% -5%, rgba(224,43,43,.07), transparent 60%),
    var(--bg);
}

/* -------- Buttons (new primary = red) -------- */
body.home-v2 .v2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--display); font-weight: 700; font-size: .92rem;
  padding: 13px 24px; border-radius: 12px; border: 1px solid transparent;
  cursor: pointer; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
}
body.home-v2 .v2-btn-red {
  background: linear-gradient(180deg, #f13a3a, var(--red2));
  color: #fff;
  box-shadow: 0 10px 26px -10px rgba(224,43,43,.55), inset 0 1px 0 rgba(255,255,255,.18);
}
body.home-v2 .v2-btn-red:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(224,43,43,.65); }
body.home-v2 .v2-btn-outline {
  background: rgba(255,255,255,.03);
  border-color: var(--line-strong); color: var(--text);
}
body.home-v2 .v2-btn-outline:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.06); }
body.home-v2 .v2-red { color: var(--red2); }

/* ============================================================
   HERO
   ============================================================ */
body.home-v2 .v2-hero {
  position: relative; overflow: hidden;
  padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 6vw, 80px);
  background:
    radial-gradient(700px 420px at 78% 30%, rgba(224,43,43,.14), transparent 65%),
    linear-gradient(180deg, #0a0a0b, var(--bg));
  border-bottom: 1px solid var(--line);
}
body.home-v2 .v2-hero-split {
  display: flex; align-items: center;
  min-height: clamp(380px, 46vw, 540px);
}
body.home-v2 .v2-hero-copy { max-width: 560px; }
body.home-v2 .v2-est-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 700; letter-spacing: .22em; color: var(--muted);
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 14px;
  margin-bottom: 22px; background: rgba(255,255,255,.02);
}
body.home-v2 .v2-est-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red2); box-shadow: 0 0 10px var(--red2); }
body.home-v2 .v2-hero-title {
  font-family: 'Archivo', var(--display);
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.3rem, 5.6vw, 4rem);
  line-height: 1.04; letter-spacing: -.01em; margin-bottom: 18px;
}
body.home-v2 .v2-hero-title .v2-red { text-shadow: 0 0 34px rgba(224,43,43,.45); }
body.home-v2 .v2-hero-lede { color: var(--muted); font-size: 1.02rem; max-width: 420px; margin-bottom: 26px; }
body.home-v2 .v2-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

body.home-v2 .v2-hero { position: relative; }
body.home-v2 .v2-hero .container { position: relative; } /* art anchors to the container, beside the text */
body.home-v2 .v2-hero-art {
  /* Art overlaps into the text zone (starts behind the headline) and
     fills the whole right side — the copy sits on top of its faded edge. */
  position: absolute; top: 0; bottom: 0; right: 0;
  left: 30%; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
body.home-v2 .v2-hero-copy { position: relative; z-index: 2; }
body.home-v2 .v2-hero-glow {
  position: absolute; inset: 0; margin: auto;
  width: 72%; aspect-ratio: 1;
  border-radius: 50%; background: radial-gradient(circle, rgba(224,43,43,.24), transparent 68%);
  filter: blur(8px); pointer-events: none;
}
body.home-v2 .v2-hero-watermark {
  position: absolute; inset: 0; margin: auto;
  width: 52%; opacity: .06; pointer-events: none;
}
body.home-v2 .v2-hero-char {
  position: relative; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 40%;
  border-radius: 0;
  /* Long left fade so the part under the headline melts away and the
     text stays readable on top of it */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 22%, #000 46%, #000 88%, transparent 100%),
                      linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 22%, #000 46%, #000 88%, transparent 100%),
                      linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  filter: saturate(1.08) contrast(1.05) brightness(.96);
}

/* ============================================================
   BLACKLIST TICKER
   ============================================================ */
body.home-v2 .v2-ticker {
  background: linear-gradient(90deg, rgba(224,43,43,.16), rgba(224,43,43,.05));
  border-top: 1px solid rgba(224,43,43,.35);
  border-bottom: 1px solid rgba(224,43,43,.35);
  padding: 11px 0;
}
body.home-v2 .v2-ticker-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
body.home-v2 .v2-ticker a { color: #ffd7d7; font-size: .9rem; font-weight: 600; }
body.home-v2 .v2-ticker a:hover { color: #fff; }
body.home-v2 .v2-ticker-more { white-space: nowrap; font-size: .82rem !important; color: #fff !important; opacity: .85; }

/* ============================================================
   LIVE LABELS + STATS
   ============================================================ */
body.home-v2 .v2-live-label {
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--display); font-weight: 800; font-size: .8rem; letter-spacing: .16em;
  color: var(--text); margin-bottom: 16px; min-width: 0;
}
body.home-v2 .v2-live-label .live-dot { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.home-v2 .v2-live-sub { font-weight: 500; letter-spacing: 0; color: var(--muted); font-size: .78rem; white-space: normal; }
body.home-v2 .v2-live-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; animation: v2pulse 1.6s infinite; }
body.home-v2 .v2-live-dot.grn { background: var(--green); box-shadow: 0 0 10px var(--green); }
body.home-v2 .v2-live-dot.red { background: var(--red2); box-shadow: 0 0 10px var(--red2); }
@keyframes v2pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

body.home-v2 .v2-stat {
  border-radius: 14px; border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--card-raised), var(--card));
  transition: transform .18s var(--ease), border-color .18s, box-shadow .18s;
}
body.home-v2 .v2-stat:hover { transform: translateY(-3px); }
body.home-v2 .v2-glow-grn { border-color: rgba(18,183,106,.35); box-shadow: 0 0 24px -8px rgba(18,183,106,.35); }
body.home-v2 .v2-glow-red { border-color: rgba(224,43,43,.4);  box-shadow: 0 0 24px -8px rgba(224,43,43,.4); }
body.home-v2 .v2-glow-gld { border-color: rgba(245,179,1,.35); box-shadow: 0 0 24px -8px rgba(245,179,1,.3); }
body.home-v2 .v2-glow-blu { border-color: rgba(29,155,240,.35); box-shadow: 0 0 24px -8px rgba(29,155,240,.3); }
body.home-v2 .stat .num.rd { color: var(--red2); }

/* ============================================================
   ENFORCEMENT FEED CAROUSEL
   ============================================================ */
body.home-v2 .v2-feed-wrap {
  border: 1px solid rgba(224,43,43,.3); border-radius: 16px;
  background:
    radial-gradient(400px 160px at 12% 0%, rgba(224,43,43,.1), transparent 70%),
    var(--panel);
  padding: 18px;
  box-shadow: 0 0 34px -14px rgba(224,43,43,.4);
}
body.home-v2 .feed-carousel-arrows button {
  border: 1px solid var(--line-strong); background: rgba(255,255,255,.03); color: var(--text);
}
body.home-v2 .feed-carousel-arrows button:hover { border-color: rgba(224,43,43,.6); color: #fff; }
body.home-v2 .feed-card { border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
body.home-v2 .feed-card:hover { border-color: rgba(224,43,43,.5); }
body.home-v2 .tag-red { background: var(--red-soft); color: #ff6b6b; }

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
body.home-v2 .v2-h2 {
  font-family: 'Archivo', var(--display);
  font-weight: 800; text-transform: uppercase; letter-spacing: .01em;
}
body.home-v2 .v2-head-row { display: flex; align-items: end; justify-content: space-between; gap: 14px; text-align: left; }
body.home-v2 .v2-head-row .label-caps { display: block; }
body.home-v2 .v2-viewall { color: var(--muted); font-size: .86rem; font-weight: 600; white-space: nowrap; }
body.home-v2 .v2-viewall:hover { color: var(--red2); }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
body.home-v2 .v2-how { background: linear-gradient(180deg, transparent, rgba(255,255,255,.015), transparent); }
body.home-v2 .v2-step {
  border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(180deg, var(--card-raised), var(--card));
  transition: border-color .18s, transform .18s var(--ease);
}
body.home-v2 .v2-step:hover { border-color: var(--line-strong); transform: translateY(-2px); }

/* ============================================================
   INSTANT VENDOR CHECK
   ============================================================ */
body.home-v2 .v2-verify {
  border: 1px solid rgba(224,43,43,.35); border-radius: 16px;
  background:
    radial-gradient(360px 140px at 88% 0%, rgba(224,43,43,.1), transparent 70%),
    var(--panel);
  box-shadow: 0 0 30px -14px rgba(224,43,43,.4);
}
body.home-v2 .v2-verify input:focus { border-color: rgba(224,43,43,.6) !important; outline: none; }

/* ============================================================
   VENDOR OF THE MONTH — gold frame
   ============================================================ */
body.home-v2 .v2-votm .votm-card {
  border: 1px solid rgba(245,179,1,.45); border-radius: 18px;
  background:
    radial-gradient(500px 220px at 8% 0%, rgba(245,179,1,.1), transparent 70%),
    linear-gradient(180deg, #151206, var(--card));
  box-shadow: 0 0 40px -14px rgba(245,179,1,.45), inset 0 1px 0 rgba(245,179,1,.15);
}
body.home-v2 .v2-votm .votm-crown { filter: drop-shadow(0 0 8px rgba(245,179,1,.6)); }
/* VOTM button (rendered by JS as .btn.btn-green) — gold-frame it on home */
body.home-v2 .v2-votm .btn.btn-green {
  background: linear-gradient(180deg, #ffcf40, var(--gold)); color: #1a1403;
  border: none; box-shadow: 0 10px 24px -10px rgba(245,179,1,.55);
}

/* ============================================================
   REVIEWS
   ============================================================ */
body.home-v2 .review-tile { border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
body.home-v2 .review-tile:hover { border-color: rgba(245,179,1,.4); }

/* ============================================================
   CATEGORY TILES
   ============================================================ */
body.home-v2 .cat-tile {
  border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(180deg, var(--card-raised), var(--card));
  transition: transform .18s var(--ease), border-color .18s;
}
body.home-v2 .cat-tile:hover { transform: translateY(-3px); border-color: var(--line-strong); }

/* ============================================================
   TOGETHER BANNER
   ============================================================ */
body.home-v2 .v2-together {
  border: 1px solid rgba(224,43,43,.3); border-radius: 20px; overflow: hidden;
  background:
    radial-gradient(600px 300px at 92% 100%, rgba(224,43,43,.16), transparent 65%),
    linear-gradient(120deg, #121213, var(--panel));
  box-shadow: 0 0 44px -16px rgba(224,43,43,.4);
}
body.home-v2 .v2-together-crest {
  width: min(150px, 36vw); margin-bottom: 18px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(224,43,43,.35), 0 0 0 12px rgba(224,43,43,.05), 0 20px 50px -14px rgba(224,43,43,.45);
}
body.home-v2 .v2-together-title { font-family: 'Archivo', var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.4rem, 3vw, 2.1rem); margin-bottom: 12px; }
body.home-v2 .v2-together-copy p { color: var(--muted); margin-bottom: 22px; max-width: 430px; }
body.home-v2 .v2-together-art img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
}

/* ============================================================
   NEWSLETTER
   ============================================================ */
body.home-v2 .v2-newsletter {
  border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(180deg, var(--card-raised), var(--card));
}
body.home-v2 .v2-newsletter input:focus { border-color: rgba(224,43,43,.6); outline: none; }

/* ============================================================
   FEATURE STRIP
   ============================================================ */
body.home-v2 .v2-features .feature-strip-item { border-radius: 12px; }

/* ============================================================
   VOTM + RECENT REVIEWS — side-by-side row (mockup layout)
   ============================================================ */
body.home-v2 .v2-duo { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 18px; align-items: stretch; }
body.home-v2 .v2-duo-votm {
  border: 1px solid rgba(245,179,1,.45); border-radius: 16px; padding: 18px;
  background:
    radial-gradient(340px 200px at 10% 0%, rgba(245,179,1,.12), transparent 70%),
    linear-gradient(180deg, #151206, var(--card));
  box-shadow: 0 0 34px -14px rgba(245,179,1,.45), inset 0 1px 0 rgba(245,179,1,.15);
}
body.home-v2 .v2-duo-reviews {
  border: 1px solid var(--line); border-radius: 16px; padding: 18px;
  background: linear-gradient(180deg, var(--card-raised), var(--card));
}
body.home-v2 .v2-panel-label {
  font-family: var(--display); font-weight: 800; font-size: .78rem; letter-spacing: .14em;
  color: var(--text); margin-bottom: 14px;
}
body.home-v2 .v2-panel-label.gold { color: var(--gold); }
body.home-v2 .v2-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
body.home-v2 .v2-panel-head .v2-panel-label { margin-bottom: 0; }
/* Inside the gold panel the votm-card sheds its own frame (panel is the frame) */
body.home-v2 .v2-duo-votm .votm-card { border: none; background: none; box-shadow: none; padding: 0; flex-direction: column; text-align: center; }
/* Reviews inside the right panel: horizontal cards row, scrollable if tight */
body.home-v2 .v2-duo-reviews .reviews-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
body.home-v2 .v2-duo-reviews .review-tile { margin: 0; }
@media (max-width: 960px) {
  body.home-v2 .v2-duo { grid-template-columns: 1fr; }
  body.home-v2 .v2-duo-reviews .reviews-strip { grid-template-columns: 1fr; }
}

/* ============================================================
   STAT CARDS — horizontal (icon left, number + label right)
   ============================================================ */
body.home-v2 .v2-stat {
  display: flex; align-items: center; gap: 14px; text-align: left; padding: 18px;
  flex-wrap: wrap;
}
body.home-v2 .v2-stat .icon { font-size: 1.6rem; flex-shrink: 0; }
body.home-v2 .v2-stat .num { font-size: 1.7rem; line-height: 1.1; width: auto; }
body.home-v2 .v2-stat .label { font-size: .8rem; color: var(--muted); flex-basis: calc(100% - 0px); order: 3; margin-top: 2px; }
body.home-v2 .v2-stat .stat-link { order: 4; font-size: .76rem; margin-top: 6px; }


@media (max-width: 1024px) {
  body.home-v2 .v2-hero-split { text-align: center; justify-content: center; min-height: 0; padding-top: min(78vw, 420px); }
  body.home-v2 .v2-hero-copy { max-width: 100%; }
  body.home-v2 .v2-hero-lede { margin-left: auto; margin-right: auto; }
  body.home-v2 .v2-hero-actions { justify-content: center; }
  /* Stacked layout: full artwork centered above the headline, no crop,
     no negative offsets — the whole character stays on screen */
  body.home-v2 .v2-hero-art {
    left: 0; right: 0; width: 100%; bottom: auto;
    height: min(72vw, 400px); justify-content: center;
  }
  body.home-v2 .v2-hero-char {
    object-fit: contain; object-position: center top;
    -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 55%, transparent 96%);
            mask-image: radial-gradient(120% 100% at 50% 40%, #000 55%, transparent 96%);
    opacity: .95;
  }
  body.home-v2 .v2-hero-glow { width: 60%; }
  body.home-v2 .v2-ticker-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  body.home-v2 .v2-head-row { flex-direction: column; align-items: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  body.home-v2 .v2-live-dot { animation: none; }
  body.home-v2 .v2-btn, body.home-v2 .v2-stat, body.home-v2 .cat-tile, body.home-v2 .v2-step { transition: none; }
}

/* ============================================================
   N.B.S.V.A — VENDORS PAGE V2 ("Verified Vendors" blue skin)
   Loaded AFTER css/style.css, scoped to body.vendors-v2 so no
   other page changes. Also contains the mobile overflow fixes.
   ============================================================ */

body.vendors-v2 {
  --blue2: #1D6FF2;            /* primary accent for the directory (mockups) */
  --blue-soft: rgba(29,111,242,.14);
  --bg: #060607;
  --card: #0F1012;
  --card-raised: #131417;
  background:
    radial-gradient(900px 460px at 50% -8%, rgba(29,111,242,.10), transparent 62%),
    var(--bg);
  overflow-x: hidden;           /* nothing escapes the viewport sideways */
}

/* ---------------- PAGE HERO ---------------- */
body.vendors-v2 .page-hero::before {
  background: radial-gradient(680px 360px at 50% -10%, rgba(29,111,242,.18), transparent 65%);
}
body.vendors-v2 .page-hero h1 {
  font-family: 'Archivo', var(--display);
  font-weight: 900; text-transform: uppercase; letter-spacing: 0;
}
body.vendors-v2 .page-hero .label-caps { color: #6ea8ff; }

/* ---------------- SEARCH + SORT ---------------- */
body.vendors-v2 .big-search input:focus { border-color: rgba(29,111,242,.6); outline: none; }
body.vendors-v2 .big-search { border-radius: 14px; }

/* ---------------- CATEGORY CHIPS + TABS (scroll, don't overflow) ------- */
body.vendors-v2 .cat-chip-row,
body.vendors-v2 .tabs {
  flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; justify-content: flex-start;
  padding-bottom: 4px;
}
body.vendors-v2 .cat-chip-row::-webkit-scrollbar,
body.vendors-v2 .tabs::-webkit-scrollbar { display: none; }
body.vendors-v2 .tab-btn { white-space: nowrap; flex-shrink: 0; border-radius: 999px; }
body.vendors-v2 .tab-btn.active { background: var(--blue2); border-color: var(--blue2); color: #fff; }
body.vendors-v2 .cat-chip-row > * { white-space: nowrap; flex-shrink: 0; }
@media (min-width: 861px) {
  /* desktop: tabs can center like before, still scroll if cramped */
  body.vendors-v2 .tabs { justify-content: center; }
}

/* ---------------- VENDOR CARDS ---------------- */
body.vendors-v2 .vendor-card {
  border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(180deg, var(--card-raised), var(--card));
  transition: transform .18s var(--ease), border-color .18s, box-shadow .18s;
  min-width: 0;                 /* lets grid children shrink instead of overflowing */
}
body.vendors-v2 .vendor-card:hover {
  transform: translateY(-3px);
  border-color: rgba(29,111,242,.55);
  box-shadow: 0 0 28px -10px rgba(29,111,242,.45);
}
body.vendors-v2 .vendor-card .vc-status {
  background: var(--blue-soft); color: #7db3ff;
  border: 1px solid rgba(29,111,242,.35);
}
body.vendors-v2 .vendor-card [data-search] { word-break: break-word; }
body.vendors-v2 .vc-name, body.vendors-v2 .vc-sub { word-break: break-word; overflow-wrap: anywhere; }
/* View Profile button — blue like the mockup (overrides .btn-green inside cards) */
body.vendors-v2 .vendor-card .vc-actions .btn-green {
  background: linear-gradient(180deg, #2f7ff7, var(--blue2));
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(29,111,242,.6), inset 0 1px 0 rgba(255,255,255,.16);
}
body.vendors-v2 .vendor-card .vc-actions .btn-green:hover { background: #3f8bff; }

/* ---------------- PROFILE MODAL ---------------- */
body.vendors-v2 .modal {
  border: 1px solid rgba(29,111,242,.3); border-radius: 20px;
  background:
    radial-gradient(560px 220px at 50% 0%, rgba(29,111,242,.12), transparent 70%),
    var(--card);
  max-width: min(760px, calc(100vw - 24px)); /* never wider than the screen */
}
body.vendors-v2 .vp-badges .tag-blue { background: var(--blue-soft); color: #7db3ff; }
body.vendors-v2 .vp-stats { display: flex; flex-wrap: wrap; gap: 10px; }
body.vendors-v2 .vp-stat {
  flex: 1 1 90px; min-width: 90px;
  border: 1px solid var(--line); border-radius: 12px; padding: 10px;
  background: rgba(255,255,255,.02); text-align: center;
}
body.vendors-v2 .vp-actions-row { flex-wrap: wrap; }
body.vendors-v2 .vp-actions-row .btn { min-width: 0; }
/* WhatsApp contact stays green (universal), secondary links ghost —
   but primary in-modal action buttons pick up blue focus rings */
body.vendors-v2 .modal input:focus, body.vendors-v2 .modal textarea:focus {
  border-color: rgba(29,111,242,.6); outline: none;
}

/* ---------------- MOBILE OVERFLOW FIXES (the "out of view" bugs) ------- */
@media (max-width: 640px) {
  /* toolbar rows stack instead of squeezing off-screen */
  body.vendors-v2 .dir-toolbar-row { flex-wrap: wrap; }
  body.vendors-v2 .dir-toolbar-row .csel { max-width: 100% !important; width: 100%; }

  /* cards: single column always, no fixed min forcing sideways scroll */
  body.vendors-v2 .grid-3 { grid-template-columns: 1fr; }

  /* modal becomes a full-width bottom sheet that scrolls internally */
  body.vendors-v2 .modal-back.open { align-items: flex-end; padding: 0; }
  body.vendors-v2 .modal {
    width: 100%; max-width: 100%; max-height: 92vh;
    overflow-y: auto; border-radius: 18px 18px 0 0;
  }
  body.vendors-v2 .vp-top { flex-wrap: wrap; }
  body.vendors-v2 .vp-stats { gap: 8px; }
  body.vendors-v2 .vp-stat { flex: 1 1 calc(33% - 8px); min-width: 80px; padding: 8px 6px; }
  body.vendors-v2 .vp-actions-row .btn { flex: 1 1 100%; }

  /* long unbroken strings (WhatsApp numbers, emails, links) wrap */
  body.vendors-v2 .modal, body.vendors-v2 .vendor-card { overflow-wrap: anywhere; }

  /* any table (scammer list) scrolls inside its panel instead of
     stretching the page */
  body.vendors-v2 .tab-panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body.vendors-v2 .tab-panel table { min-width: 520px; }

  /* catalog image strips stay inside the card */
  body.vendors-v2 .vc-catalog-strip { overflow-x: auto; }
  body.vendors-v2 img { max-width: 100%; height: auto; }
}


/* ============================================================
   NAV — v2 red skin (site-wide)
   ============================================================ */
.nav { background: rgba(6,6,6,.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav-links a { color: #cfd3d1; font-weight: 600; }
.nav-links a:hover { color: #fff; background: rgba(255,255,255,.05); }
.nav-links a.active {
  color: #fff; background: transparent;
  box-shadow: inset 0 -2px 0 #E02B2B;
  border-radius: 0;
}
.nav-cta-red {
  background: linear-gradient(180deg, #f13a3a, #E02B2B) !important;
  border-radius: 12px;
  box-shadow: 0 8px 20px -8px rgba(224,43,43,.55);
}
.nav-cta-red:hover { background: #f14b4b !important; }

/* ################################################################
   V2 — VENDOR CARD (vc2) + PROFILE POPUP (vp2) — mockup anatomy
   Rendered by vendorCard() / renderModal() in js/main.js.
   ################################################################ */
.vc2 { position: relative; display: flex; flex-direction: column; gap: 10px; }
.vc2-toprow { display: flex; justify-content: space-between; align-items: center; min-height: 20px; }
.vc2-ribbon {
  font-size: .62rem; font-weight: 800; letter-spacing: .12em;
  padding: 4px 10px; border-radius: 6px;
}
.vc2-ribbon.gold { background: rgba(245,179,1,.15); color: #ffd257; border: 1px solid rgba(245,179,1,.4); }
.vc2-ribbon.blue { background: rgba(29,111,242,.15); color: #7db3ff; border: 1px solid rgba(29,111,242,.4); }
.vc2-online { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; color: #4fdc9c; font-weight: 600; }
.vc2-online .dot { width: 7px; height: 7px; border-radius: 50%; background: #12B76A; box-shadow: 0 0 8px #12B76A; animation: v2pulse 1.6s infinite; }
.vc2-badges { margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; }
.vc2-verified {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(29,111,242,.14); color: #7db3ff; border: 1px solid rgba(29,111,242,.35);
}
.vc2-score-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.vc2-trust { text-align: right; display: flex; flex-direction: column; }
.vc2-trust .l { font-size: .64rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.vc2-trust .n { font-weight: 800; font-size: 1.05rem; }
.vc2-trust .n.trust-hi { color: #4fdc9c; }
.vc2-trust .n.trust-mid { color: #ffd257; }
.vc2-trust .n.trust-lo { color: #ff8d84; }
.vc2-services-label { font-size: .64rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; display: block; margin-bottom: 5px; }
.vc2-chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.vc2-chip {
  font-size: .68rem; padding: 3px 9px; border-radius: 7px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line); color: #c8cdca;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vc2-chip.more { color: var(--muted); }
.vc2-meta { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.vc2-meta-item { display: flex; flex-direction: column; min-width: 0; }
.vc2-meta-item .l { font-size: .62rem; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.vc2-meta-item .v { font-size: .78rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- profile popup (vp2) ---- */
.vp2-hero { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 16px; }
.vp2-id { display: flex; gap: 14px; align-items: flex-start; flex: 1 1 300px; min-width: 0; }
.vp2-avatar { position: relative; flex-shrink: 0; }
.vp2-online-dot {
  position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #12B76A; border: 3px solid #101113; box-shadow: 0 0 10px #12B76A;
}
.vp2-who { min-width: 0; }
.vp2-who .vc2-verified { margin-bottom: 6px; }
.vp2-meta-line { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 8px; }
.vp2-meta-chip {
  font-size: .7rem; color: var(--muted); padding: 3px 9px;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.02);
}
.vp2-meta-chip.on { color: #4fdc9c; border-color: rgba(18,183,106,.35); }
.vp2-trust-panel {
  flex: 0 0 auto; margin-left: auto; text-align: center;
  border: 1px solid rgba(18,183,106,.35); border-radius: 14px; padding: 14px 20px;
  background: radial-gradient(160px 90px at 50% 0%, rgba(18,183,106,.12), transparent 75%), rgba(255,255,255,.02);
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 0 24px -10px rgba(18,183,106,.4);
}
.vp2-trust-panel .l { font-size: .62rem; letter-spacing: .14em; color: var(--muted); font-weight: 700; }
.vp2-trust-panel .n { font-size: 1.7rem; font-weight: 800; color: #4fdc9c; line-height: 1.1; }
.vp2-trust-panel .stars { color: var(--gold); letter-spacing: .1em; }
.vp2-trust-panel .c { font-size: .7rem; color: var(--muted); }
.vp2-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 16px; }
.vp2-stat {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px;
  background: rgba(255,255,255,.02); display: flex; flex-direction: column; gap: 2px;
}
.vp2-stat .ic { font-size: 1rem; }
.vp2-stat .l { font-size: .64rem; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.vp2-stat .n { font-weight: 700; font-size: .95rem; }
@media (max-width: 640px) {
  .vp2-trust-panel { flex: 1 1 100%; margin-left: 0; }
  .vp2-stat-grid { grid-template-columns: 1fr 1fr; }
}

/* ################################################################
   V2 — SITE-WIDE PAGE SKIN (faq, news, terms, privacy, cookies,
   member access, contact, enforcement) — no HTML changes needed
   ################################################################ */
.page-hero h1 {
  font-family: 'Archivo', var(--display);
  font-weight: 900; text-transform: uppercase; letter-spacing: 0;
}
.page-hero::before {
  background: radial-gradient(620px 340px at 50% -10%, rgba(224,43,43,.13), transparent 65%);
}
.page-hero .label-caps { color: #ff8d84; }
/* vendors + enforcement keep their own hero tints */
body.vendors-v2 .page-hero::before { background: radial-gradient(680px 360px at 50% -10%, rgba(29,111,242,.18), transparent 65%); }
body.vendors-v2 .page-hero .label-caps { color: #6ea8ff; }
.enf-page .page-hero::before { background: radial-gradient(620px 340px at 50% -10%, rgba(240,68,56,.16), transparent 65%); }

.faq-item { border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, #141416, #101011); }
.faq-item:hover { border-color: rgba(224,43,43,.35); }
.faq-q { font-weight: 700; }
.form-card { border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, #141416, #101011); }
.form-card input:focus, .form-card textarea:focus, .form-card select:focus { border-color: rgba(224,43,43,.55); outline: none; }
.prose h2 {
  font-family: 'Archivo', var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 1.05rem; letter-spacing: .02em;
}

/* ################################################################
   V2 — VENDORS PAGE: hero character, Top-5 leaderboard, mobile pass
   ################################################################ */
/* Hero character (assets/vendors-hero.png — white bg hidden by multiply) */
body.vendors-v2 .vph2 { position: relative; overflow: hidden; }
body.vendors-v2 .vph2-art {
    position: absolute;
    right: -4%;
    bottom: -10%;
    height: 125%;
    z-index: 0;
    opacity: .72;
    mix-blend-mode: lighten;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0,0,0,.6) 18%,
        #000 35%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0,0,0,.6) 18%,
        #000 35%
    );
    filter: brightness(.92) contrast(1.05) saturate(1.05);
}
body.vendors-v2 .vph2 .container { position: relative; z-index: 1; }

/* Leaderboard */
body.vendors-v2 .lb-panel {
  border: 1px solid rgba(29,111,242,.35); border-radius: 16px; padding: 16px;
  background:
    radial-gradient(420px 160px at 10% 0%, rgba(29,111,242,.12), transparent 70%),
    linear-gradient(180deg, #131417, #0F1012);
  box-shadow: 0 0 30px -14px rgba(29,111,242,.45);
}
body.vendors-v2 .lb-head {
  font-family: var(--display); font-weight: 800; font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 12px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
body.vendors-v2 .lb-sub { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); font-size: .74rem; }
body.vendors-v2 .lb-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 12px; cursor: pointer; min-width: 0;
  transition: background .15s, transform .15s var(--ease);
}
body.vendors-v2 .lb-row:hover { background: rgba(29,111,242,.08); transform: translateX(3px); }
body.vendors-v2 .lb-row.first { background: rgba(245,179,1,.06); border: 1px solid rgba(245,179,1,.3); }
body.vendors-v2 .lb-rank { width: 32px; text-align: center; font-weight: 800; font-size: 1rem; flex-shrink: 0; color: var(--muted); }
body.vendors-v2 .lb-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
body.vendors-v2 .lb-name { font-weight: 700; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vendors-v2 .lb-meta { font-size: .72rem; color: var(--gold); }
body.vendors-v2 .lb-trust { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; }
body.vendors-v2 .lb-trust .l { font-size: .6rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
body.vendors-v2 .lb-trust .n { font-weight: 800; color: #4fdc9c; }

/* -------- MOBILE PASS (vendors page) -------- */
@media (max-width: 640px) {
  body.vendors-v2 .vph2-art { height: 90%; right: -18%; opacity: .45; }
  body.vendors-v2 .page-hero { padding: 54px 0 28px; }
  body.vendors-v2 .page-hero p { font-size: .92rem; padding: 0 6px; }
  body.vendors-v2 .lb-panel { padding: 12px; }
  body.vendors-v2 .lb-row { gap: 9px; padding: 9px 8px; }
  body.vendors-v2 .lb-rank { width: 26px; font-size: .9rem; }
  body.vendors-v2 .lb-name { font-size: .84rem; }
  body.vendors-v2 .vendor-card { padding: 14px; }
  body.vendors-v2 .vc2-score-row { flex-wrap: wrap; }
  body.vendors-v2 .vc2-meta { flex-wrap: wrap; gap: 6px 14px; }
  body.vendors-v2 .big-search input { font-size: 16px; } /* stops iOS zoom-jump on tap */
  body.vendors-v2 .card { padding: 14px; }
  body.vendors-v2 .section { padding: 34px 0; }
}

/* ################################################################
   V2 — TOP 5 VENDOR LEADERBOARD (homepage)
   ################################################################ */
body.home-v2 .v2-lb {
  border: 1px solid rgba(245,179,1,.35); border-radius: 16px; padding: 18px;
  background:
    radial-gradient(420px 180px at 8% 0%, rgba(245,179,1,.08), transparent 70%),
    linear-gradient(180deg, #141210, #101011);
  box-shadow: 0 0 30px -14px rgba(245,179,1,.35);
}
.lb-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, transform .15s var(--ease);
}
.lb-row:hover { background: rgba(255,255,255,.03); border-color: var(--line-strong); transform: translateX(3px); }
.lb-row.first {
  border-color: rgba(245,179,1,.4);
  background: linear-gradient(90deg, rgba(245,179,1,.08), transparent 60%);
}
.lb-rank { width: 34px; text-align: center; font-weight: 800; font-size: 1rem; color: var(--muted); flex-shrink: 0; }
.lb-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lb-name { font-weight: 700; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-sub { font-size: .74rem; color: var(--gold); }
.lb-trust { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; }
.lb-trust .l { font-size: .6rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.lb-trust .n { font-weight: 800; color: #4fdc9c; font-size: 1rem; }

/* ################################################################
   V2 — SITE-WIDE MOBILE PASS
   PC is good; this tightens every page below 640px.
   ################################################################ */
@media (max-width: 640px) {
  /* global guards — nothing scrolls sideways, ever */
  html, body { overflow-x: hidden; }
  img, video, canvas, svg { max-width: 100%; height: auto; }
  .container { padding-left: 16px; padding-right: 16px; }
  .section { padding-top: 44px; padding-bottom: 44px; }

  /* HOME: stats 2x2 like the mobile mockup */
  body.home-v2 .v2-stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  body.home-v2 .v2-stat { padding: 13px; gap: 8px; }
  body.home-v2 .v2-stat .num { font-size: 1.35rem; }
  body.home-v2 .v2-stat .icon { font-size: 1.2rem; }
  body.home-v2 .v2-stat .stat-link { display: none; } /* cards stay tappable-clean */

  /* HOME: hero buttons stack full-width */
  body.home-v2 .v2-hero-actions { flex-direction: column; align-items: stretch; }
  body.home-v2 .v2-hero-actions .v2-btn { width: 100%; }
  body.home-v2 .v2-hero-title { font-size: clamp(1.9rem, 9.5vw, 2.6rem); }

  /* HOME: panels and banners breathe on small screens */
  body.home-v2 .v2-duo-votm, body.home-v2 .v2-duo-reviews, body.home-v2 .v2-lb { padding: 14px; }
  body.home-v2 .v2-together-copy { padding: 22px 18px; }
  body.home-v2 .v2-together-art { display: none; } /* art hides, copy leads */
  body.home-v2 .newsletter-box { flex-direction: column; align-items: stretch; }
  body.home-v2 .newsletter-form { flex-direction: column; max-width: none; }
  body.home-v2 .newsletter-form button { width: 100%; }
  body.home-v2 .feature-strip { grid-template-columns: 1fr 1fr; gap: 16px; }

  /* leaderboard rows compress */
  .lb-rank { width: 26px; font-size: .9rem; }
  .lb-row { gap: 9px; padding: 10px 8px; }

  /* VENDORS: hero art softens behind text */
  body.vendors-v2 .vph2-art { opacity: .3; }

  /* forms + auth card */
  .form-card { padding: 22px 16px; }
  .tabs-group .tabs { margin-bottom: 18px; }

  /* footer stacks cleanly */
  .mega-footer-grid { grid-template-columns: 1fr; gap: 22px; }
  .mega-footer-bottom { flex-direction: column; gap: 6px; text-align: center; }

  /* prose pages (terms/privacy/cookies) */
  .prose h2 { font-size: .95rem; }
  .page-hero { padding: 52px 0 30px; }
}

@media (max-width: 380px) {
  /* very small phones */
  body.home-v2 .v2-stats-grid { grid-template-columns: 1fr; }
  body.home-v2 .feature-strip { grid-template-columns: 1fr; }
  .vp2-stat-grid { grid-template-columns: 1fr !important; }
}