/* ============================================================
   KMJEE SEO — vefogix-match design system
   Tokens extracted from vefogix.com live CSS:
   font Inter; primary blue gradient #F7D28A→#EEB541→#C6912A;
   pill buttons (radius 9999px); cards radius 10px; gold/pink/green accents.
   This file is the single source of truth for the redesign and is
   enqueued site-wide so header/footer + all marketplace pages match.
   ============================================================ */

:root {
    /* Brand palette derived from the KMJEE SEO logo: cyan → blue → violet/purple. */
    --vfx-blue:        #EEB541;
    --vfx-blue-600:    #C6912A;
    --vfx-blue-700:    #A9791F;
    --vfx-blue-400:    #F0C060;
    --vfx-blue-soft:   #FBF0DA;
    --vfx-grad:        linear-gradient(120deg, #F7D28A 0%, #EEB541 52%, #C6912A 100%);
    --vfx-gold:        #EEB541;
    --vfx-pink:        #f06292;
    --vfx-purple:      #A9791F;
    --vfx-green:       #1f7a5b;
    --vfx-ink:         #0f172a;
    --vfx-body:        #475569;
    --vfx-muted:       #94a3b8;
    --vfx-line:        #e8edf3;
    --vfx-bg:          #fafbff;
    --vfx-card:        #ffffff;
    --vfx-radius:      14px;
    --vfx-radius-sm:   10px;
    --vfx-pill:        9999px;
    --vfx-shadow:      0 10px 40px rgba(15, 35, 95, .08);
    --vfx-shadow-lg:   0 24px 60px rgba(15, 35, 95, .14);
    --vfx-font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --vfx-font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---- FULL-WIDTH BREAKOUT ----
   The seolounge page.php wraps page content in Bootstrap's .container
   (max-width ~1140px). To replicate vefogix's full-bleed sections we break
   the whole .cpp-vfx block out to the full viewport width, then re-center
   readable content inside each .vfx-container. */
/* ==========================================================================
   FULL-BLEED FIX (the white-strip-on-the-right bug)
   The theme wraps page content in centred containers with horizontal padding
   (.container.page-container) and .entry-content. A vw-based breakout on .cpp-vfx
   mis-aligned against those padded parents and left a white strip on the right.
   Instead: force the ENTIRE wrapper chain that holds .cpp-vfx to be full viewport
   width with zero horizontal padding/margin, so .cpp-vfx fills edge-to-edge with
   NO breakout math at all.
   ========================================================================== */
/* Cover EVERY wrapper the theme might place .cpp-vfx in. Different page types nest
   it differently: shortcode pages -> article > .entry-content > .cpp-vfx;
   controller pages (login, cart, account, pay) -> #content.site-content > .cpp-vfx
   directly. Neutralise horizontal padding/margin on all of them so the hero reaches
   both screen edges site-wide. */
#content:has(.cpp-vfx),
#primary:has(.cpp-vfx),
#main:has(.cpp-vfx),
.site-content:has(.cpp-vfx),
.site-main:has(.cpp-vfx),
.content-area:has(.cpp-vfx),
.page-container:has(.cpp-vfx),
.wraper_blog_main:has(.cpp-vfx),
article:has(.cpp-vfx),
.entry-content:has(.cpp-vfx) {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border: 0 !important;
}
.cpp-vfx {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    position: relative;
    overflow-x: hidden;
    box-sizing: border-box;
}
/* The theme .container has top padding that clipped our hero under the header. */
.page-container > .cpp-vfx,
.wraper_blog_main .cpp-vfx,
#content .cpp-vfx { margin-top: 0; padding-top: 0; }

/* The OLD marketplace.css design (.cpp-mp-*) broke full-width sections out of a
   24px-padded parent with `margin:0 -24px`. Now that the wrappers above are full
   width with ZERO padding, those -24px margins overshoot and re-create the white
   strip. Neutralise every horizontal negative-margin breakout — each of these has
   its own inner padding so the content stays inset. Applies site-wide (marketplace,
   account, cart, every cpp page), not just the home page. */
.cpp-vfx .cpp-mp-hero,
.cpp-vfx .cpp-mp-hero-sm,
.cpp-vfx .cpp-mp-process,
.cpp-vfx .cpp-mp-subnav,
.cpp-vfx .cpp-mp-footer-links {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}
/* These full-bleed bands need side padding so their text isn't flush to the edge
   (they previously relied on the parent's 24px we just removed). */
.cpp-vfx .cpp-mp-hero { padding-left: 16px; padding-right: 16px; }
.cpp-vfx .cpp-mp-subnav { padding-left: 16px; padding-right: 16px; }
.cpp-vfx .cpp-mp-process { padding-left: 16px; padding-right: 16px; }

/* Safety net: never allow a sideways white strip from any sub-pixel overflow. */
html, body { overflow-x: hidden !important; max-width: 100%; }
.cpp-vfx > section:first-child { margin-top: 0; }
/* Kill the theme's page banner/breadcrumb gap above our full-bleed hero. */
.cpp-vfx .vfx-hero2, .cpp-vfx .vfx-hero { margin-top: 0; }
/* prevent any stray child from causing horizontal scroll / breaking the layout.
   (Scope the img cap so the hero background video + the wide scrolling table are
   NOT constrained — they need to cover / scroll inside their own wrappers.) */
.cpp-vfx.vfx-home { overflow-x: hidden; width: 100%; max-width: 100%; }
.cpp-vfx.vfx-home .vfx-section img:not(.vfx-hero2-bgvid) { max-width: 100%; height: auto; }
.cpp-vfx .vfx-hero2-bgvid { max-width: none; }

/* ---- Base typography on marketplace/redesigned pages ---- */
.cpp-vfx, .cpp-marketplace-body .cpp-vfx { font-family: var(--vfx-font); color: var(--vfx-body); }
.cpp-vfx h1, .cpp-vfx h2, .cpp-vfx h3, .cpp-vfx h4 { font-family: var(--vfx-font-display); font-weight: 800; color: var(--vfx-ink); letter-spacing: -.02em; }
.cpp-vfx * { box-sizing: border-box; }

/* ---- Section shell ---- */
.cpp-vfx .vfx-section { padding: 64px 0; }
/* near-full-width content: ~92% of viewport, capped so ultra-wide stays readable */
.cpp-vfx .vfx-container { width: 92%; max-width: 1600px; margin: 0 auto; }
@media (max-width:600px){ .cpp-vfx .vfx-container { width: 94%; } .cpp-vfx .vfx-section { padding: 48px 0; } }
.cpp-vfx .vfx-bg-soft { background: var(--vfx-bg); }
.cpp-vfx .vfx-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.cpp-vfx .vfx-eyebrow {
    display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--vfx-blue);
    background: var(--vfx-blue-soft); padding: 6px 14px; border-radius: var(--vfx-pill); margin-bottom: 16px;
}
.cpp-vfx .vfx-head h2 { font-size: 36px; line-height: 1.18; margin: 0 0 14px; font-weight: 800; }
.cpp-vfx .vfx-head p { font-size: 17px; color: var(--vfx-body); margin: 0; }

/* ---- Buttons (pill) ---- */
.cpp-vfx .vfx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--vfx-font); font-weight: 700; font-size: 15px; line-height: 1;
    padding: 15px 30px; border-radius: var(--vfx-pill); border: 2px solid transparent;
    cursor: pointer; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease, background .12s;
}
.cpp-vfx .vfx-btn-primary { background: var(--vfx-grad); color: #fff; box-shadow: 0 8px 22px rgba(9, 109, 217, .32); }
.cpp-vfx .vfx-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(9, 109, 217, .42); color: #fff; }
.cpp-vfx .vfx-btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.55); }
.cpp-vfx .vfx-btn-ghost:hover { background: rgba(255,255,255,.2); color: #fff; }
.cpp-vfx .vfx-btn-light { background: #fff; color: var(--vfx-blue-700); border-color: var(--vfx-line); }
.cpp-vfx .vfx-btn-light:hover { transform: translateY(-2px); box-shadow: var(--vfx-shadow); }
.cpp-vfx .vfx-btn-lg { padding: 17px 38px; font-size: 16px; }

/* ---- Hero ---- */
.cpp-vfx .vfx-hero {
    position: relative; padding: 96px 20px 120px;
    background: var(--vfx-grad); color: #fff; overflow: hidden;
}
.cpp-vfx .vfx-hero::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(900px 400px at 80% -10%, rgba(255,255,255,.18), transparent 60%);
    pointer-events: none;
}
.cpp-vfx .vfx-hero-inner { position: relative; max-width: 980px; margin: 0 auto; text-align: center; }
.cpp-vfx .vfx-hero-kicker {
    display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    background: rgba(255,255,255,.16); padding: 7px 16px; border-radius: var(--vfx-pill); margin-bottom: 22px;
}
.cpp-vfx .vfx-hero h1 { font-size: 52px; line-height: 1.1; font-weight: 800; margin: 0 0 18px; color: #fff; }
.cpp-vfx .vfx-hero h1 .hl { color: #0f172a !important; }
.cpp-vfx .vfx-hero-sub { font-size: 19px; line-height: 1.55; color: #FBF0DA; max-width: 700px; margin: 0 auto 30px; }
.cpp-vfx .vfx-hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cpp-vfx .vfx-hero-trust { margin-top: 22px; font-size: 13px; color: #cfe0ff; }
.cpp-vfx .vfx-hero-logos { margin-top: 18px; display:flex; gap:24px; justify-content:center; flex-wrap:wrap; opacity:.92; font-weight:700; font-size:14px; letter-spacing:.04em; }

/* ---- Stat counters ---- */
.cpp-vfx .vfx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 980px; margin: -64px auto 0; position: relative; z-index: 3; padding: 0 20px; }
.cpp-vfx .vfx-stat { background: var(--vfx-card); border-radius: var(--vfx-radius); box-shadow: var(--vfx-shadow); padding: 26px 18px; text-align: center; }
.cpp-vfx .vfx-stat-num { font-size: 34px; font-weight: 800; color: var(--vfx-blue); line-height: 1; }
.cpp-vfx .vfx-stat-lbl { margin-top: 8px; font-size: 13.5px; color: var(--vfx-body); }

/* ---- Cards grid (features / why-us / services) ---- */
/* card grids stay a tidy centred width so cards don't stretch/scatter on the
   now-full-width container; the table + hero still use the full container. */
.cpp-vfx .vfx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width:1280px; margin-left:auto; margin-right:auto; }
.cpp-vfx .vfx-grid-2 { grid-template-columns: repeat(2, 1fr); max-width:1080px; }
.cpp-vfx .vfx-grid-4 { grid-template-columns: repeat(4, 1fr); }
.cpp-vfx .vfx-pkgs { max-width:1180px; margin-left:auto; margin-right:auto; }
.cpp-vfx .vfx-card {
    background: var(--vfx-card); border: 1px solid var(--vfx-line); border-radius: var(--vfx-radius);
    padding: 30px 26px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
}
.cpp-vfx .vfx-card:hover { transform: translateY(-4px); box-shadow: var(--vfx-shadow-lg); border-color: transparent; }
.cpp-vfx .vfx-card-icon {
    width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
    font-size: 24px; margin-bottom: 18px; color: var(--vfx-blue);
    /* brand-tinted tile: soft indigo→cyan wash + hairline ring (Stripe/Linear look) */
    background:
        linear-gradient(135deg, rgba(198,145,42,.10) 0%, rgba(247,210,138,.10) 100%),
        var(--vfx-card);
    box-shadow: inset 0 0 0 1px rgba(198,145,42,.12);
}
/* Lucide inline-SVG icons — consistent stroke + sizing everywhere */
.cpp-vfx .vfx-ic { width: 24px; height: 24px; display: block; flex: none; stroke-width: 2; }
.cpp-vfx .vfx-card-icon .vfx-ic { width: 26px; height: 26px; }
/* icon picks up the gradient via the brand colour; keep crisp on retina */
.cpp-vfx .vfx-card:hover .vfx-card-icon { box-shadow: inset 0 0 0 1px rgba(198,145,42,.28); transition: box-shadow .2s; }
.cpp-vfx .vfx-card h3 { font-size: 19px; font-weight: 700; margin: 0 0 10px; }
.cpp-vfx .vfx-card p { font-size: 15px; line-height: 1.6; color: var(--vfx-body); margin: 0; }
.cpp-vfx .vfx-card .vfx-card-link { display:inline-block; margin-top:14px; font-weight:700; color:var(--vfx-blue); }

/* numbered process step uses gradient number chip */
.cpp-vfx .vfx-step .vfx-step-num {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    font-weight: 800; color: #fff; background: var(--vfx-grad); margin-bottom: 16px;
}

/* ---- FAQ accordion ---- */
.cpp-vfx .vfx-faq { max-width: 820px; margin: 0 auto; }
.cpp-vfx .vfx-faq-item { background:#fff; border:1px solid var(--vfx-line); border-radius: var(--vfx-radius-sm); margin-bottom: 12px; overflow:hidden; }
.cpp-vfx .vfx-faq-item summary { cursor:pointer; padding:18px 22px; font-weight:700; color:var(--vfx-ink); list-style:none; position:relative; font-size:15.5px; }
.cpp-vfx .vfx-faq-item summary::-webkit-details-marker { display:none; }
.cpp-vfx .vfx-faq-item summary::after { content:"+"; position:absolute; right:22px; top:16px; font-size:22px; color:var(--vfx-blue); font-weight:400; }
.cpp-vfx .vfx-faq-item[open] summary::after { content:"\2212"; }
.cpp-vfx .vfx-faq-item p { margin:0; padding:0 22px 20px; color:var(--vfx-body); line-height:1.6; font-size:15px; }

/* ---- Catalog table ---- */
.cpp-vfx .vfx-table-wrap { overflow-x:auto; border:1px solid var(--vfx-line); border-radius: var(--vfx-radius); background:#fff; box-shadow: var(--vfx-shadow); }
.cpp-vfx .vfx-table { width:100%; border-collapse:collapse; min-width:760px; }
.cpp-vfx .vfx-table th { text-align:left; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--vfx-muted); padding:16px 18px; border-bottom:1px solid var(--vfx-line); background:#f8fafc; }
.cpp-vfx .vfx-table td { padding:16px 18px; border-bottom:1px solid var(--vfx-line); font-size:14.5px; color:var(--vfx-ink); }
.cpp-vfx .vfx-table tr:last-child td { border-bottom:none; }
.cpp-vfx .vfx-table .num { text-align:right; }
.cpp-vfx .vfx-table .vfx-dom a { font-weight:700; color:var(--vfx-ink); }
.cpp-vfx .vfx-table .vfx-price { font-weight:800; color:var(--vfx-blue); }

/* ---- CTA band ---- */
.cpp-vfx .vfx-cta { background: var(--vfx-grad); border-radius: 22px; padding: 56px 28px; text-align:center; color:#fff; max-width:1100px; margin: 0 auto; }
.cpp-vfx .vfx-cta h2 { color:#fff; font-size:32px; font-weight:800; margin:0 0 12px; }
.cpp-vfx .vfx-cta p { color:#FBF0DA; font-size:17px; margin:0 0 24px; }

/* ---- Prose ---- */
.cpp-vfx .vfx-prose { max-width:780px; margin:0 auto; }
.cpp-vfx .vfx-prose h2 { font-size:26px; margin:28px 0 12px; }
.cpp-vfx .vfx-prose p { font-size:16px; line-height:1.7; color:var(--vfx-body); margin:0 0 14px; }
.cpp-vfx .vfx-prose ul { padding-left:20px; }
.cpp-vfx .vfx-prose li { margin-bottom:10px; line-height:1.6; }

/* ---- Floating offer card (hero overlay, vefogix signature) ---- */
.cpp-vfx .vfx-offer { background:#fff; border-radius:18px; box-shadow: var(--vfx-shadow-lg); padding:22px; max-width:520px; margin:32px auto 0; text-align:left; color:var(--vfx-ink); }
.cpp-vfx .vfx-offer h4 { margin:0 0 14px; font-size:15px; font-weight:800; }
.cpp-vfx .vfx-offer-row { display:flex; gap:12px; align-items:center; padding:12px; border-radius:12px; margin-bottom:10px; }
.cpp-vfx .vfx-offer-row.is-a { background:#f6f0ff; }
.cpp-vfx .vfx-offer-row.is-b { background:#eefbf3; }
.cpp-vfx .vfx-offer-badge { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-weight:800; color:#fff; }
.cpp-vfx .vfx-offer-row.is-a .vfx-offer-badge { background:var(--vfx-purple); }
.cpp-vfx .vfx-offer-row.is-b .vfx-offer-badge { background:var(--vfx-green); }
.cpp-vfx .vfx-offer-meta { font-size:13px; color:var(--vfx-body); }
.cpp-vfx .vfx-offer-meta b { color:var(--vfx-ink); display:block; font-size:14px; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .cpp-vfx .vfx-grid, .cpp-vfx .vfx-grid-4 { grid-template-columns: 1fr 1fr; }
    .cpp-vfx .vfx-stats { grid-template-columns: 1fr 1fr; }
    .cpp-vfx .vfx-hero h1 { font-size: 38px; }
    .cpp-vfx .vfx-head h2 { font-size: 28px; }
}
@media (max-width: 560px) {
    .cpp-vfx .vfx-grid, .cpp-vfx .vfx-grid-2, .cpp-vfx .vfx-grid-4, .cpp-vfx .vfx-stats { grid-template-columns: 1fr; }
    .cpp-vfx .vfx-hero h1 { font-size: 30px; }
}

/* ============================================================
   COMPATIBILITY LAYER — restyle the original cpp-mp-* markup
   (marketplace catalog + content pages + 11 site pages) to the
   vefogix look, so every page matches without rewriting templates.
   These all sit inside a .cpp-vfx wrapper for full-width + Inter.
   ============================================================ */
.cpp-vfx .cpp-mp-hero {
    background: var(--vfx-grad) !important; color:#fff; padding:88px 20px 96px; text-align:center; position:relative;
}
.cpp-vfx .cpp-mp-hero-inner, .cpp-vfx .cpp-mp-hero > div { max-width:900px; margin:0 auto; }
.cpp-vfx .cpp-mp-hero-kicker { display:inline-block; background:rgba(255,255,255,.16); color:#fff; padding:7px 16px; border-radius:9999px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; font-size:13px; margin-bottom:18px; }
.cpp-vfx .cpp-mp-hero-title, .cpp-vfx .cpp-mp-hero h1 { color:#fff; font-size:46px; font-weight:800; line-height:1.12; letter-spacing:-.02em; margin:0 0 16px; }
.cpp-vfx .cpp-mp-hero-title span { color:#0f172a !important; }
.cpp-vfx .cpp-mp-hero-sub { color:#FBF0DA; font-size:18px; max-width:640px; margin:0 auto; }
.cpp-vfx .cpp-mp-hero-sm { color:#cfe0ff; font-size:13px; margin-top:14px; }

.cpp-vfx .cpp-mp-eyebrow { display:inline-block; color:var(--vfx-blue); background:var(--vfx-blue-soft); padding:6px 14px; border-radius:9999px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; font-size:12.5px; }
.cpp-vfx .cpp-mp-process-head, .cpp-vfx .cpp-mp-catalog-head { text-align:center; max-width:720px; margin:0 auto 40px; }
.cpp-vfx .cpp-mp-process-head h2, .cpp-vfx .cpp-mp-features h2, .cpp-vfx .cpp-mp-catalog-head h2 { font-size:34px; font-weight:800; letter-spacing:-.02em; color:var(--vfx-ink); }

/* sections get generous padding + alternating bg */
.cpp-vfx .cpp-mp-process, .cpp-vfx .cpp-mp-features, .cpp-vfx .cpp-mp-catalog, .cpp-vfx .cpp-mp-trust, .cpp-vfx .cpp-mp-pad-y { padding:64px 20px; }
.cpp-vfx .cpp-mp-process, .cpp-vfx .cpp-mp-faq { background:var(--vfx-bg); }
.cpp-vfx .cpp-mp-features-grid, .cpp-vfx .cpp-mp-process-grid { max-width:1180px; margin:0 auto; display:grid; gap:24px; }
.cpp-vfx .cpp-mp-features-grid { grid-template-columns:repeat(3,1fr); }
.cpp-vfx .cpp-mp-process-grid { grid-template-columns:repeat(4,1fr); }

/* cards */
.cpp-vfx .cpp-mp-feature, .cpp-vfx .cpp-mp-step { background:#fff; border:1px solid var(--vfx-line); border-radius:var(--vfx-radius); padding:28px 24px; transition:transform .15s, box-shadow .15s; }
.cpp-vfx .cpp-mp-feature:hover, .cpp-vfx .cpp-mp-step:hover { transform:translateY(-4px); box-shadow:var(--vfx-shadow-lg); }
.cpp-vfx .cpp-mp-feature h3, .cpp-vfx .cpp-mp-step h3 { color:var(--vfx-ink); font-weight:700; font-size:18px; }
.cpp-vfx .cpp-mp-feature-icon { width:50px;height:50px;border-radius:13px;display:grid;place-items:center;font-size:22px;background:var(--vfx-blue-soft);color:var(--vfx-blue);margin-bottom:16px; }
.cpp-vfx .cpp-mp-step-num { width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--vfx-grad);margin-bottom:14px; }

/* stat counters */
.cpp-vfx .cpp-mp-trust-stats { max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:20px; }
.cpp-vfx .cpp-mp-stat { background:#fff;border:1px solid var(--vfx-line);border-radius:var(--vfx-radius);box-shadow:var(--vfx-shadow);padding:24px 16px;text-align:center; }
.cpp-vfx .cpp-mp-stat-num { color:var(--vfx-blue);font-size:32px;font-weight:800; }

/* buttons -> pills */
.cpp-vfx .cpp-mp-btn { border-radius:9999px !important; font-weight:700 !important; padding:13px 28px !important; }
.cpp-vfx .cpp-mp-btn-primary { background:var(--vfx-grad) !important; border:none !important; box-shadow:0 8px 22px rgba(9,109,217,.3) !important; }
.cpp-vfx .cpp-mp-btn-primary:hover { transform:translateY(-2px); }

/* catalog table */
.cpp-vfx .cpp-mp-table-wrap { border:1px solid var(--vfx-line);border-radius:var(--vfx-radius);box-shadow:var(--vfx-shadow);overflow:hidden;max-width:1180px;margin:0 auto; }
.cpp-vfx .cpp-mp-table th { background:#f8fafc;color:var(--vfx-muted);text-transform:uppercase;font-size:12px;letter-spacing:.04em; }
.cpp-vfx .cpp-mp-table-price { color:var(--vfx-blue);font-weight:800; }

/* subnav -> pill tabs */
.cpp-vfx .cpp-mp-subnav { background:#fff;border-bottom:1px solid var(--vfx-line); }
.cpp-vfx .cpp-mp-subnav-inner { max-width:1180px;margin:0 auto;display:flex;gap:8px;flex-wrap:wrap;padding:12px 20px; }
.cpp-vfx .cpp-mp-subnav a { padding:8px 16px;border-radius:9999px;font-weight:600;font-size:14px;color:var(--vfx-body); }
.cpp-vfx .cpp-mp-subnav a.is-active, .cpp-vfx .cpp-mp-subnav a:hover { background:var(--vfx-blue-soft);color:var(--vfx-blue); }

/* CTA band */
.cpp-vfx .cpp-mp-cta { background:var(--vfx-grad);border-radius:0;padding:60px 20px;text-align:center; }
.cpp-vfx .cpp-mp-cta h2 { color:#fff;font-size:30px;font-weight:800; }
.cpp-vfx .cpp-mp-cta p { color:#FBF0DA; }

/* FAQ */
.cpp-vfx .cpp-mp-faq-list { max-width:820px;margin:0 auto; }
.cpp-vfx .cpp-mp-faq-item, .cpp-vfx details.cpp-mp-faq-item { background:#fff;border:1px solid var(--vfx-line);border-radius:var(--vfx-radius-sm);margin-bottom:12px; }
.cpp-vfx .cpp-mp-prose { max-width:780px;margin:0 auto; }

/* ============ Homepage v2 — photo hero + filter widget + press + flex ============ */
.cpp-vfx .vfx-hero2 { background-size:cover; background-position:center; color:#fff; padding:90px 20px 70px; text-align:center; }
/* video-background hero (vefogix-style) */
.cpp-vfx .vfx-hero2-video { position:relative; overflow:hidden; background:#080c16; }
.cpp-vfx .vfx-hero2-bgvid { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.cpp-vfx .vfx-hero2-overlay { position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(120deg,rgba(8,12,22,.92) 0%,rgba(8,12,22,.80) 45%,rgba(8,12,22,.6) 100%); }
.cpp-vfx .vfx-hero2-video .vfx-hero2-inner { position:relative; z-index:2; }
.cpp-vfx .vfx-hero2-inner { max-width:1000px; margin:0 auto; }
.cpp-vfx .vfx-hero2 h1 { color:#fff; font-size:46px; line-height:1.14; font-weight:800; margin:0 0 16px; letter-spacing:-.02em; }
.cpp-vfx .vfx-hero2-sub { color:#dbe7ff; font-size:19px; max-width:680px; margin:0 auto 26px; }
.cpp-vfx .vfx-hero2-cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cpp-vfx .vfx-hero2-data { margin:30px 0 10px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#9fb8e6; }
.cpp-vfx .vfx-hero2-logos { display:flex; gap:26px; justify-content:center; flex-wrap:wrap; opacity:.92; font-weight:700; font-size:15px; }
.cpp-vfx .vfx-hero2-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:820px; margin:40px auto 0; }
.cpp-vfx .vfx-hero2-stats > div { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:18px 12px; }
.cpp-vfx .vfx-hero2-stats b { display:block; font-size:28px; font-weight:800; color:#fff; }
.cpp-vfx .vfx-hero2-stats span { font-size:12.5px; color:#cbd9f3; }

/* filter bar */
.cpp-vfx .vfx-filterbar { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; justify-content:center; background:#fff; border:1px solid var(--vfx-line); border-radius:16px; box-shadow:var(--vfx-shadow); padding:20px; max-width:1200px; margin:0 auto; }
.cpp-vfx .vfx-filter { display:flex; flex-direction:column; gap:6px; text-align:left; flex:1 1 180px; }
.cpp-vfx .vfx-filter label { font-size:12px; font-weight:700; color:var(--vfx-muted); text-transform:uppercase; letter-spacing:.04em; }
.cpp-vfx .vfx-filter select { padding:8px 12px; border:1.5px solid #cbd5e1; border-radius:10px; font-family:inherit; font-size:14px; background:#fff; }
.cpp-vfx .vfx-filterbar > .vfx-btn { flex:0 0 auto; height:40px; }

/* press logos — sizing handled by the marquee .vfx-press-track img rule below */
.cpp-vfx .vfx-press-logos { display:flex; flex-wrap:wrap; gap:34px; justify-content:center; align-items:center; }
.cpp-vfx .vfx-press-logos:hover .vfx-press-track img { opacity:1; }

/* flexible-services cards with illustration */
.cpp-vfx .vfx-flex { display:flex; gap:18px; align-items:flex-start; }
.cpp-vfx .vfx-flex-ill { width:64px; height:64px; flex:0 0 64px; object-fit:contain; }

/* testimonial quote cards */
.cpp-vfx .vfx-quote p { font-style:italic; color:#334155; font-size:15px; line-height:1.6; }
.cpp-vfx .vfx-quote-by { margin-top:14px; }
.cpp-vfx .vfx-quote-by b, .cpp-vfx .vfx-quote-by strong { color:var(--vfx-ink); }
.cpp-vfx .vfx-quote-by span { display:block; font-size:13px; color:var(--vfx-muted); }
.cpp-vfx .vfx-quote-stars { color:#f59e0b; font-size:15px; letter-spacing:1px; margin-bottom:10px; }

/* checklist (case-study / careers bullet wins) */
.cpp-vfx .vfx-check { list-style:none; margin:14px 0 0; padding:0; }
.cpp-vfx .vfx-check li { position:relative; padding:6px 0 6px 28px; color:#475569; font-size:14px; line-height:1.5; border-bottom:1px solid #f1f5f9; }
.cpp-vfx .vfx-check li:last-child { border-bottom:0; }
.cpp-vfx .vfx-check li::before { content:"✓"; position:absolute; left:0; top:6px; width:18px; height:18px; background:#ecfdf5; color:#16a34a; border-radius:50%; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.cpp-vfx .vfx-check li strong { color:var(--vfx-ink); }

@media (max-width:900px){ .cpp-vfx .vfx-hero2-stats { grid-template-columns:1fr 1fr; } .cpp-vfx .vfx-hero2 h1 { font-size:34px; } }

/* ============ HARD OVERRIDES (beat theme CSS) — fixes from user screenshot ============ */
/* Hero text must be white + visible (theme was forcing dark text) */
.cpp-vfx .vfx-hero2 h1 { color:#fff !important; }
.cpp-vfx .vfx-hero2-sub, .cpp-vfx .vfx-hero2-data { color:#dbe7ff !important; }
.cpp-vfx .vfx-hero2-stats b { color:#fff !important; }
.cpp-vfx .vfx-hero2 { padding-top:70px !important; padding-bottom:70px !important; }

/* Style the filter dropdowns properly (were rendering as raw native selects) */
.cpp-vfx .vfx-filterbar select,
.cpp-vfx .vfx-filter select {
    -webkit-appearance:none; -moz-appearance:none; appearance:none;
    width:100% !important; padding:8px 34px 8px 13px !important;
    border:1.5px solid #cbd5e1 !important; border-radius:10px !important;
    font-family:inherit !important; font-size:14px !important; color:var(--vfx-ink) !important;
    background:#fff url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") no-repeat right 12px center/16px !important;
    box-shadow:none !important; height:auto !important; line-height:1.4 !important;
}
.cpp-vfx .vfx-filterbar { gap:16px !important; padding:24px !important; align-items:flex-end !important; }
.cpp-vfx .vfx-filter { min-width:170px; }

/* Unified marketplace search form: 4 dropdowns on top, a centered domain search,
   then a 4-up GRID of DA/DR/Traffic/Price ranges, then ONE Search button.
   The grid keeps the ranges evenly aligned instead of wrapping into ragged rows. */
.cpp-vfx .cpp-mp-filterform { max-width:980px !important; }
.cpp-vfx .cpp-mp-filterform-rows { flex:1 1 100%; display:flex; flex-direction:column; gap:14px; margin-top:6px; }

/* domain search — centered, not full-bleed, so it reads as one tidy field */
.cpp-vfx .cpp-mp-filterform .cpp-mp-hero-search-row { display:flex; justify-content:center; }
.cpp-vfx .cpp-mp-filterform .cpp-mp-hero-search-row > input[type=search] { width:100%; max-width:440px; padding:9px 14px; border:1.5px solid #cbd5e1; border-radius:9999px; font-family:inherit; font-size:14px; min-width:0; color:#0f172a !important; background:#fff !important; }
.cpp-vfx .cpp-mp-filterform .cpp-mp-hero-search-row > input[type=search]::placeholder { color:#94a3b8; }

/* ranges as an even 4-column grid (separated by a hairline above) */
.cpp-vfx .cpp-mp-filterform .cpp-mp-hero-search-row-compact {
    display:grid; grid-template-columns:repeat(4,1fr); gap:12px 16px; align-items:center;
    padding-top:14px; border-top:1px solid #eef2f7;
}
.cpp-vfx .cpp-mp-filterform .cpp-mp-mini-range { display:flex; align-items:center; gap:6px; justify-content:flex-start; }
.cpp-vfx .cpp-mp-filterform .cpp-mp-mini-range label { flex:0 0 auto; font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.cpp-vfx .cpp-mp-filterform .cpp-mp-mini-range input[type=number] { flex:1 1 0; width:0; min-width:0; padding:8px 9px; border:1.5px solid #cbd5e1; border-radius:8px; font-family:inherit; font-size:13px; }
.cpp-vfx .cpp-mp-filterform .cpp-mp-mini-range > span { color:#94a3b8; }
.cpp-vfx .cpp-mp-filterform-btn { flex:1 1 100%; max-width:220px; margin:8px auto 0 !important; height:40px; padding-top:0; padding-bottom:0; }

/* Make sure full-bleed sections truly span edge to edge and tables look clean */
.cpp-vfx .vfx-section { width:100%; }
.cpp-vfx .vfx-table { width:100% !important; }
.cpp-vfx .vfx-table th, .cpp-vfx .vfx-table td { padding:15px 18px !important; }

/* Buttons inside hero keep pill shape regardless of theme */
.cpp-vfx .vfx-btn { border-radius:9999px !important; text-decoration:none !important; }

/* ============ GAP FIXES (from user screenshot — abnormal white space) ============ */
/* Remove the theme's wrapper padding/margins around our full-bleed content. */
.page-container, .wraper_blog_main, #content, #primary, .site-main, .content-area {
    padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important;
}
.cpp-vfx { margin-top: 0 !important; margin-bottom: 0 !important; }
/* Tighten section padding so sections don't feel disconnected. */
.cpp-vfx .vfx-section { padding: 56px 20px !important; }
.cpp-vfx .vfx-hero, .cpp-vfx .vfx-hero2 { margin-bottom: 0 !important; }
/* Footer sits flush, no gap before it. */
.vfx-footer { margin-top: 0 !important; }
/* Kill empty theme banner space above content. */
.wraper-banner, .banner-default, .rt-banner, .theme-banner-wraper { display: none !important; height: 0 !important; }

/* ============ SLIDERS (press logos marquee + testimonials) ============ */
/* Press logos auto-scroll marquee like vefogix */
.cpp-vfx .vfx-press-logos {
    flex-wrap: nowrap !important; overflow: hidden; position: relative; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cpp-vfx .vfx-press-track {
    display: flex; gap: 56px; align-items: center; animation: vfx-marquee 28s linear infinite; width: max-content;
}
/* Uniform logo slots: every logo fits a fixed box regardless of its source aspect
   ratio, so no single wordmark (e.g. Mercury / Global Newswire) blows up in width. */
.cpp-vfx .vfx-press-track img {
    height: auto !important; width: auto !important;
    max-height: 30px; max-width: 120px; object-fit: contain;
    filter: grayscale(1); opacity: .65; flex: 0 0 auto;
}
.cpp-vfx .vfx-press-logos:hover .vfx-press-track { animation-play-state: paused; }
@keyframes vfx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Testimonials horizontal scroll-snap */
.cpp-vfx .vfx-testi-track {
    display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; -webkit-overflow-scrolling: touch;
}
.cpp-vfx .vfx-testi-track > .vfx-card { flex: 0 0 360px; scroll-snap-align: start; }
.cpp-vfx .vfx-testi-track::-webkit-scrollbar { height: 6px; }
.cpp-vfx .vfx-testi-track::-webkit-scrollbar-thumb { background: var(--vfx-line); border-radius: 9999px; }

/* ============ Hero search bar + tool chips + stars + breadcrumb ============ */
/* hero search bar (vefogix-style) */
.cpp-vfx .vfx-hero-search {
    display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 9999px;
    padding: 7px 7px 7px 18px; max-width: 580px; margin: 26px auto 0; box-shadow: 0 18px 50px rgba(0,0,0,.25);
}
.cpp-vfx .vfx-hero-search-ico { color: #94a3b8; font-size: 16px; }
.cpp-vfx .vfx-hero-search input {
    flex: 1; border: none; outline: none; font-family: inherit; font-size: 15px; color: #0f172a; background: transparent; padding: 10px 4px;
}
.cpp-vfx .vfx-hero-search .vfx-btn { flex: 0 0 auto; padding: 12px 26px; }

/* tool chips */
.cpp-vfx .vfx-hero2-logos { gap: 14px !important; }
.cpp-vfx .vfx-tool {
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 8px;
    padding: 7px 14px; font-size: 13.5px; font-weight: 700; color: #fff; letter-spacing: .01em;
}
.cpp-vfx .vfx-tool-semrush b { color: #ff642d; }
.cpp-vfx .vfx-tool-ahrefs { color: #ff8800; }
.cpp-vfx .vfx-tool-moz { color: #67c2e4; }
.cpp-vfx .vfx-tool-majestic { color: #6cc04a; }
.cpp-vfx .vfx-tool-ga { color: #f9ab00; }

/* testimonial star rating */
.cpp-vfx .vfx-stars { color: #fbbf24; font-size: 16px; letter-spacing: 2px; margin-bottom: 12px; }

/* breadcrumb color fix — the theme breadcrumb on cpp-vfx pages should be readable.
   Our pages are full-bleed so the breadcrumb usually isn't shown; force any that appears to navy text. */
.cpp-vfx .breadcrumb, .cpp-vfx .breadcrumb a, .breadcrumbs a, .breadcrumb a { color: #475569 !important; }
.breadcrumb .active, .breadcrumbs .active { color: #0f172a !important; }

/* ============ RICH CATALOG TABLE (vefogix-style) ============ */
.cpp-vfx .vfx-rtable-wrap { border:1px solid var(--vfx-line); border-radius:16px; overflow:hidden; box-shadow:var(--vfx-shadow); background:#fff; }
.cpp-vfx .vfx-rtable-head {
    display:flex; justify-content:space-between; align-items:center; padding:18px 22px; border-bottom:1px solid var(--vfx-line);
    background:#f8fafc; flex-wrap:wrap; gap:12px;
}
.cpp-vfx .vfx-rtable-head h3 { font-size:18px; font-weight:800; color:var(--vfx-blue); margin:0; }
.cpp-vfx .vfx-rtable-search { display:flex; gap:8px; }
.cpp-vfx .vfx-rtable-search input { border:1px solid #cbd5e1; border-radius:8px; padding:8px 12px; font-size:13px; min-width:160px; }
.cpp-vfx .vfx-rtable { width:100%; border-collapse:collapse; min-width:980px; }
.cpp-vfx .vfx-rtable thead th {
    background:#FBF0DA; color:#475569; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
    padding:13px 14px; text-align:left; border-bottom:1px solid var(--vfx-line); white-space:nowrap;
}
.cpp-vfx .vfx-rtable td { padding:14px; border-bottom:1px solid #eef2f7; vertical-align:top; font-size:13.5px; color:#0f172a; }
.cpp-vfx .vfx-rtable tr:hover td { background:#fafcff; }

/* price cell */
.cpp-vfx .vfx-rt-price { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.cpp-vfx .vfx-rt-price .vfx-rt-amt { font-weight:800; font-size:15px; color:#0f172a; }
.cpp-vfx .vfx-rt-price .vfx-rt-amt small { color:#94a3b8; font-weight:600; }
.cpp-vfx .vfx-rt-buy { background:var(--vfx-grad); color:#fff; border-radius:8px; padding:8px 20px; font-weight:700; font-size:13px; text-decoration:none; display:inline-block; }
.cpp-vfx .vfx-rt-buy:hover { color:#fff; opacity:.92; }

/* website cell */
.cpp-vfx .vfx-rt-site { font-weight:700; color:var(--vfx-blue); margin-bottom:10px; display:flex; align-items:center; gap:4px; font-size:14.5px; min-width:0; flex-wrap:wrap; }
.cpp-vfx .vfx-rt-site img { width:18px; height:18px; border-radius:4px; flex:0 0 18px; }
.cpp-vfx .vfx-rt-site a { color:var(--vfx-blue); }
.cpp-vfx .vfx-rt-site .vfx-rt-dom-link { min-width:0; flex:1 1 auto; white-space:normal; word-break:break-word; overflow-wrap:anywhere; }
.cpp-vfx .vfx-rt-meta { display:flex; flex-direction:column; gap:7px; }
.cpp-vfx .vfx-rt-meta span { font-size:12.5px; color:#94a3b8; display:flex; align-items:center; gap:7px; white-space:nowrap; }
.cpp-vfx .vfx-rt-meta b { color:#334155; background:#f1f5f9; border-radius:6px; padding:2px 9px; font-weight:600; }

/* category chips */
.cpp-vfx .vfx-rt-cat { display:inline-flex; align-items:center; gap:5px; background:#FBF0DA; color:#EEB541; border-radius:6px; padding:4px 10px; font-size:12px; font-weight:600; margin:0 4px 4px 0; }
.cpp-vfx .vfx-rt-cat .vfx-ic { width:13px; height:13px; }

/* traffic */
.cpp-vfx .vfx-rt-traffic { display:flex; align-items:center; gap:6px; font-weight:700; }
.cpp-vfx .vfx-rt-traffic::before { content:"📈"; font-size:13px; }

/* metric badges (DR/DA) */
.cpp-vfx .vfx-rt-metrics { display:flex; flex-direction:column; gap:6px; }
.cpp-vfx .vfx-rt-metric { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:#475569; }
.cpp-vfx .vfx-rt-metric .vfx-rt-chip { background:#f1f5f9; border-radius:6px; padding:3px 9px; font-weight:800; color:#0f172a; min-width:34px; text-align:center; }
.cpp-vfx .vfx-rt-metric.is-dr .vfx-rt-chip { background:#fef3c7; }
.cpp-vfx .vfx-rt-metric.is-da .vfx-rt-chip { background:#FDF1D6; }

/* pagination */
.cpp-vfx .vfx-rt-foot { display:flex; justify-content:flex-end; align-items:center; gap:6px; padding:18px 22px; }
.cpp-vfx .vfx-rt-foot a, .cpp-vfx .vfx-rt-foot span { padding:7px 12px; border-radius:8px; font-size:13px; font-weight:600; color:#475569; text-decoration:none; }
.cpp-vfx .vfx-rt-foot a:hover { background:#FBF0DA; color:var(--vfx-blue); }
.cpp-vfx .vfx-rt-foot .is-current { background:var(--vfx-blue); color:#fff; }

@media (max-width:900px){ .cpp-vfx .vfx-rtable-wrap { overflow-x:auto; } }

/* ============ Popular Service + Featured Packages ============ */
.cpp-vfx .vfx-pop { text-decoration:none; display:block; }
.cpp-vfx .vfx-pop-ico { width:54px; height:54px; border-radius:14px; display:grid; place-items:center; font-size:24px; margin-bottom:16px; }
.cpp-vfx .vfx-pop-ico .vfx-ic { width:26px; height:26px; }
.cpp-vfx .vfx-pop h3 { color:var(--vfx-ink); }

/* ---- Lucide icon system: container fits across the homepage ---- */
/* flexible-services cards now use a brand-tinted icon tile (was cartoon SVG) */
.cpp-vfx .vfx-flex-ic { width:64px; height:64px; flex:0 0 64px; border-radius:16px; display:grid; place-items:center; color:var(--vfx-blue);
    background:linear-gradient(135deg, rgba(198,145,42,.10), rgba(247,210,138,.10)), #fff; box-shadow:inset 0 0 0 1px rgba(198,145,42,.12); }
.cpp-vfx .vfx-flex-ic .vfx-ic { width:30px; height:30px; }
/* hero search icon */
.cpp-vfx .vfx-hero-search-ico .vfx-ic { width:20px; height:20px; }
/* catalog meta inline icons (link / turnaround / country) */
.cpp-vfx .vfx-rt-meta span .vfx-ic { width:14px; height:14px; color:var(--vfx-blue); flex:none; }
/* save (heart) — outline by default, filled indigo when saved */
.cpp-vfx .vfx-rt-fav { color:#cbd5e1; display:inline-flex; }
.cpp-vfx .vfx-rt-fav:hover { color:var(--vfx-blue); }
.cpp-vfx .vfx-rt-fav.is-fav { color:var(--vfx-blue); }
.cpp-vfx .vfx-rt-fav.is-fav .vfx-ic { fill:var(--vfx-blue); }
.cpp-vfx .vfx-rt-flag { color:#cbd5e1; display:inline-flex; cursor:pointer; }
.cpp-vfx .vfx-rt-flag:hover { color:#ef4444; }
.cpp-vfx .vfx-pop .vfx-card-link { color:var(--vfx-blue); font-weight:700; }

/* ===== Featured packages: premium pricing cards (2026 redesign) ===== */
.cpp-vfx .vfx-pkg {
    position:relative; display:flex; flex-direction:column; text-align:left;
    background:var(--vfx-card); border:1px solid var(--vfx-line); border-radius:20px;
    padding:30px 26px 28px; box-shadow:0 1px 2px rgba(15,35,95,.04);
    transition:transform .22s, box-shadow .22s, border-color .22s; overflow:hidden;
}
.cpp-vfx .vfx-pkg:hover { transform:translateY(-6px); box-shadow:var(--vfx-shadow-lg); border-color:rgba(198,145,42,.22); }
/* popular card: lifted, ringed, gradient top accent bar */
.cpp-vfx .vfx-pkg.is-popular { border:1.5px solid transparent; box-shadow:var(--vfx-shadow-lg); transform:translateY(-8px);
    background:
        linear-gradient(var(--vfx-card),var(--vfx-card)) padding-box,
        var(--vfx-grad) border-box; }
.cpp-vfx .vfx-pkg.is-popular:hover { transform:translateY(-12px); }
.cpp-vfx .vfx-pkg.is-popular::before { content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--vfx-grad); }
.cpp-vfx .vfx-pkg-tag { position:static; transform:none; display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
    background:var(--vfx-grad); color:#fff; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
    padding:6px 14px; border-radius:9999px; margin-bottom:14px; box-shadow:0 6px 16px rgba(198,145,42,.3); }
.cpp-vfx .vfx-pkg:not(.is-popular) .vfx-pkg-badge { margin-top:0; }
.cpp-vfx .vfx-pkg-badge { font-size:12px; font-weight:700; color:var(--vfx-blue); text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; }
.cpp-vfx .vfx-pkg-price { font-size:38px; font-weight:800; color:var(--vfx-ink); margin:0 0 4px; letter-spacing:-.03em; line-height:1.05; }
.cpp-vfx .vfx-pkg.is-popular .vfx-pkg-price { color:#0f172a; }
.cpp-vfx .vfx-pkg-price small { font-size:14px; font-weight:600; color:var(--vfx-muted); -webkit-text-fill-color:var(--vfx-muted); }
/* local-currency price + 'billed in USD' note (must NOT inherit the popular card's
   transparent text-fill, so force its own colour) */
.cpp-vfx .vfx-pkg-usd {
    display:block; margin-top:6px; font-size:12px; font-weight:600; letter-spacing:normal;
    color:#94a3b8 !important; -webkit-text-fill-color:#94a3b8 !important; background:none !important;
}
.cpp-vfx .vfx-pkg-list { list-style:none !important; padding:0; margin:18px 0 24px; text-align:left; flex:1; }
.cpp-vfx .vfx-pkg-list li { list-style:none !important; display:flex; align-items:flex-start; gap:10px; padding:8px 0; font-size:14.5px; color:var(--vfx-body); border:0; line-height:1.5; }
.cpp-vfx .vfx-pkg-list li::marker { content:none; }
/* leading circular check badge as an inline flex child (no overlap with text) */
.cpp-vfx .vfx-pkg-list li::before {
    content:"✓"; flex:none; width:20px; height:20px; border-radius:50%;
    background:rgba(198,145,42,.10); color:var(--vfx-blue);
    font-size:12px; font-weight:800; line-height:20px; text-align:center; margin-top:1px;
}
.cpp-vfx .vfx-pkg.is-popular .vfx-pkg-list li::before { background:rgba(198,145,42,.16); }
.cpp-vfx .vfx-pkg .vfx-btn-block { margin-top:auto; }
.cpp-vfx .vfx-btn-block { display:flex; width:100%; margin-top:auto; }

/* ============ Marketplace account system ============ */
.cpp-vfx .vfx-auth-card { background:#fff; border:1px solid var(--vfx-line); border-radius:18px; box-shadow:var(--vfx-shadow); padding:36px; }
.cpp-vfx .vfx-auth-form label { display:block; font-weight:600; font-size:13.5px; color:var(--vfx-ink); margin-bottom:16px; }
.cpp-vfx .vfx-auth-form .vfx-opt { color:#94a3b8; font-weight:400; }
.cpp-vfx .vfx-auth-form input, .cpp-vfx .vfx-auth-form select {
    width:100%; margin-top:6px; padding:12px 14px; border:1.5px solid #cbd5e1; border-radius:10px; font-family:inherit; font-size:15px; box-sizing:border-box;
}
.cpp-vfx .vfx-auth-form input:focus, .cpp-vfx .vfx-auth-form select:focus { outline:none; border-color:var(--vfx-blue); }
.cpp-vfx .vfx-auth-err { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; padding:12px 16px; border-radius:10px; font-size:14px; margin-bottom:18px; }
.cpp-vfx .vfx-auth-alt { text-align:center; margin-top:20px; color:#64748b; font-size:14px; }
.cpp-vfx .vfx-auth-alt a { color:var(--vfx-blue); font-weight:700; }

.cpp-vfx .vfx-acct-nav { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--vfx-line); margin-bottom:28px; flex-wrap:wrap; gap:12px; }
.cpp-vfx .vfx-acct-nav-links { display:flex; gap:6px; flex-wrap:wrap; }
.cpp-vfx .vfx-acct-nav-links a { padding:12px 18px; font-weight:600; font-size:15px; color:#64748b; text-decoration:none; border-bottom:2px solid transparent; }
.cpp-vfx .vfx-acct-nav-links a.is-active, .cpp-vfx .vfx-acct-nav-links a:hover { color:var(--vfx-blue); border-bottom-color:var(--vfx-blue); }
.cpp-vfx .vfx-acct-logout { color:#94a3b8; font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; }
.cpp-vfx .vfx-acct-logout:hover { color:#ef4444; }
/* Mobile: keep the tabs on ONE row that scrolls sideways instead of wrapping into
   a ragged block — consistent across every publisher/account internal page. */
@media (max-width: 640px) {
  .cpp-vfx .vfx-acct-nav { flex-wrap:nowrap; gap:8px; margin-bottom:22px; }
  .cpp-vfx .vfx-acct-nav-links { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:2px; flex:1 1 auto; }
  .cpp-vfx .vfx-acct-nav-links::-webkit-scrollbar { display:none; }
  .cpp-vfx .vfx-acct-nav-links a { padding:10px 13px; font-size:14px; white-space:nowrap; }
  .cpp-vfx .vfx-acct-logout { flex:0 0 auto; }
}

/* ============ Cart / checkout / pay ============ */
.cpp-vfx .vfx-rt-remove { color:#94a3b8; font-size:16px; text-decoration:none; padding:6px; }
.cpp-vfx .vfx-rt-remove:hover { color:#ef4444; }
.cpp-vfx .vfx-qty { display:inline-flex; align-items:center; gap:2px; border:1px solid #e2e8f0; border-radius:9px; overflow:hidden; background:#fff; }
.cpp-vfx .vfx-qty-btn { width:28px; height:30px; border:0; background:#f8fafc; color:#334155; font-size:16px; line-height:1; cursor:pointer; font-weight:700; transition:background .15s; }
.cpp-vfx .vfx-qty-btn:hover:not(:disabled) { background:#FBF0DA; color:#EEB541; }
.cpp-vfx .vfx-qty-btn:disabled { opacity:.4; cursor:default; }
.cpp-vfx .vfx-qty-num { min-width:26px; text-align:center; font-weight:700; font-size:14px; color:#0f172a; }
.cpp-vfx .vfx-qty-unit { display:block; font-size:11px; font-weight:500; color:#94a3b8; margin-top:1px; }
.cpp-vfx .vfx-cart-summary h3 { margin-bottom:18px; }
.cpp-vfx .vfx-cart-row { display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid #f1f5f9; font-size:14px; color:#475569; }
.cpp-vfx .vfx-cart-row b { color:var(--vfx-ink); }
.cpp-vfx .vfx-cart-total { border-bottom:none; border-top:2px solid var(--vfx-line); margin-top:6px; padding-top:14px; font-size:17px; }
.cpp-vfx .vfx-cart-total b { color:var(--vfx-blue); font-size:20px; }
.cpp-vfx .vfx-cart-summary .vfx-btn-block { margin-top:18px; }
.cpp-vfx .vfx-cart-cont { display:block; text-align:center; margin-top:14px; color:#64748b; font-size:14px; text-decoration:none; }
/* coupon row — input + Apply fit neatly INSIDE the summary card (no overflow) */
.cpp-vfx .vfx-coupon-row { display:flex; gap:8px; margin:14px 0; width:100%; box-sizing:border-box; }
.cpp-vfx .vfx-coupon-input { flex:1 1 auto; min-width:0; box-sizing:border-box; border:1px solid #cbd5e1; border-radius:10px; padding:10px 12px; font-size:14px; }
.cpp-vfx .vfx-coupon-input:focus { outline:none; border-color:var(--vfx-blue); box-shadow:0 0 0 3px rgba(198,145,42,.12); }
.cpp-vfx .vfx-coupon-apply { flex:0 0 auto; white-space:nowrap; border:1px solid #F1E4C4; background:#fff; color:var(--vfx-blue); font-weight:700; font-size:14px; border-radius:10px; padding:10px 16px; cursor:pointer; transition:.15s; }
.cpp-vfx .vfx-coupon-apply:hover { background:#f5f6ff; border-color:var(--vfx-blue); }
.cpp-vfx .vfx-cart-cont:hover { color:var(--vfx-blue); }
.cpp-vfx .vfx-auth-form textarea { width:100%; margin-top:6px; padding:12px 14px; border:1.5px solid #cbd5e1; border-radius:10px; font-family:inherit; font-size:15px; box-sizing:border-box; resize:vertical; }

.cpp-vfx .vfx-pay-methods { display:flex; flex-direction:column; gap:12px; }
.cpp-vfx .vfx-pay-method { display:flex; align-items:center; gap:14px; padding:16px 18px; border:1.5px solid var(--vfx-line); border-radius:12px; cursor:pointer; transition:.15s; }
.cpp-vfx .vfx-pay-method:hover { border-color:var(--vfx-blue); background:#f8fbff; }
.cpp-vfx .vfx-pay-method input { width:18px; height:18px; }
.cpp-vfx .vfx-pay-method b { display:block; color:var(--vfx-ink); }
.cpp-vfx .vfx-pay-method span { font-size:13px; color:#64748b; }

/* header cart icon */
.vfx-nav-cart { position:relative; color:#0f172a; font-size:20px; text-decoration:none; margin-right:6px; }
.vfx-nav-cart .vfx-cart-count { position:absolute; top:-8px; right:-10px; background:var(--vfx-blue,#EEB541); color:#fff; font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:9999px; display:grid; place-items:center; padding:0 4px; }

@media (max-width:760px){ .cpp-vfx .vfx-grid[style*="340px"] { grid-template-columns:1fr !important; } }

/* field-level form error */
.cpp-vfx .vfx-fielderr { display:block; color:#ef4444; font-size:12.5px; font-weight:600; margin-top:5px; }

/* ============ SEO tools ============ */
.cpp-vfx .vfx-tool-hero { padding:70px 20px 60px; }
.cpp-vfx .vfx-tool-stat { background:#f8fafc; border:1px solid var(--vfx-line); border-radius:12px; padding:18px 12px; text-align:center; }
.cpp-vfx .vfx-tool-stat b { display:block; font-size:26px; font-weight:800; color:var(--vfx-blue); }
.cpp-vfx .vfx-tool-stat span { font-size:12.5px; color:#64748b; }
.cpp-vfx .vfx-tool-out { background:#0f172a; color:#e2e8f0; border-radius:10px; padding:16px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; line-height:1.6; white-space:pre-wrap; word-break:break-word; overflow-x:auto; margin-bottom:14px; max-height:340px; }

/* ============ Hero2 gold accent + credit booster + offers popup ============ */
.cpp-vfx .vfx-hero2 h1 .hl { color:#0f172a !important; }

/* booster tiers (wallet) */
.cpp-vfx .vfx-booster-tiers { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.cpp-vfx .vfx-booster-tier { background:#f8fafc; border:1.5px solid var(--vfx-line); border-radius:12px; padding:14px 8px; cursor:pointer; text-align:center; transition:.15s; }
.cpp-vfx .vfx-booster-tier:hover { border-color:var(--vfx-blue); background:#FBF0DA; }
.cpp-vfx .vfx-booster-amt { display:block; font-weight:800; color:var(--vfx-ink); font-size:14px; }
.cpp-vfx .vfx-booster-bonus { display:block; color:#16a34a; font-weight:800; font-size:13px; margin-top:3px; }

/* ===== Exclusive Offers popup (2026 redesign) ===== */
.vfx-promo-overlay { position:fixed; inset:0; background:rgba(7,17,40,.6); backdrop-filter:blur(4px); z-index:99999; display:flex; align-items:center; justify-content:center; padding:18px; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; animation:vfxPromoFade .25s ease; }
@keyframes vfxPromoFade { from{opacity:0} to{opacity:1} }
.vfx-promo-card { background:#fff; border-radius:24px; max-width:560px; width:100%; max-height:92vh; overflow:auto; padding:26px 26px 22px; position:relative; box-shadow:0 40px 100px rgba(8,15,40,.45); animation:vfxPromoPop .35s cubic-bezier(.2,.9,.3,1.2); }
@keyframes vfxPromoPop { from{transform:translateY(16px) scale(.97);opacity:0} to{transform:none;opacity:1} }
.vfx-promo-x { position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%; background:#f1f5f9; border:none; font-size:22px; color:#64748b; cursor:pointer; line-height:1; display:grid; place-items:center; transition:background .15s,color .15s; }
.vfx-promo-x:hover { background:#e2e8f0; color:#0f172a; }
.vfx-promo-head { display:flex; gap:14px; align-items:center; margin-bottom:20px; padding-right:34px; }
.vfx-promo-ic { flex:none; width:50px; height:50px; border-radius:15px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#F7D28A,#EEB541 55%,#C6912A); box-shadow:0 10px 24px rgba(198,145,42,.35); }
.vfx-promo-ic .vfx-ic { width:24px; height:24px; }
.vfx-promo-head h3 { font-size:21px; font-weight:800; color:#0f172a; margin:0 0 3px; letter-spacing:-.02em; }
.vfx-promo-head p { font-size:13.5px; color:#64748b; margin:0; }

.vfx-promo-block { border:1px solid #eef0f4; border-radius:18px; padding:18px; margin-bottom:14px; }
.vfx-promo-block.is-new { background:linear-gradient(180deg,#faf7ff,#fff); border-color:#ece4fb; }
.vfx-promo-block.is-exist { background:linear-gradient(180deg,#f3fbf6,#fff); border-color:#d9f0e2; }
.vfx-promo-tag { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:5px 11px; border-radius:9999px; margin-bottom:10px; }
.vfx-promo-tag .vfx-ic { width:13px; height:13px; }
.vfx-promo-tag.is-new { background:#ede4fc; color:#C6912A; }
.vfx-promo-tag.is-exist { background:#d6f0e1; color:#15803d; }
.vfx-promo-block-title { font-size:19px; font-weight:800; color:#0f172a; margin-bottom:3px; }
.vfx-promo-mult { color:#C6912A; }
.vfx-promo-accent { color:#15803d; }
.vfx-promo-block-sub { font-size:13px; color:#64748b; margin:0 0 14px; }

.vfx-promo-match { display:flex; align-items:stretch; gap:10px; }
.vfx-promo-match-col { flex:1; background:#fff; border:1px solid #ece4fb; border-radius:13px; padding:12px; text-align:center; }
.vfx-promo-match-col span { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#94a3b8; margin-bottom:4px; }
.vfx-promo-match-col b { font-size:26px; font-weight:800; color:#0f172a; line-height:1; }
.vfx-promo-match-col small { display:block; font-size:10px; font-weight:700; text-transform:uppercase; color:#a78bfa; margin-top:4px; letter-spacing:.05em; }
.vfx-promo-match-col.is-bonus { background:linear-gradient(135deg,#f3ecff,#faf7ff); border-color:#d6c4f7; }
.vfx-promo-match-col.is-bonus b { color:#C6912A; }
.vfx-promo-plus { display:flex; align-items:center; color:#c4b5fd; }

.vfx-promo-tiers { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.vfx-promo-tier { background:#fff; border:1px solid #d9f0e2; border-radius:12px; padding:11px 5px; text-align:center; }
.vfx-promo-tier.is-top { background:linear-gradient(180deg,#dcfce7,#fff); border-color:#86efac; }
.vfx-promo-tier-add { display:block; font-size:12px; font-weight:700; color:#64748b; margin-bottom:6px; }
.vfx-promo-tier b { display:block; font-size:18px; font-weight:800; color:#15803d; line-height:1; }
.vfx-promo-tier small { display:block; font-size:10px; color:#94a3b8; margin-top:5px; }

.vfx-promo-cta { margin-top:6px; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.vfx-promo-cta .vfx-ic { width:16px; height:16px; }
.vfx-promo-fine { display:flex; align-items:center; justify-content:center; gap:6px; text-align:center; color:#94a3b8; font-size:12px; margin:13px 0 0; }
.vfx-promo-fine .vfx-ic { width:13px; height:13px; }
@media (max-width:560px){
  .vfx-promo-card { padding:20px 18px; }
  .vfx-promo-tiers { grid-template-columns:repeat(3,1fr); }
  .vfx-promo-match { flex-direction:row; }
}

/* ============ Order message thread ============ */
.cpp-vfx .vfx-msg-thread { display:flex; flex-direction:column; gap:14px; max-height:420px; overflow-y:auto; }
.cpp-vfx .vfx-msg { background:#f1f5f9; border-radius:12px; padding:12px 16px; max-width:80%; align-self:flex-start; }
.cpp-vfx .vfx-msg.is-mine { background:#FBF0DA; align-self:flex-end; }
.cpp-vfx .vfx-msg-meta { font-size:12px; color:#94a3b8; margin-bottom:4px; }
.cpp-vfx .vfx-msg-body { color:#0f172a; font-size:14.5px; line-height:1.5; }

/* ============ Hero v3 (matches vefogix screenshot: left-aligned, AI search) ============ */
.cpp-vfx .vfx-hero2-left { text-align:left; padding:80px 20px 60px; }
.cpp-vfx .vfx-hero2-left .vfx-hero2-inner { max-width:1180px; margin:0 auto; }
.cpp-vfx .vfx-hero2-left h1 { font-size:52px; line-height:1.12; font-weight:800; margin:0 0 14px; }
.cpp-vfx .vfx-hero2-left .vfx-hero2-sub { font-size:18px; color:#cbd5e1; margin:0 0 26px; max-width:none; }
.cpp-vfx .vfx-hero2-left .vfx-hero2-sub b { color:#fff; }
.cpp-vfx .vfx-hero-search-lg { max-width:680px; margin:0 0 18px; box-shadow:0 20px 50px rgba(0,0,0,.3); padding:8px 8px 8px 20px; }
.cpp-vfx .vfx-hero-search-lg .vfx-btn { padding:13px 30px; }
.cpp-vfx .vfx-hero-cats { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:30px; }
.cpp-vfx .vfx-hero-cats a { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); color:#fff; padding:9px 18px; border-radius:10px; font-size:14px; font-weight:600; text-decoration:none; transition:.15s; margin:0 !important; }
.cpp-vfx .vfx-hero-cats a:hover { background:rgba(255,255,255,.18); }
.cpp-vfx .vfx-hero-data-row { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
/* theme adds a large default margin to inline links/spans inside the hero — kill it so the gap is exactly the flex `gap` */
.cpp-vfx .vfx-hero-data-row > * { margin:0 !important; }
.cpp-vfx .vfx-hero-data-label { color:#94a3b8; font-size:13px; font-weight:700; }
.cpp-vfx .vfx-hero-data-row .vfx-tool { background:#fff; border:none; padding:8px 14px; border-radius:8px; font-weight:800; font-size:14px; }
.cpp-vfx .vfx-tool-wranker { color:#EEB541; } .cpp-vfx .vfx-tool-wranker b{color:#0f172a;}
.cpp-vfx .vfx-tool-semrush { color:#ff642d; }
.cpp-vfx .vfx-tool-majestic { color:#e91e63; }
.cpp-vfx .vfx-tool-ga { color:#f9ab00; }
.cpp-vfx .vfx-tool-ahrefs { color:#ff8800; text-transform:lowercase; }
.cpp-vfx .vfx-tool-moz { color:#4ba0f5; }
/* floating stats below hero */
.cpp-vfx .vfx-hero2-stats-float { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:-40px auto 0; position:relative; z-index:5; }
.cpp-vfx .vfx-hero2-stats-float > div { background:#fff !important; border:1px solid var(--vfx-line) !important; border-radius:14px; box-shadow:var(--vfx-shadow); padding:24px 16px; text-align:center; }
.cpp-vfx .vfx-hero2-stats-float b { display:block; font-size:30px; font-weight:800; color:var(--vfx-blue) !important; }
.cpp-vfx .vfx-hero2-stats-float span { font-size:13px; color:#64748b !important; }

/* ===== Homepage video banner ===== */
.cpp-vfx .vfx-videoband { position:relative; border-radius:22px; overflow:hidden; box-shadow:var(--vfx-shadow-lg);
    background:#0b1020; aspect-ratio:16/9; }
.cpp-vfx .vfx-videoband-el { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; border:0; }
/* subtle gradient ring so it sits as a premium framed media block */
.cpp-vfx .vfx-videoband::after { content:""; position:absolute; inset:0; border-radius:22px; pointer-events:none;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
@media (max-width:600px){ .cpp-vfx .vfx-videoband { border-radius:16px; } }
/* older browsers without aspect-ratio: fallback height */
@supports not (aspect-ratio:16/9){ .cpp-vfx .vfx-videoband { height:0; padding-bottom:56.25%; } }
@media (max-width:900px){ .cpp-vfx .vfx-hero2-left h1{font-size:34px;} .cpp-vfx .vfx-hero2-stats-float{grid-template-columns:1fr 1fr;} }

/* ============ Catalog table FULL (matches vefogix screenshot exactly) ============ */
.cpp-vfx .vfx-rtable-full th { background:#e8f0fc; color:#334155; font-weight:700; text-align:center; }
.cpp-vfx .vfx-rtable-full th:nth-child(1){text-align:left;}
.cpp-vfx .vfx-rtable-full td { text-align:center; vertical-align:middle; }
.cpp-vfx .vfx-rtable-full td:nth-child(1){text-align:left;}

/* Per-column widths sized to content (desktop). NEW column order: Website, Category,
   Traffic, DR|DA|AS, Backlinks, Domain Info, Price, No. of Deal. Website widest;
   light-data columns stay narrow. table-layout:fixed makes these authoritative. */
.cpp-vfx .vfx-rtable-full { table-layout:fixed; }
.cpp-vfx .vfx-rtable-full th:nth-child(1), .cpp-vfx .vfx-rtable-full td:nth-child(1) { width:25%; }  /* Website (widest) */
.cpp-vfx .vfx-rtable-full th:nth-child(2), .cpp-vfx .vfx-rtable-full td:nth-child(2) { width:9%;  }  /* Category */
.cpp-vfx .vfx-rtable-full th:nth-child(3), .cpp-vfx .vfx-rtable-full td:nth-child(3) { width:9%;  }  /* Traffic */
.cpp-vfx .vfx-rtable-full th:nth-child(4), .cpp-vfx .vfx-rtable-full td:nth-child(4) { width:12%; }  /* DR|DA|AS */
.cpp-vfx .vfx-rtable-full th:nth-child(5), .cpp-vfx .vfx-rtable-full td:nth-child(5) { width:14%; }  /* Backlinks */
.cpp-vfx .vfx-rtable-full th:nth-child(6), .cpp-vfx .vfx-rtable-full td:nth-child(6) { width:12%; }  /* Domain Info */
.cpp-vfx .vfx-rtable-full th:nth-child(7), .cpp-vfx .vfx-rtable-full td:nth-child(7) { width:10%; }  /* Price */
.cpp-vfx .vfx-rtable-full th:nth-child(8), .cpp-vfx .vfx-rtable-full td:nth-child(8) { width:9%;  }  /* No. of Deal */
/* let website cell content wrap nicely instead of clipping */
.cpp-vfx .vfx-rtable-full td:nth-child(1) .vfx-rt-site a { word-break:break-word; }
.cpp-vfx .vfx-rtable-full td:nth-child(1) .vfx-rt-meta b { white-space:normal; }

/* category icon chip */
.cpp-vfx .vfx-cat-ico { font-style:normal; display:inline-flex; align-items:center; line-height:1; }
.cpp-vfx .vfx-cat-ico .vfx-ic { width:13px; height:13px; }

/* ============================================================
   VEFOGIX-STYLE catalog table (.vfx-rtable-vfgx) — 100% match
   Cols: Price | Website | Category | Traffic | DR | DA | AS |
         Backlinks | Domain Info | No. of Deal
   ============================================================ */
.cpp-vfx .vfx-rtable-vfgx { width:100%; border-collapse:separate; border-spacing:0; min-width:1180px; table-layout:fixed; font-family:'Inter',sans-serif; }
/* header row — light blue */
.cpp-vfx .vfx-rtable-vfgx thead th {
    background:#FBF0DA; color:#334155; font-weight:700; font-size:13px; text-align:center;
    padding:14px 8px; border-bottom:1px solid #dbe5f3; white-space:nowrap; vertical-align:middle;
}
.cpp-vfx .vfx-rtable-vfgx thead th:nth-child(1) { text-align:left; padding-left:18px; }
.cpp-vfx .vfx-th-sort { display:inline-flex; vertical-align:middle; color:#9db2cd; margin-left:2px; }
.cpp-vfx .vfx-th-sort .vfx-ic, .cpp-vfx .vfx-th-i .vfx-ic { width:13px; height:13px; }
.cpp-vfx .vfx-th-i { display:inline-flex; vertical-align:middle; color:#9db2cd; margin-left:3px; }
/* body cells */
.cpp-vfx .vfx-rtable-vfgx td { padding:16px 8px; border-bottom:1px solid #eef2f7; vertical-align:middle; text-align:center; font-size:13px; color:#0f172a; }
.cpp-vfx .vfx-rtable-vfgx td[data-label="Website"] { text-align:left; padding-left:18px; }
.cpp-vfx .vfx-rtable-vfgx tbody tr:nth-child(even) td { background:#fbfcfe; }
.cpp-vfx .vfx-rtable-vfgx tbody tr:hover td { background:#f4f8ff; }

/* column widths */
.cpp-vfx .vfx-rtable-vfgx th:nth-child(1),.cpp-vfx .vfx-rtable-vfgx td:nth-child(1){ width:20%; } /* Website (first, widest) */
.cpp-vfx .vfx-rtable-vfgx th:nth-child(2),.cpp-vfx .vfx-rtable-vfgx td:nth-child(2){ width:9%;  } /* Price */
.cpp-vfx .vfx-rtable-vfgx th:nth-child(3),.cpp-vfx .vfx-rtable-vfgx td:nth-child(3){ width:10%; } /* Category */
.cpp-vfx .vfx-rtable-vfgx th:nth-child(4),.cpp-vfx .vfx-rtable-vfgx td:nth-child(4){ width:9%;  } /* Traffic */
.cpp-vfx .vfx-rtable-vfgx th:nth-child(5),.cpp-vfx .vfx-rtable-vfgx td:nth-child(5){ width:7%;  } /* DR */
.cpp-vfx .vfx-rtable-vfgx th:nth-child(6),.cpp-vfx .vfx-rtable-vfgx td:nth-child(6){ width:7%;  } /* DA */
.cpp-vfx .vfx-rtable-vfgx th:nth-child(7),.cpp-vfx .vfx-rtable-vfgx td:nth-child(7){ width:7%;  } /* AS */
.cpp-vfx .vfx-rtable-vfgx th:nth-child(8),.cpp-vfx .vfx-rtable-vfgx td:nth-child(8){ width:13%; } /* Backlinks */
.cpp-vfx .vfx-rtable-vfgx th:nth-child(9),.cpp-vfx .vfx-rtable-vfgx td:nth-child(9){ width:11%; } /* Domain Info */
.cpp-vfx .vfx-rtable-vfgx th:nth-child(10),.cpp-vfx .vfx-rtable-vfgx td:nth-child(10){ width:8%; } /* No. of Deal */

/* checkbox-first variant (marketplace list): shift all columns +1 for the select box */
/* 9 columns after removing AS + No. of Deal. The freed space goes to Website so the
   full domain shows without truncation. Order: Select, Website, Price, Category,
   Traffic, DR, DA, Backlinks, Domain Info. */
.cpp-vfx .vfx-rtable-vfgx-cb { min-width:1080px; }
.cpp-vfx .vfx-rtable-vfgx-cb thead th:nth-child(1) { text-align:center; padding-left:8px; } /* checkbox header centred, not left */
.cpp-vfx .vfx-rtable-vfgx-cb thead th:nth-child(2) { text-align:left; padding-left:18px; }    /* Website header left */
.cpp-vfx .vfx-rtable-vfgx-cb th:nth-child(1),.cpp-vfx .vfx-rtable-vfgx-cb td:nth-child(1){ width:34px; }      /* Select */
.cpp-vfx .vfx-rtable-vfgx-cb th:nth-child(2),.cpp-vfx .vfx-rtable-vfgx-cb td:nth-child(2){ width:30%; }       /* Website (widened) */
.cpp-vfx .vfx-rtable-vfgx-cb th:nth-child(3),.cpp-vfx .vfx-rtable-vfgx-cb td:nth-child(3){ width:9%;  }       /* Price */
.cpp-vfx .vfx-rtable-vfgx-cb th:nth-child(4),.cpp-vfx .vfx-rtable-vfgx-cb td:nth-child(4){ width:11%; }       /* Category */
.cpp-vfx .vfx-rtable-vfgx-cb th:nth-child(5),.cpp-vfx .vfx-rtable-vfgx-cb td:nth-child(5){ width:10%; }       /* Traffic */
.cpp-vfx .vfx-rtable-vfgx-cb th:nth-child(6),.cpp-vfx .vfx-rtable-vfgx-cb td:nth-child(6){ width:8%;  }       /* DR */
.cpp-vfx .vfx-rtable-vfgx-cb th:nth-child(7),.cpp-vfx .vfx-rtable-vfgx-cb td:nth-child(7){ width:8%;  }       /* DA */
.cpp-vfx .vfx-rtable-vfgx-cb th:nth-child(8),.cpp-vfx .vfx-rtable-vfgx-cb td:nth-child(8){ width:14%; }       /* Backlinks */
.cpp-vfx .vfx-rtable-vfgx-cb th:nth-child(9),.cpp-vfx .vfx-rtable-vfgx-cb td:nth-child(9){ width:auto; }      /* Domain Info */
/* Let the full domain wrap/show instead of being clipped to one truncated line. */
.cpp-vfx .vfx-rtable-vfgx-cb td:nth-child(2) .vfx-rt-dom-link { white-space:normal; word-break:break-word; overflow-wrap:anywhere; }

/* ---- Price cell ---- */
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-price { display:flex; align-items:center; gap:8px; justify-content:flex-start; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-buy { background:var(--vfx-blue); color:#fff; border-radius:8px; padding:9px 16px; font-weight:600; font-size:13px; text-decoration:none; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-buy:hover { background:var(--vfx-blue-600); color:#fff; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-amt { font-weight:700; font-size:14px; color:#0f172a; line-height:1.15; text-align:left; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-amt small { color:#94a3b8; font-weight:600; font-size:11px; }

/* ===== Locked price (hidden until the visitor signs in) ===== */
/* the blurred number — unreadable but shows there IS a price. Unscoped so it works
   in both the .cpp-vfx tables AND the .cpp-mp-* detail page. */
.vfx-price-blur { filter:blur(5px) !important; -webkit-filter:blur(5px) !important; user-select:none; pointer-events:none; letter-spacing:1px; }
.cpp-vfx .vfx-rt-amt-locked { text-decoration:none; color:#0f172a; cursor:pointer; display:inline-block; }
.cpp-vfx .vfx-rt-amt-locked small { color:#94a3b8; }
/* "Sign in" button replacing Buy when logged out */
.cpp-vfx .vfx-rt-buy-locked { display:inline-flex; align-items:center; gap:5px; background:#FBF0DA !important; color:var(--vfx-blue) !important; border:1px solid #F1E4C4; }
.cpp-vfx .vfx-rt-buy-locked:hover { background:#e0e6ff !important; color:var(--vfx-blue) !important; }
.cpp-vfx .vfx-rt-buy-locked .vfx-ic { width:13px; height:13px; }
/* detail page big locked price */
.cpp-vfx .vfx-amt-locked-lg, .cpp-mp-buy-amount.vfx-amt-locked-lg { text-decoration:none; color:inherit; cursor:pointer; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-icons { display:flex; flex-direction:column; gap:5px; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-fav, .cpp-vfx .vfx-rtable-vfgx .vfx-rt-flag {
    width:26px; height:26px; border:1px solid #e2e8f0; border-radius:7px; display:grid; place-items:center; color:#94a3b8; background:#fff; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-fav:hover { color:#ec4899; border-color:#fbcfe8; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-fav.is-fav { color:#ec4899; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-fav.is-fav .vfx-ic { fill:#ec4899; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-flag:hover { color:#ef4444; border-color:#fecaca; }

/* ---- Website cell ---- */
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-site { display:flex; align-items:center; gap:7px; margin-bottom:9px; font-weight:700; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-ext { color:#22c55e; display:inline-flex; flex:none; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-site img { width:18px; height:18px; border-radius:4px; flex:none; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-dom-link { color:var(--vfx-blue); font-size:14px; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-meta { display:flex; flex-direction:column; gap:6px; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-meta span { display:flex; align-items:center; gap:6px; font-size:12px; color:#94a3b8; white-space:nowrap; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-meta span .vfx-ic { width:13px; height:13px; color:#F0C060; flex:none; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-meta b { color:#475569; background:#f1f5f9; border-radius:6px; padding:2px 9px; font-weight:600; font-size:12px; }

/* ---- Category cell ---- */
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-cats { display:flex; flex-direction:column; align-items:center; gap:6px; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-cat { background:#FBF0DA; color:#3b6fd4; border-radius:7px; padding:5px 12px; font-size:12px; font-weight:600; white-space:nowrap; }

/* ---- Traffic cell ---- */
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-traffic { display:flex; flex-direction:column; align-items:center; gap:4px; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-traffic-n { display:flex; align-items:center; gap:6px; font-weight:700; font-size:14px; color:#0f172a; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-trf-ico { width:16px; height:16px; border-radius:4px; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-traffic-sub { font-size:11.5px; color:#94a3b8; }

/* ---- DR / DA / AS metric cells ---- */
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-metric { display:inline-flex; align-items:center; gap:6px; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-mlbl { font-size:13px; font-weight:700; color:#475569; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-toolico { width:18px; height:18px; border-radius:4px; object-fit:contain; flex:none; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-pill { background:#eef1f6; border-radius:9999px; padding:4px 11px; font-weight:700; font-size:13px; color:#0f172a; min-width:30px; text-align:center; }

/* ---- Backlinks cell ---- */
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-bl { font-weight:700; font-size:13.5px; margin-bottom:8px; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-bl .g { color:#16a34a; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-bl .g2 { color:#475569; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-bl-badges { display:flex; gap:6px; justify-content:center; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-bl-badges span { font-size:11px; font-weight:600; border-radius:6px; padding:3px 9px; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-bl-badges .ok { background:#dcfce7; color:#15803d; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-bl-badges .no { background:#f1f5f9; color:#64748b; }

/* ---- Domain Info cell ---- */
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-dom { display:grid; grid-template-columns:auto auto; gap:4px 8px; justify-content:center; align-items:center; font-size:12.5px; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-dom span { color:#94a3b8; text-align:right; }
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-dom b { color:#0f172a; font-weight:700; text-align:left; }

/* ---- No. of Deal ---- */
.cpp-vfx .vfx-rtable-vfgx .vfx-rt-deal { font-size:15px; font-weight:800; color:#0f172a; }

/* ---- title flame ---- */
.cpp-vfx .vfx-rt-warn { display:inline-flex; vertical-align:middle; color:#f97316; }
.cpp-vfx .vfx-rt-warn .vfx-ic { width:18px; height:18px; }

/* ---- pagination (vefogix style) ---- */
.cpp-vfx .vfx-rt-foot-vfgx { justify-content:flex-end; gap:5px; flex-wrap:wrap; }
.cpp-vfx .vfx-rt-foot-vfgx a, .cpp-vfx .vfx-rt-foot-vfgx > span { padding:0; min-width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:7px; font-size:13px; font-weight:600; color:#475569; text-decoration:none; }
.cpp-vfx .vfx-rt-foot-vfgx a:hover { background:#FBF0DA; color:var(--vfx-blue); }
.cpp-vfx .vfx-rt-foot-vfgx .is-current { background:var(--vfx-blue); color:#fff; }
.cpp-vfx .vfx-rt-foot-vfgx .vfx-rt-pg-arrow { color:#94a3b8; border:1px solid #e2e8f0; }
.cpp-vfx .vfx-rt-foot-vfgx .vfx-rt-pg-dots { color:#94a3b8; letter-spacing:1px; }
.cpp-vfx .vfx-rt-foot-vfgx .vfx-rt-pg-goto { color:#64748b; font-weight:500; gap:6px; min-width:auto; padding:0 4px; }
.cpp-vfx .vfx-rt-pg-input { width:46px; height:30px; border:1px solid #cbd5e1; border-radius:7px; padding:0 8px; font-size:13px; }
.cpp-vfx .vfx-rt-pg-goto { display:inline-flex; align-items:center; }

/* The marketplace LIST table (.vfx-rtable, NOT -full, 7 cols) had no column sizing,
   so long domains overflowed and overlapped the category badge. Size it to content
   and let the domain wrap. Scoped to the catalog table only (not the cart grid). */
.cpp-vfx .vfx-rtable-wrap:not(.vfx-cart-grid) > div > table.vfx-rtable:not(.vfx-rtable-full),
.cpp-vfx .vfx-rtable-wrap:not(.vfx-cart-grid) > table.vfx-rtable:not(.vfx-rtable-full) { table-layout:fixed; }
/* NEW order: Website, Category, Traffic, DR|DA, Links, Price, No. of Deal */
.cpp-vfx table.vfx-rtable:not(.vfx-rtable-full) th:nth-child(1), .cpp-vfx table.vfx-rtable:not(.vfx-rtable-full) td:nth-child(1) { width:30%; text-align:left; } /* Website (widest) */
.cpp-vfx table.vfx-rtable:not(.vfx-rtable-full) th:nth-child(2), .cpp-vfx table.vfx-rtable:not(.vfx-rtable-full) td:nth-child(2) { width:14%; } /* Category */
.cpp-vfx table.vfx-rtable:not(.vfx-rtable-full) th:nth-child(3), .cpp-vfx table.vfx-rtable:not(.vfx-rtable-full) td:nth-child(3) { width:11%; } /* Traffic */
.cpp-vfx table.vfx-rtable:not(.vfx-rtable-full) th:nth-child(4), .cpp-vfx table.vfx-rtable:not(.vfx-rtable-full) td:nth-child(4) { width:14%; } /* DR|DA */
.cpp-vfx table.vfx-rtable:not(.vfx-rtable-full) th:nth-child(5), .cpp-vfx table.vfx-rtable:not(.vfx-rtable-full) td:nth-child(5) { width:11%; } /* Links */
.cpp-vfx table.vfx-rtable:not(.vfx-rtable-full) th:nth-child(6), .cpp-vfx table.vfx-rtable:not(.vfx-rtable-full) td:nth-child(6) { width:11%; } /* Price */
.cpp-vfx table.vfx-rtable:not(.vfx-rtable-full) th:nth-child(7), .cpp-vfx table.vfx-rtable:not(.vfx-rtable-full) td:nth-child(7) { width:9%; } /* No. of Deal */
.cpp-vfx table.vfx-rtable:not(.vfx-rtable-full) .vfx-rt-site a { word-break:break-word; overflow-wrap:anywhere; }
/* price cell with heart/flag */
.cpp-vfx .vfx-rt-price { flex-direction:column; align-items:center; gap:6px; }
.cpp-vfx .vfx-rt-price .vfx-rt-buy { background:var(--vfx-grad); padding:7px 22px; border-radius:8px; }
.cpp-vfx .vfx-rt-icons { display:flex; gap:8px; font-size:13px; }
.cpp-vfx .vfx-rt-icons span { cursor:pointer; opacity:.6; }
/* DR|DA|AS metric rows with brand icon */
.cpp-vfx .vfx-rt-dras { display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.cpp-vfx .vfx-rt-m { display:flex; align-items:center; gap:6px; font-size:13px; }
.cpp-vfx .vfx-rt-lbl { color:#64748b; font-weight:600; width:22px; }
.cpp-vfx .vfx-rt-ico { width:20px; height:20px; border-radius:5px; display:grid; place-items:center; color:#fff; font-weight:800; font-size:11px; }
.cpp-vfx .vfx-rt-ico.ah{background:#ff8800;} .cpp-vfx .vfx-rt-ico.mz{background:#4ba0f5;} .cpp-vfx .vfx-rt-ico.sr{background:#ff642d;}
/* real tool logos for DR (Ahrefs) / DA (Moz) / AS (Semrush) */
.cpp-vfx .vfx-rt-toolico { width:18px; height:18px; border-radius:4px; object-fit:contain; flex:none; background:#fff; box-shadow:inset 0 0 0 1px #eef0f4; }
.cpp-vfx .vfx-rt-m b { background:#f1f5f9; border-radius:6px; padding:2px 9px; min-width:30px; }
/* backlinks */
.cpp-vfx .vfx-rt-bl { font-weight:700; color:#16a34a; font-size:13px; }
.cpp-vfx .vfx-rt-bl-badges { display:flex; gap:6px; justify-content:center; margin-top:6px; }
.cpp-vfx .vfx-rt-bl-badges span { font-size:11px; padding:3px 8px; border-radius:6px; }
.cpp-vfx .vfx-rt-bl-badges .ok{background:#dcfce7;color:#16a34a;} .cpp-vfx .vfx-rt-bl-badges .no{background:#f1f5f9;color:#64748b;}
/* domain info */
.cpp-vfx .vfx-rt-dom { display:grid; grid-template-columns:auto auto; gap:2px 8px; font-size:12px; color:#64748b; justify-content:center; }
.cpp-vfx .vfx-rt-dom b { color:#0f172a; }
/* ===== Real laptop mockup wrapping the catalog table ===== */
.cpp-vfx .vfx-laptop { max-width:1500px; margin:24px auto 0; }
/* the "screen": dark bezel around the table, like a laptop lid */
.cpp-vfx .vfx-laptop-screen {
    background:linear-gradient(#1e293b,#0f172a);
    padding:16px 16px 14px;
    border-radius:20px 20px 6px 6px;
    box-shadow:0 26px 50px rgba(2,6,23,.30), inset 0 0 0 2px rgba(255,255,255,.04);
    position:relative;
}
/* tiny webcam dot at the top of the bezel */
.cpp-vfx .vfx-laptop-screen::before {
    content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%);
    width:6px; height:6px; border-radius:50%; background:#334155; box-shadow:0 0 0 2px #1e293b;
}
/* the table itself now sits flush inside the bezel (no more standalone black border) */
.cpp-vfx .vfx-rtable-laptop { border:0; border-radius:10px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.25); background:#fff; }
.cpp-vfx .vfx-rtable-laptop .vfx-rtable-head h3 { color:var(--vfx-blue); font-size:17px; }
/* the laptop "base" / keyboard deck + hinge under the screen */
.cpp-vfx .vfx-laptop-base {
    height:18px; margin:0 auto; width:114%; max-width:none; transform:translateX(-6.1%);
    background:linear-gradient(#cbd5e1,#94a3b8);
    border-radius:0 0 14px 14px;
    box-shadow:0 16px 24px rgba(15,23,42,.22);
    position:relative;
}
/* the hinge notch (the little dip you grip to open a laptop) */
.cpp-vfx .vfx-laptop-notch {
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:120px; height:8px; background:#64748b; border-radius:0 0 8px 8px;
}
@media (max-width:760px){
    .cpp-vfx .vfx-laptop-screen { padding:10px 8px 8px; border-radius:14px 14px 4px 4px; }
    .cpp-vfx .vfx-laptop-base { height:12px; width:108%; transform:translateX(-3.6%); }
    .cpp-vfx .vfx-laptop-notch { width:80px; height:6px; }
}

/* cart grid responsive */
.cpp-vfx .vfx-cart-grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start; }
@media (max-width:900px){ .cpp-vfx .vfx-cart-grid { grid-template-columns:1fr; } }

/* ============ FIXES from user screenshot (stats/cart/hero spacing) ============ */
/* cart icon in nav */
.vfx-nav-cart { color:#0f172a !important; display:inline-flex; align-items:center; }
.vfx-nav-cart svg { display:block; }
/* hero category links + data row spacing (were cramped) */
.cpp-vfx .vfx-hero-cats { margin:24px 0 28px !important; gap:14px !important; }
.cpp-vfx .vfx-hero-data-row { margin-top:10px; gap:16px 18px !important; row-gap:14px; }
.cpp-vfx .vfx-hero2-left { padding-bottom:90px !important; }
/* float stats need clear separation from hero, not overlapping */
.cpp-vfx .vfx-hero2-stats-float { margin-top:-55px !important; }
/* cart summary: prevent overlap, make it stack properly */
.cpp-vfx .vfx-cart-summary { position:sticky; top:90px; }
.cpp-vfx .vfx-cart-grid > .vfx-rtable-wrap { min-width:0; overflow:hidden; }

/* ============ Single case-study readable layout (NO sidebar — centre it) ============ */
.single-case-studies .content-area,
.single-case-studies #primary {
    max-width: 820px !important; margin: 0 auto !important; padding: 50px 22px 60px !important;
}
.single-case-studies .content-area .entry-title,
.single-case-studies .content-area h1:first-of-type {
    font-family:'Inter',sans-serif; font-size:34px; font-weight:800; color:#0f172a; line-height:1.2; margin:0 0 24px;
}

/* ============ Blog post / case-study TYPOGRAPHY (layout left to the theme grid) ============
   IMPORTANT: do NOT constrain .single-post #primary to 820px/centred — blog posts use the
   theme's col-lg-9 + col-lg-3 sidebar grid, and centring the main column collided with the
   floated sidebar and hid/displaced the article. Style only the text. */
.single-case-studies .entry-content p, .single-post .entry-content p {
    font-family:'Inter',sans-serif; font-size:16.5px; line-height:1.8; color:#334155; margin:0 0 18px;
}
.single-case-studies .entry-content h2, .single-post .entry-content h2 {
    font-family:'Inter',sans-serif; font-size:24px; font-weight:800; color:#0f172a; margin:34px 0 14px;
}
.single-case-studies .entry-content h3, .single-post .entry-content h3 {
    font-family:'Inter',sans-serif; font-size:20px; font-weight:700; color:#0f172a; margin:26px 0 12px;
}
.single-case-studies .entry-content ul, .single-post .entry-content ul,
.single-case-studies .entry-content ol, .single-post .entry-content ol { padding-left:22px; margin:0 0 20px; }
.single-case-studies .entry-content li, .single-post .entry-content li { font-family:'Inter',sans-serif; font-size:16px; line-height:1.7; color:#334155; margin-bottom:10px; }
.single-case-studies .entry-content strong, .single-post .entry-content strong { color:#EEB541; }
.single-post .entry-content { font-family:'Inter',sans-serif; }
.single-post .entry-content img { max-width:100%; height:auto; border-radius:10px; margin:10px 0 18px; }
/* hide the placeholder ONLY when truly empty; otherwise show the featured image nicely */
.single-post .post-thumbnail:empty, .single-case-studies .post-thumbnail:empty { display:none !important; }
.single-post .post-thumbnail { margin:0 0 24px; }
.single-post .post-thumbnail img {
    width:100% !important; height:auto !important; max-height:420px; object-fit:cover;
    border-radius:14px; display:block;
}
/* force the site font on blog titles (theme rendered them serif) */
.single-post .entry-title, .single-post h1.entry-title,
.blog .style-five .entry-title, .archive .style-five .entry-title,
.blog .style-five .entry-title a, .archive .style-five .entry-title a {
    font-family:'Inter',sans-serif !important;
}

/* ============ BLOG INDEX / ARCHIVE (.style-five list) ============
   The demo posts have NO featured image, so the theme's reserved .post-thumbnail box
   rendered as a big empty white gap between each post. Collapse empty thumbnails and
   give each post a clean card with sensible spacing. */
.blog .wraper_blog_main.style-five article,
.archive .wraper_blog_main.style-five article,
.search .wraper_blog_main.style-five article {
    background:#fff; border:1px solid #eef2f7; border-radius:16px;
    padding:26px 28px !important; margin:0 0 24px !important;
    box-shadow:0 6px 20px rgba(15,23,42,.05); font-family:'Inter',sans-serif;
}
/* hide the empty thumbnail box (no <img> inside) so there's no blank gap */
.blog .style-five .post-thumbnail:empty,
.archive .style-five .post-thumbnail:empty,
.search .style-five .post-thumbnail:empty { display:none !important; }
.blog .style-five .post-thumbnail img,
.archive .style-five .post-thumbnail img { border-radius:12px; margin-bottom:18px; width:100%; height:auto; object-fit:cover; }
/* post titles + meta in the list */
.blog .style-five .entry-title, .archive .style-five .entry-title { font-size:22px !important; font-weight:800 !important; line-height:1.3 !important; margin:6px 0 12px !important; }
.blog .style-five .entry-title a, .archive .style-five .entry-title a { color:#0f172a !important; }
.blog .style-five .entry-title a:hover, .archive .style-five .entry-title a:hover { color:var(--vfx-blue) !important; }
.blog .style-five .entry-content, .archive .style-five .entry-content,
.blog .style-five .entry-summary, .archive .style-five .entry-summary { font-size:15.5px !important; line-height:1.7 !important; color:#475569 !important; margin:0 0 14px !important; }
.blog .style-five .entry-meta, .archive .style-five .entry-meta { font-size:13px !important; color:#94a3b8 !important; }
.blog .style-five .entry-meta a, .archive .style-five .entry-meta a { color:#64748b !important; }
/* category/tag chips above the title */
.blog .style-five .cat-links a, .archive .style-five .cat-links a,
.blog .style-five .rt-category a, .archive .style-five .rt-category a {
    display:inline-block; background:#FBF0DA; color:#EEB541; font-size:11.5px; font-weight:700;
    padding:4px 10px; border-radius:999px; margin:0 6px 6px 0; text-decoration:none; text-transform:uppercase; letter-spacing:.02em;
}

/* --- Blog mobile fixes --- */
@media (max-width:782px){
  /* index: padding + let the category-chip row wrap inside the card (was overflowing) */
  .blog .wraper_blog_main.style-five article,
  .archive .wraper_blog_main.style-five article { padding:18px 16px !important; margin:0 0 18px !important; }
  .blog .style-five .rt-category, .archive .style-five .rt-category,
  .blog .style-five .cat-links, .archive .style-five .cat-links,
  .blog .style-five [class*="category"], .archive .style-five [class*="category"] {
    display:flex !important; flex-wrap:wrap !important; gap:6px; max-width:100%; overflow:visible;
  }
  .blog .style-five .rt-category a, .archive .style-five .rt-category a { margin:0 !important; }
  /* hide the empty featured-image placeholder box on mobile */
  .blog .style-five .post-thumbnail:empty, .archive .style-five .post-thumbnail:empty,
  .blog .style-five .entry-thumb:empty, .archive .style-five .entry-thumb:empty { display:none !important; }

  /* single post: kill the big empty gap between meta and the article body */
  .single-post .entry-header, .single-post .post-meta, .single-post .entry-meta { margin-bottom:14px !important; }
  .single-post .entry-content { margin-top:0 !important; padding-top:0 !important; }
  .single-post #primary, .single-post .content-area { padding:24px 16px 40px !important; }
  .single-post .entry-title { font-size:28px !important; line-height:1.2 !important; margin-bottom:14px !important; }
  /* collapse any empty wrappers between the header and the body that leave a gap */
  .single-post .entry-header > *:empty, .single-post .post-thumbnail:empty,
  .single-post .wraper_single_blog_share:empty, .single-post .rt-single-share:empty { display:none !important; }
}

/* ============ REAL FIXES from incognito screenshots (2026-06-18) ============ */
/* 1) Cart count badge was clipped at top of nav — position it ON the icon */
.vfx-site-header .vfx-nav-cart { position:relative !important; overflow:visible !important; display:inline-flex !important; align-items:center !important; padding:6px !important; }
.vfx-site-header .vfx-nav-cart .vfx-cart-count {
    position:absolute !important; top:-4px !important; right:-6px !important;
    background:#C6912A !important; color:#fff !important; font-size:10px !important; font-weight:800 !important;
    min-width:17px !important; height:17px !important; border-radius:9999px !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    padding:0 4px !important; line-height:1 !important; border:2px solid #fff !important; box-sizing:content-box !important;
}
.vfx-site-header .vfx-nav, .vfx-site-header .vfx-nav-inner { overflow:visible !important; }

/* 2) Table metric cells overflowing the borders — contain them */
.cpp-vfx .vfx-rtable-full td { overflow:hidden; }
.cpp-vfx .vfx-rt-dras { align-items:center !important; gap:7px !important; }
.cpp-vfx .vfx-rt-m { justify-content:center; flex-wrap:nowrap; white-space:nowrap; }
.cpp-vfx .vfx-rt-bl, .cpp-vfx .vfx-rt-bl-badges { white-space:nowrap; }
.cpp-vfx .vfx-rt-bl-badges { flex-wrap:wrap; }
.cpp-vfx .vfx-rtable-full th, .cpp-vfx .vfx-rtable-full td { padding:14px 12px !important; }
/* let the laptop frame contain a wider table by allowing horizontal scroll inside */
.cpp-vfx .vfx-rtable-laptop > div[style*="overflow"] { overflow-x:auto !important; }

/* 3) Hero spacing between category links and data row */
.cpp-vfx .vfx-hero-cats { margin:22px 0 26px !important; }
.cpp-vfx .vfx-hero-data-row { margin-top:0 !important; padding-top:8px; }

/* ============ Case-study inner page — STRONGER selectors (content is in .container, no entry-content) ============ */
.single-case-studies #primary.content-area { padding:0 !important; }
.single-case-studies #primary .site-main > .container,
.single-case-studies .site-main .container {
    max-width:820px !important; margin:0 auto !important; padding:50px 22px 64px !important; float:none !important; width:auto !important;
}
.single-case-studies .site-main .container > p { font-family:'Inter',sans-serif !important; font-size:16.5px !important; line-height:1.8 !important; color:#334155 !important; margin:0 0 18px !important; }
.single-case-studies .site-main .container > h2 { font-family:'Inter',sans-serif !important; font-size:24px !important; font-weight:800 !important; color:#0f172a !important; margin:34px 0 14px !important; }
.single-case-studies .site-main .container > ul { padding-left:22px !important; margin:0 0 20px !important; }
.single-case-studies .site-main .container > ul li { font-size:16px !important; line-height:1.7 !important; color:#334155 !important; margin-bottom:10px !important; }
.single-case-studies .site-main .container strong { color:#EEB541 !important; }

/* ============ Cart 'Order summary' overlap — contain table column ============ */
.cpp-vfx .vfx-cart-grid { display:grid !important; grid-template-columns:minmax(0,1fr) 320px !important; gap:24px !important; align-items:start !important; }
.cpp-vfx .vfx-cart-grid > .vfx-rtable-wrap { min-width:0 !important; max-width:100% !important; overflow:hidden !important; }
.cpp-vfx .vfx-cart-grid > .vfx-rtable-wrap > div { overflow-x:auto !important; }
.cpp-vfx .vfx-cart-grid > .vfx-rtable-wrap table { min-width:0 !important; width:100% !important; }
.cpp-vfx .vfx-cart-summary { width:100%; box-sizing:border-box; }
@media (max-width:860px){ .cpp-vfx .vfx-cart-grid { grid-template-columns:1fr !important; } }

/* ============ User feedback 2026-06-18: cart cols, favicon, hero gaps, font ============ */
/* Restore the website cell font (I had changed weight/color) — keep readable */
.cpp-vfx .vfx-rt-site { font-weight:700 !important; font-size:15px !important; display:flex !important; align-items:center !important; gap:4px !important; }
.cpp-vfx .vfx-rt-site a { color:var(--vfx-blue) !important; }
/* favicon a touch larger and never broken (CSS fallback bg if img fails to render) */
.cpp-vfx .vfx-rt-site img { width:20px !important; height:20px !important; border-radius:4px !important; flex:0 0 20px !important; object-fit:contain; background:#FBF0DA; margin-right:0 !important; }

/* Cart table: Website column wide enough for full domain, tighten the rest */
.cpp-vfx .vfx-cart-grid .vfx-rtable th:first-child,
.cpp-vfx .vfx-cart-grid .vfx-rtable td:first-child { width:auto; min-width:240px; text-align:left; }
.cpp-vfx .vfx-cart-grid .vfx-rtable th:not(:first-child),
.cpp-vfx .vfx-cart-grid .vfx-rtable td:not(:first-child) { width:70px; text-align:center; white-space:nowrap; }
.cpp-vfx .vfx-cart-grid .vfx-rtable td:last-child { width:40px; }

/* Hero: reduce gaps ~60% around category links + data-integrated row */
.cpp-vfx .vfx-hero-search-lg { margin-bottom:10px !important; }
.cpp-vfx .vfx-hero-cats { margin:10px 0 14px !important; gap:8px !important; }
.cpp-vfx .vfx-hero-data-row { margin-top:0 !important; padding-top:2px !important; gap:2px !important; }
.cpp-vfx .vfx-hero2-left { padding-bottom:64px !important; }

/* Stat slider: reduce top margin a little (less overlap pull) */
.cpp-vfx .vfx-hero2-stats-float { margin-top:-42px !important; }

/* ============ Payment method icons (marketplace pay page) ============ */
.cpp-vfx .vfx-pay-method { align-items:center; gap:14px; }
.cpp-vfx .vfx-pay-ico { font-size:22px; flex:0 0 auto; width:40px; text-align:center; }
.cpp-vfx .vfx-pay-logos { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; min-width:90px; }
.cpp-vfx .vfx-pay-logos img { height:24px; width:auto; display:block; border-radius:3px; }
.cpp-vfx .vfx-pay-method > div { flex:1; }
@media (max-width:520px){ .cpp-vfx .vfx-pay-logos { min-width:0; } .cpp-vfx .vfx-pay-logos img { height:20px; } }

/* ============ Process arrow-flow graphic (matches vefogix screenshot) ============ */
.cpp-vfx .vfx-arrowflow { position:relative; max-width:1100px; margin:30px auto 0; }
.cpp-vfx .vfx-af-item { display:flex; align-items:center; gap:24px; margin-bottom:-18px; }
.cpp-vfx .vfx-af-item.is-2, .cpp-vfx .vfx-af-item.is-4 { flex-direction:row; }
/* the colored chevron arrow block */
.cpp-vfx .vfx-af-arrow {
    position:relative; width:230px; height:118px; display:grid; place-items:center; flex:0 0 230px;
    clip-path:polygon(0 0, 78% 0, 100% 50%, 78% 100%, 0 100%, 18% 50%);
    box-shadow:0 14px 24px rgba(0,0,0,.12);
}
.cpp-vfx .vfx-af-arrow svg { position:relative; z-index:2; }
.cpp-vfx .is-1 .vfx-af-arrow { background:linear-gradient(135deg,#F0C060,#2563eb); }
.cpp-vfx .is-2 .vfx-af-arrow { background:linear-gradient(135deg,#a855f7,#9333ea); }
.cpp-vfx .is-3 .vfx-af-arrow { background:linear-gradient(135deg,#f87171,#ef4444); }
.cpp-vfx .is-4 .vfx-af-arrow { background:linear-gradient(135deg,#84cc16,#65a30d); }
/* stagger each arrow lower + indented like the screenshot */
.cpp-vfx .is-1 { margin-left:0; }
.cpp-vfx .is-2 { margin-left:230px; }
.cpp-vfx .is-3 { margin-left:460px; }
.cpp-vfx .is-4 { margin-left:690px; }
/* text labels */
.cpp-vfx .vfx-af-text { flex:0 0 240px; max-width:240px; }
.cpp-vfx .vfx-af-item.is-1 .vfx-af-text, .cpp-vfx .vfx-af-item.is-3 .vfx-af-text { text-align:right; order:-1; }
.cpp-vfx .vfx-af-text h3 { font-size:17px; font-weight:800; margin:0 0 6px; }
.cpp-vfx .vfx-af-text p { font-size:13.5px; color:#64748b; line-height:1.5; margin:0; }
.cpp-vfx .is-1 .vfx-af-text h3 { color:#2563eb; }
.cpp-vfx .is-2 .vfx-af-text h3 { color:#9333ea; }
.cpp-vfx .is-3 .vfx-af-text h3 { color:#ef4444; }
.cpp-vfx .is-4 .vfx-af-text h3 { color:#65a30d; }
/* mobile: stack vertically, no stagger */
@media (max-width:900px){
    .cpp-vfx .vfx-af-item, .cpp-vfx .is-1, .cpp-vfx .is-2, .cpp-vfx .is-3, .cpp-vfx .is-4 { margin-left:0 !important; flex-direction:column !important; text-align:center; margin-bottom:18px; gap:10px; }
    .cpp-vfx .vfx-af-item .vfx-af-text { order:0 !important; text-align:center !important; max-width:340px; }
    .cpp-vfx .vfx-af-arrow { width:200px; flex-basis:200px; }
}

/* ============ Featured Packages grid spacing ============ */
.cpp-vfx .vfx-pkgs { gap:11px !important; align-items:stretch; }

/* ============================================================
   4-STEP PROCESS — fully self-contained (.vfx-steps4)
   Built from scratch so no legacy/global rule can break it.
   ============================================================ */
.cpp-vfx .vfx-steps4 {
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    gap:20px !important;
    max-width:1120px !important;
    margin:44px auto 0 !important;
    align-items:stretch !important;
    counter-reset:none !important;
}
.cpp-vfx .vfx-steps4 .vfx-steps4-card {
    display:flex !important; flex-direction:column !important; align-items:center !important;
    text-align:center !important; box-sizing:border-box !important;
    padding:30px 22px !important; min-width:0 !important; max-width:none !important;
    background:#fff !important; border:1px solid #e8edf3 !important; border-radius:18px !important;
    box-shadow:0 1px 3px rgba(15,35,95,.05) !important;
    transition:transform .2s, box-shadow .2s, border-color .2s !important;
}
.cpp-vfx .vfx-steps4 .vfx-steps4-card:hover {
    transform:translateY(-5px) !important; box-shadow:0 18px 44px rgba(15,35,95,.12) !important;
    border-color:rgba(198,145,42,.28) !important;
}
/* icon + number row */
.cpp-vfx .vfx-steps4 .vfx-steps4-top { position:relative !important; margin-bottom:20px !important; }
.cpp-vfx .vfx-steps4 .vfx-steps4-ic {
    width:60px !important; height:60px !important; border-radius:18px !important;
    display:grid !important; place-items:center !important; color:#EEB541 !important;
    background:linear-gradient(135deg, rgba(198,145,42,.12), rgba(247,210,138,.12)), #fff !important;
    box-shadow:inset 0 0 0 1px rgba(198,145,42,.14) !important;
}
.cpp-vfx .vfx-steps4 .vfx-steps4-ic svg, .cpp-vfx .vfx-steps4 .vfx-steps4-ic .vfx-ic {
    width:27px !important; height:27px !important; stroke:#EEB541 !important;
}
.cpp-vfx .vfx-steps4 .vfx-steps4-num {
    position:absolute !important; top:-9px !important; right:-9px !important;
    width:25px !important; height:25px !important; border-radius:50% !important;
    background:linear-gradient(120deg,#F7D28A,#EEB541 52%,#C6912A) !important; color:#fff !important;
    font-size:12px !important; font-weight:800 !important;
    display:grid !important; place-items:center !important;
    border:2px solid #fff !important; box-shadow:0 4px 10px rgba(198,145,42,.4) !important;
}
/* title — always one or two tidy lines, equal height so all 4 align */
.cpp-vfx .vfx-steps4 .vfx-steps4-title {
    font-size:17px !important; font-weight:800 !important; color:#0f172a !important;
    margin:0 0 9px !important; line-height:1.3 !important; min-height:44px !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    white-space:normal !important; word-break:normal !important; overflow-wrap:break-word !important;
}
.cpp-vfx .vfx-steps4 .vfx-steps4-desc {
    font-size:13.5px !important; color:#475569 !important; line-height:1.6 !important; margin:0 !important;
    max-width:none !important; white-space:normal !important; word-break:normal !important;
}
@media (max-width:980px){
    .cpp-vfx .vfx-steps4 { grid-template-columns:1fr 1fr !important; gap:16px !important; max-width:620px !important; }
    .cpp-vfx .vfx-steps4 .vfx-steps4-title { min-height:0 !important; }
}
@media (max-width:520px){
    .cpp-vfx .vfx-steps4 { grid-template-columns:1fr !important; max-width:380px !important; }
}

/* ============ Step-flow v2 (clean 4-col, replaces broken arrowflow) ============ */
/* Flexbox 4-up (more robust than grid against theme overrides that were squeezing
   columns 2-4 and wrapping their text word-by-word). Each step gets an equal, fixed
   flex-basis so all four are the same width. */
/* True 4-in-a-row grid. minmax(0,1fr) lets columns shrink so all four always fit on
   one line (no wrap to a scattered 2x2). nowrap text only where needed. */
/* ===== How-it-works: 4 equal, clean numbered step cards (redesign v4) ===== */
.cpp-vfx .vfx-stepflow {
    counter-reset:vfxstep;
    display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:22px;
    margin:42px auto 0; max-width:1180px;        /* tidy centred width so cards sit together */
    align-items:stretch;                          /* equal-height cards */
}
.cpp-vfx .vfx-step2 {
    min-width:0 !important; max-width:none !important; box-sizing:border-box;
    position:relative; text-align:center; padding:32px 22px;
    background:var(--vfx-card); border:1px solid var(--vfx-line); border-radius:18px;
    box-shadow:0 1px 3px rgba(15,35,95,.05); transition:transform .2s, box-shadow .2s, border-color .2s;
    display:flex; flex-direction:column; align-items:center;
}
.cpp-vfx .vfx-step2:hover { transform:translateY(-5px); box-shadow:var(--vfx-shadow); border-color:rgba(198,145,42,.28); }
/* centred gradient-tint icon tile + numbered badge */
.cpp-vfx .vfx-step2-arrow {
    position:relative; width:60px; height:60px; margin:0 auto 18px; display:grid; place-items:center; border-radius:18px;
    color:var(--vfx-blue);
    background:linear-gradient(135deg, rgba(198,145,42,.12), rgba(247,210,138,.12)), var(--vfx-card);
    box-shadow:inset 0 0 0 1px rgba(198,145,42,.14); clip-path:none !important; flex:none;
}
.cpp-vfx .vfx-step2-arrow svg, .cpp-vfx .vfx-step2-arrow .vfx-ic { width:27px !important; height:27px !important; stroke:var(--vfx-blue) !important; }
.cpp-vfx .vfx-step2-arrow svg [fill="#fff"], .cpp-vfx .vfx-step2-arrow svg [stroke="#fff"] { fill:none; stroke:var(--vfx-blue); }
.cpp-vfx .vfx-step2-arrow::after {
    counter-increment:vfxstep; content:counter(vfxstep);
    position:absolute; top:-9px; right:-9px; width:25px; height:25px; border-radius:50%;
    background:var(--vfx-grad); color:#fff; font-size:12px; font-weight:800; display:grid; place-items:center;
    box-shadow:0 4px 10px rgba(198,145,42,.4); border:2px solid #fff;
}
.cpp-vfx .vfx-step2 h3 { font-size:16.5px; font-weight:800; margin:0 0 9px; color:var(--vfx-ink) !important; white-space:normal; word-break:normal; overflow-wrap:break-word; line-height:1.35; min-height:2.6em; display:flex; align-items:center; justify-content:center; }
.cpp-vfx .vfx-step2 p { font-size:13.5px; color:var(--vfx-body); line-height:1.6; margin:0; max-width:none !important; white-space:normal; word-break:normal; }
@media (max-width:980px){ .cpp-vfx .vfx-stepflow { grid-template-columns:1fr 1fr !important; gap:16px; max-width:640px; } }
@media (max-width:540px){ .cpp-vfx .vfx-stepflow { grid-template-columns:1fr !important; max-width:420px; } .cpp-vfx .vfx-step2 h3 { min-height:0; } }

/* ============ Real tool logos (label removed; logos doubled in size) ============ */
.cpp-vfx .vfx-tool-logo { background:transparent; padding:0; display:inline-flex; align-items:center; height:40px; }
.cpp-vfx .vfx-tool-logo img { height:36px; width:auto; max-width:150px; display:block; object-fit:contain; }
/* 8px gap between each logo. */
.cpp-vfx .vfx-hero-data-row { gap:8px !important; }
.cpp-vfx .vfx-hero-data-label { display:none !important; }

/* ==========================================================================
   MOBILE RESPONSIVE PASS  — phones / small tablets
   ========================================================================== */

/* --- Catalog table → stacked cards (no more horizontal cut-off) --- */
@media (max-width:760px){
  .cpp-vfx .vfx-rtable-laptop { border-width:6px; border-radius:14px; }
  /* kill the horizontal scroll wrapper; we go vertical instead.
     Card-transform keys off td[data-label] so the cart table (no labels) is untouched. */
  .cpp-vfx .vfx-rtable-wrap > div[style*="overflow"],
  .cpp-vfx .vfx-rtable-laptop > div[style*="overflow"] { overflow-x:visible !important; }
  .cpp-vfx table.vfx-rtable { min-width:0 !important; width:100% !important; display:block !important; }
  .cpp-vfx table.vfx-rtable thead { display:none !important; }            /* header row hidden on cards */
  .cpp-vfx table.vfx-rtable tbody { display:block !important; }
  .cpp-vfx table.vfx-rtable tr {
    display:block !important; margin:0 0 16px; padding:14px; border:1px solid #e6ecf5;
    border-radius:14px; box-shadow:0 4px 14px rgba(15,23,42,.05); background:#fff;
  }
  .cpp-vfx table.vfx-rtable td[data-label] {
    display:flex !important; justify-content:space-between; align-items:center; gap:14px;
    text-align:right !important; padding:9px 0 !important; border:0 !important;
    border-bottom:1px dashed #eef2f7 !important; width:auto !important;
  }
  .cpp-vfx table.vfx-rtable td[data-label]:last-child { border-bottom:0 !important; }
  /* the data-label becomes the left-hand caption for each cell */
  .cpp-vfx table.vfx-rtable td[data-label]::before {
    content:attr(data-label); flex:0 0 auto; text-align:left; font-weight:700;
    font-size:11.5px; letter-spacing:.02em; color:#64748b; text-transform:uppercase;
  }
  /* Price row reads as a header strip */
  .cpp-vfx table.vfx-rtable td[data-label="Price"]{
    border-bottom:1px solid #eef2f7 !important; padding-bottom:12px !important; margin-bottom:2px;
  }
  .cpp-vfx .vfx-rt-price { flex-direction:row; align-items:center; gap:10px; }
  .cpp-vfx .vfx-rt-site { justify-content:flex-start; }
  .cpp-vfx .vfx-rt-meta { align-items:flex-end; text-align:right; }
  .cpp-vfx table.vfx-rtable td[data-label="Website"]{ flex-direction:column; align-items:stretch; }
  .cpp-vfx table.vfx-rtable td[data-label="Website"]::before { margin-bottom:6px; }
  .cpp-vfx .vfx-rt-dras, .cpp-vfx .vfx-rt-metrics { justify-content:flex-end; }
  .cpp-vfx .vfx-rt-bl-badges { justify-content:flex-end; }
}

/* --- Hero / headings / sections spacing on phones --- */
@media (max-width:600px){
  .cpp-vfx .vfx-hero2-left h1, .cpp-vfx .vfx-hero2 h1 { font-size:28px !important; line-height:1.2; }
  .cpp-vfx .vfx-section { padding-top:42px; padding-bottom:42px; }
  .cpp-vfx .vfx-head h2 { font-size:24px; }
  .cpp-vfx .vfx-container { padding-left:16px; padding-right:16px; }
  /* keep search input + button on one row but let input shrink, button stays compact */
  .cpp-vfx .vfx-hero-search-lg { padding:6px 6px 6px 14px; }
  .cpp-vfx .vfx-hero-search input { min-width:0; }
  .cpp-vfx .vfx-hero-search-lg .vfx-btn { padding:12px 18px; font-size:13px; white-space:nowrap; }
  /* category quick-links wrap neatly */
  .cpp-vfx .vfx-hero-cats, .cpp-vfx .vfx-hero-chips { flex-wrap:wrap; }
  /* popular-service + package grids go single column */
  .cpp-vfx .vfx-grid-3, .cpp-vfx .vfx-grid-4, .cpp-vfx .vfx-pkgs { grid-template-columns:1fr !important; }
  .cpp-vfx .vfx-pkgs { gap:16px; }
  /* tool logos on mobile: 8px gap, slightly smaller than desktop */
  .cpp-vfx .vfx-hero-data-row { gap:8px !important; }
  .cpp-vfx .vfx-tool-logo img { height:28px; }
  .cpp-vfx .vfx-tool-logo { height:32px; }
}

/* --- Footer: center social + payment icons on phones (grid already stacks in footer.css) --- */
@media (max-width:560px){
  body .vfx-footer-social, body .vfx-footer-pay { justify-content:center; flex-wrap:wrap; }
}

/* --- Marketplace trust-stats: don't overflow on phones --- */
@media (max-width:760px){
  .cpp-vfx .cpp-mp-trust-stats, body .cpp-mp-trust-stats {
    grid-template-columns:repeat(2,1fr) !important; gap:12px;
  }
  .cpp-vfx .cpp-mp-stat, body .cpp-mp-stat { padding:18px 14px; }
  .cpp-vfx .cpp-mp-stat-num, body .cpp-mp-stat-num { font-size:26px; }
}
@media (max-width:380px){
  .cpp-vfx .cpp-mp-trust-stats, body .cpp-mp-trust-stats { grid-template-columns:1fr 1fr; }
}

/* --- Prevent any element from forcing horizontal page scroll --- */
@media (max-width:760px){
  .cpp-vfx, .cpp-vfx * { max-width:100%; }
  .cpp-vfx img { height:auto; }
  .cpp-vfx .vfx-pay-method { flex-wrap:wrap; }
  /* generic: any vfx grid that's 3/4-up collapses to 2 then content decides */
  .cpp-vfx .cpp-mp-process-grid, .cpp-vfx .cpp-mp-features-grid { grid-template-columns:1fr !important; }
}

/* ==========================================================================
   Contact Form 7 — style the default unstyled CF7 form to match the vfx design
   (the /contact/ form is a CF7 widget, not one of our templates).
   ========================================================================== */
.wpcf7-form { max-width:640px; margin:0 auto; font-family:'Inter',sans-serif; }
.wpcf7-form p { margin:0 0 16px; }
.wpcf7-form label { display:block; font-weight:600; font-size:14px; color:#0f172a; margin-bottom:6px; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form select,
.wpcf7-form textarea {
    width:100%; box-sizing:border-box; border:1px solid #cbd5e1; border-radius:12px;
    padding:13px 16px; font-size:15px; font-family:inherit; color:#0f172a; background:#fff;
    transition:border-color .15s, box-shadow .15s; outline:none;
}
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    border-color:#EEB541; box-shadow:0 0 0 3px rgba(198,145,42,.15);
}
.wpcf7-form textarea { min-height:140px; resize:vertical; }
.wpcf7-form .wpcf7-list-item { margin:0 14px 0 0; }
.wpcf7-form .wpcf7-acceptance label { display:inline-flex; align-items:center; gap:8px; font-weight:500; color:#475569; }
/* the submit button — on-brand gradient pill, full width */
.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"] {
    background:linear-gradient(135deg,#F7D28A 0%,#EEB541 55%,#C6912A 100%);
    color:#fff; border:0; border-radius:9999px; padding:14px 34px; font-size:15px;
    font-weight:700; font-family:inherit; cursor:pointer; box-shadow:0 8px 22px rgba(198,145,42,.28);
    transition:transform .15s, box-shadow .15s; width:100%; margin-top:6px;
}
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form button[type="submit"]:hover { transform:translateY(-1px); box-shadow:0 12px 28px rgba(198,145,42,.36); }
.wpcf7-form .wpcf7-spinner { margin:14px auto 0; display:block; }
/* keep the contact widget itself centred and padded */
.widget_radiantthemes_contact_box_widget .contact { max-width:680px; margin:0 auto; }

/* ==========================================================================
   /marketplace/ vertical rhythm — the old design stacked 48-64px margins between
   the hero, stats, and "Featured publishers", leaving a big empty gap. Tighten it.
   ========================================================================== */
.cpp-vfx .cpp-mp-hero { margin-bottom:28px !important; }
.cpp-vfx .cpp-mp-trust { margin-bottom:28px !important; }
.cpp-vfx .cpp-mp-catalog { margin-bottom:40px !important; }
.cpp-vfx .cpp-mp-catalog-head { margin-top:0 !important; }
@media (max-width:640px){
  .cpp-vfx .cpp-mp-hero { margin-bottom:20px !important; }
  .cpp-vfx .cpp-mp-trust { margin-bottom:20px !important; }
}

/* ==========================================================================
   Marketplace controller pages (site detail + order/checkout). The full-bleed fix
   stripped the 1240px centring off .cpp-marketplace-container.cpp-vfx, so the
   2-column grids spread to the screen edges leaving a huge empty middle. Re-centre
   the CONTENT blocks (the full-bleed hero/subnav stay edge-to-edge). Also fix the
   buy-card layout (overlapping note) and tighten the gap between the two columns.
   ========================================================================== */
.cpp-vfx .cpp-mp-detail,
.cpp-vfx .cpp-mp-checkout,
.cpp-vfx .cpp-mp-subnav-inner { max-width:1180px; margin-left:auto; margin-right:auto; padding-left:20px; padding-right:20px; box-sizing:border-box; }
/* tighter, balanced two-column grid (content | sticky buy/summary card) */
.cpp-vfx .cpp-mp-detail-grid { grid-template-columns:minmax(0,1fr) 340px !important; gap:24px !important; align-items:start; }
.cpp-vfx .cpp-mp-detail-main { width:100% !important; max-width:none !important; box-sizing:border-box; }
.cpp-vfx .cpp-mp-detail-buy { position:sticky; top:90px; }
/* buy card: stop the note overlapping the meta list, give it breathing room */
.cpp-vfx .cpp-mp-buy-card { background:#fff; border:1px solid var(--vfx-line); border-radius:16px; padding:26px; box-shadow:var(--vfx-shadow); }
.cpp-vfx .cpp-mp-buy-note { margin:14px 0 18px !important; font-size:13px; color:#64748b; line-height:1.5; }
.cpp-vfx .cpp-mp-buy-meta { border-top:1px solid var(--vfx-line); padding-top:8px; }
@media (max-width:992px){
  .cpp-vfx .cpp-mp-detail-grid { grid-template-columns:1fr !important; }
  .cpp-vfx .cpp-mp-detail-buy { position:static; }
}

/* ==========================================================================
   FAVICON ↔ DOMAIN: keep the favicon tight against the website name in ALL table
   views (desktop rows AND mobile cards). The mobile card made the Website cell a
   full-width column with text-align:right, which pushed the favicon and the domain
   link to opposite ends. Force a tight, left-aligned inline-flex row.
   ========================================================================== */
/* favicon + domain: CENTRED as a group, with the favicon tight against the domain
   name (small gap). Centre on both desktop rows and mobile cards, per request. */
.cpp-vfx .vfx-rt-site {
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;   /* favicon + domain centred together */
    gap:6px !important;
    width:auto !important;
}
.cpp-vfx .vfx-rt-site img { margin:0 !important; flex:0 0 auto !important; }
.cpp-vfx .vfx-rt-site a { margin:0 !important; }
/* Desktop Website column: centre the favicon+domain group in the cell */
.cpp-vfx .vfx-rtable-full td:nth-child(1) .vfx-rt-site,
.cpp-vfx table.vfx-rtable:not(.vfx-rtable-full) td:nth-child(1) .vfx-rt-site { justify-content:center !important; }
/* Mobile cards: the Website cell stacks as a column. CENTRE the favicon+domain row
   (favicon stays tight against the domain via the gap above), with the meta below. */
@media (max-width:760px){
  .cpp-vfx table.vfx-rtable td[data-label="Website"]{
    flex-direction:column !important; align-items:center !important; text-align:center !important;
  }
  .cpp-vfx table.vfx-rtable td[data-label="Website"] .vfx-rt-site {
    align-self:center !important; width:auto !important; justify-content:center !important;
  }
}

/* ============ Order status timeline (buyer order detail) ============ */
.cpp-vfx .vfx-order-timeline { display:flex; gap:6px; margin-top:20px; flex-wrap:wrap; }
.cpp-vfx .vfx-otl-step { flex:1 1 0; min-width:90px; text-align:center; position:relative; }
.cpp-vfx .vfx-otl-step:not(:last-child)::after { content:""; position:absolute; top:18px; left:60%; width:80%; height:3px; background:#e2e8f0; z-index:0; }
.cpp-vfx .vfx-otl-step.is-done:not(:last-child)::after { background:#22c55e; }
.cpp-vfx .vfx-otl-dot { position:relative; z-index:1; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 8px; background:#f1f5f9; border:2px solid #e2e8f0; font-size:16px; }
.cpp-vfx .vfx-otl-step.is-done .vfx-otl-dot { background:#dcfce7; border-color:#22c55e; }
.cpp-vfx .vfx-otl-step.is-current .vfx-otl-dot { background:linear-gradient(135deg,#F7D28A,#EEB541); border-color:#EEB541; box-shadow:0 0 0 4px rgba(198,145,42,.15); }
.cpp-vfx .vfx-otl-label { font-size:12px; color:#94a3b8; font-weight:600; display:block; line-height:1.3; }
.cpp-vfx .vfx-otl-step.is-done .vfx-otl-label, .cpp-vfx .vfx-otl-step.is-current .vfx-otl-label { color:#334155; }
@media (max-width:600px){ .cpp-vfx .vfx-otl-step { min-width:33%; } .cpp-vfx .vfx-otl-step:not(:last-child)::after { display:none; } }

/* ============ Bulk add-to-cart bar (catalog project mode) ============ */
.cpp-vfx .cpp-bulkbar, .cpp-marketplace-container .cpp-bulkbar {
    position:sticky; top:70px; z-index:20; display:none;
    align-items:center; justify-content:space-between; gap:14px;
    background:linear-gradient(135deg,#0f172a,#1e293b); color:#fff;
    padding:12px 18px; border-radius:12px; margin:0 0 14px;
    box-shadow:0 10px 30px rgba(15,23,42,.25);
}
.cpp-bulkbar.is-active { display:flex; }
.cpp-bulkbar b { font-size:18px; }
.cpp-bulk-cb, #cppSelectAll { width:18px; height:18px; cursor:pointer; }

/* ============================================================
   RESPONSIVE — marketplace search form + domain/price table
   Covers every device size: ultrawide → laptop → tablet → phone → tiny phone.
   The 10-column catalog table cannot fit a phone, so below 760px each row
   collapses into a readable CARD using the existing td[data-label] values.
   ============================================================ */

/* ---- Search form: dropdowns 4→2→1, ranges grid 4→2→1, across devices ---- */
@media (max-width: 1024px) {
  .cpp-vfx .cpp-mp-hero, .cpp-mp-hero { padding: 54px 0 44px; }
  .cpp-vfx .vfx-filterbar.cpp-mp-filterform { max-width: 760px !important; padding: 22px !important; gap: 14px !important; }
  .cpp-vfx .cpp-mp-filterform .vfx-filter { flex: 1 1 calc(50% - 8px); min-width: 0; }  /* dropdowns 2-up */
}
@media (max-width: 720px) {
  .cpp-vfx .vfx-filterbar.cpp-mp-filterform { flex-direction: column; align-items: stretch !important; gap: 12px !important; padding: 16px !important; border-radius: 14px !important; }
  .cpp-vfx .cpp-mp-filterform .vfx-filter { flex: 1 1 100%; width: 100%; }     /* dropdowns 1-up */
  .cpp-vfx .cpp-mp-filterform .vfx-filter select { width: 100% !important; }
  .cpp-vfx .cpp-mp-filterform .cpp-mp-hero-search-row > input[type=search] { max-width: 100%; }
  .cpp-vfx .cpp-mp-filterform .cpp-mp-hero-search-row-compact { grid-template-columns: repeat(2, 1fr); }  /* ranges 2-up */
  .cpp-vfx .cpp-mp-filterform-btn { max-width: 100% !important; width: 100%; }
  .cpp-mp-hero-title { font-size: 30px !important; }
  .cpp-mp-hero-sub { font-size: 14px; }
}
@media (max-width: 420px) {
  .cpp-vfx .cpp-mp-filterform .cpp-mp-hero-search-row-compact { grid-template-columns: 1fr; }  /* ranges 1-up */
  .cpp-mp-hero-title { font-size: 25px !important; }
  .cpp-vfx .cpp-mp-hero, .cpp-mp-hero { padding: 40px 0 34px; }
}

/* ---- Catalog table ---- */
/* Tablet/laptop: horizontal scroll with momentum + a soft edge hint. */
@media (max-width: 1100px) {
  .cpp-vfx .vfx-rtable-wrap > div[style*="overflow"],
  .cpp-vfx .vfx-rtable-wrap { -webkit-overflow-scrolling: touch; }
}

/* PHONE (<=760px): collapse the table into stacked cards. The table has 11
   cells/row (checkbox + 10 data cols); each becomes a label/value line. */
@media (max-width: 760px) {
  .cpp-vfx .vfx-rtable-wrap > div[style*="overflow"] { overflow-x: visible !important; }
  .cpp-vfx .vfx-rtable-vfgx,
  .cpp-vfx .vfx-rtable-vfgx-cb { min-width: 0 !important; width: 100% !important; table-layout: auto !important; display: block; }
  .cpp-vfx .vfx-rtable-vfgx thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* hide header row */
  .cpp-vfx .vfx-rtable-vfgx tbody,
  .cpp-vfx .vfx-rtable-vfgx tbody tr { display: block; width: 100%; }
  .cpp-vfx .vfx-rtable-vfgx tbody tr {
    border: 1px solid #e6eef9; border-radius: 14px; margin: 0 0 14px; padding: 8px 4px 12px;
    background: #fff !important; box-shadow: 0 4px 16px -10px rgba(15,23,42,.18);
  }
  .cpp-vfx .vfx-rtable-vfgx tbody tr:nth-child(even) td,
  .cpp-vfx .vfx-rtable-vfgx tbody tr:hover td { background: transparent !important; }
  .cpp-vfx .vfx-rtable-vfgx td {
    display: flex !important; align-items: center; justify-content: space-between; gap: 14px;
    width: auto !important; text-align: right !important; padding: 9px 14px !important;
    border-bottom: 1px solid #f1f5f9; font-size: 13px;
  }
  .cpp-vfx .vfx-rtable-vfgx td:last-child { border-bottom: 0; }
  /* label column from data-label */
  .cpp-vfx .vfx-rtable-vfgx td::before {
    content: attr(data-label); flex: 0 0 42%; text-align: left;
    font-weight: 700; color: #64748b; font-size: 12px; text-transform: uppercase; letter-spacing: .03em;
  }
  /* Website row: make it the card header — full width, no label, bigger */
  .cpp-vfx .vfx-rtable-vfgx td[data-label="Website"] {
    text-align: left !important; padding: 12px 14px 10px !important; border-bottom: 1px solid #eef2f7;
    background: #f7faff !important; border-radius: 12px 12px 0 0;
  }
  .cpp-vfx .vfx-rtable-vfgx td[data-label="Website"]::before { content: ""; display: none; }
  .cpp-vfx .vfx-rtable-vfgx td[data-label="Website"] > * { width: 100%; }
  /* Select checkbox: tuck it into the website header area, no label */
  .cpp-vfx .vfx-rtable-vfgx-cb td[data-label="Select"] { justify-content: flex-start; padding: 8px 14px 0 !important; border-bottom: 0; }
  .cpp-vfx .vfx-rtable-vfgx-cb td[data-label="Select"]::before { content: "Select"; flex: 1; }
  /* Price/Buy: emphasise */
  .cpp-vfx .vfx-rtable-vfgx td[data-label="Price"] { padding-top: 11px !important; padding-bottom: 11px !important; }
  .cpp-vfx .vfx-rtable-vfgx td[data-label="Price"] .vfx-rt-price { flex-direction: row; align-items: center; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
  .cpp-vfx .vfx-rtable-vfgx td[data-label="Price"] .vfx-rt-amt { font-size: 16px; }
  .cpp-vfx .vfx-rtable-vfgx td[data-label="Price"] .vfx-rt-buy,
  .cpp-vfx .vfx-rtable-vfgx td[data-label="Price"] .vfx-rt-buy-locked { padding: 9px 22px; font-size: 13px; }
  /* metric cells: keep value cluster on the right, tidy wrap */
  .cpp-vfx .vfx-rtable-vfgx td .vfx-rt-metric,
  .cpp-vfx .vfx-rtable-vfgx td .vfx-rt-bl,
  .cpp-vfx .vfx-rtable-vfgx td .vfx-rt-dom,
  .cpp-vfx .vfx-rtable-vfgx td .vfx-rt-cats,
  .cpp-vfx .vfx-rtable-vfgx td .vfx-rt-traffic { justify-content: flex-end; flex-wrap: wrap; text-align: right; }
  .cpp-vfx .vfx-rtable-vfgx td .vfx-rt-icons { justify-content: flex-end; }
  /* Bulk select-all bar can wrap */
  .cpp-vfx .cpp-bulkbar { flex-wrap: wrap; gap: 10px; }
}

/* Tiny phones (<=360px): tighten paddings + price block stacks */
@media (max-width: 360px) {
  .cpp-vfx .vfx-rtable-vfgx td { padding: 8px 11px !important; gap: 10px; }
  .cpp-vfx .vfx-rtable-vfgx td::before { flex-basis: 46%; font-size: 11px; }
  .cpp-vfx .vfx-rtable-vfgx td[data-label="Price"] .vfx-rt-price { flex-direction: column; align-items: flex-end; gap: 6px; }
  .cpp-mp-hero-title { font-size: 22px !important; }
}

/* ============================================================
   ELITE SERVICE-PAGE CONTENT COMPONENTS (2026-06)
   Stat bands, image slots, text+image split, callouts,
   pros/cons, check-lists, definition blocks. Reuses tokens.
   ============================================================ */

/* Mid-page stat band (vfx-stats overlaps the hero with -64px; this one sits inline) */
.cpp-vfx .vfx-statband { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:1100px; margin:0 auto; }
.cpp-vfx .vfx-statband .vfx-stat { border:1px solid var(--vfx-line); }
.cpp-vfx .vfx-statband .vfx-stat-sub { margin-top:6px; font-size:12.5px; color:var(--vfx-muted); }

/* Responsive image slot — keeps layout stable before the real image loads */
.cpp-vfx .vfx-figure { margin:0 auto; max-width:1000px; }
.cpp-vfx .vfx-figure figcaption { margin-top:10px; text-align:center; font-size:13px; color:var(--vfx-muted); }
.cpp-vfx .vfx-imgslot { display:block; width:100%; border-radius:var(--vfx-radius); border:1px solid var(--vfx-line); box-shadow:var(--vfx-shadow); background:
   linear-gradient(135deg,#FBF0DA 0%,#f6f0ff 100%); object-fit:cover; aspect-ratio:16/9; }
.cpp-vfx .vfx-imgslot--tall { aspect-ratio:4/3; }
.cpp-vfx .vfx-imgslot--wide { aspect-ratio:21/9; }

/* Text + image split */
.cpp-vfx .vfx-split { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; max-width:1180px; margin:0 auto; }
.cpp-vfx .vfx-split--rev .vfx-split-media { order:-1; }
.cpp-vfx .vfx-split h2 { font-size:28px; margin:0 0 14px; }
.cpp-vfx .vfx-split p { font-size:16px; line-height:1.7; color:var(--vfx-body); margin:0 0 14px; }
.cpp-vfx .vfx-split ul { padding-left:0; list-style:none; margin:0; }
.cpp-vfx .vfx-split li { position:relative; padding-left:30px; margin-bottom:12px; line-height:1.6; color:var(--vfx-body); }

/* Check / cross lists */
.cpp-vfx .vfx-checklist { list-style:none; padding:0; margin:0; }
.cpp-vfx .vfx-checklist li { position:relative; padding-left:32px; margin-bottom:12px; line-height:1.6; color:var(--vfx-body); }
.cpp-vfx .vfx-checklist li::before { content:""; position:absolute; left:0; top:2px; width:20px; height:20px; border-radius:50%;
   background:#eefbf3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%231f7a5b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat; }
.cpp-vfx .vfx-xlist li::before { background:#fef2f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/13px no-repeat; }

/* Callout / note box */
.cpp-vfx .vfx-callout { display:flex; gap:14px; align-items:flex-start; max-width:880px; margin:22px auto; padding:18px 20px; border:1px solid var(--vfx-line);
   border-left:4px solid var(--vfx-blue); border-radius:14px; background:#f8fbff; }
.cpp-vfx .vfx-callout svg { flex:0 0 auto; width:22px; height:22px; color:var(--vfx-blue); margin-top:2px; }
.cpp-vfx .vfx-callout p { margin:0; font-size:14.5px; line-height:1.65; color:var(--vfx-body); }
.cpp-vfx .vfx-callout strong { color:var(--vfx-ink); }

/* Comparison-table good/bad cell accents */
.cpp-vfx .vfx-table td.is-yes { color:#1f7a5b; font-weight:700; }
.cpp-vfx .vfx-table td.is-no  { color:#b42318; font-weight:600; }
.cpp-vfx .vfx-table .vfx-th-hl { background:#FBF0DA; color:var(--vfx-blue); }

/* Definition / key-term block */
.cpp-vfx .vfx-deflist { max-width:880px; margin:0 auto; display:grid; gap:14px; }
.cpp-vfx .vfx-def { border:1px solid var(--vfx-line); border-radius:14px; padding:18px 20px; background:#fff; }
.cpp-vfx .vfx-def h4 { margin:0 0 6px; font-size:16px; color:var(--vfx-ink); }
.cpp-vfx .vfx-def p { margin:0; font-size:14.5px; line-height:1.65; color:var(--vfx-body); }

@media (max-width:860px){
  .cpp-vfx .vfx-statband { grid-template-columns:1fr 1fr; }
  .cpp-vfx .vfx-split { grid-template-columns:1fr; gap:28px; }
  .cpp-vfx .vfx-split--rev .vfx-split-media { order:0; }
}
@media (max-width:560px){
  .cpp-vfx .vfx-statband { grid-template-columns:1fr; }
}

/* ============================================================
   3D / premium polish layer (added — depth, focus glow, lift)
   Appended so all existing layout rules above stay untouched.
   ============================================================ */
.cpp-vfx .vfx-auth-form input,
.cpp-vfx .vfx-auth-form select {
    box-shadow: inset 0 2px 4px rgba(15,23,42,.06);
    transition: box-shadow .2s ease, border-color .2s ease;
}
.cpp-vfx .vfx-auth-form input:focus,
.cpp-vfx .vfx-auth-form select:focus {
    box-shadow: inset 0 2px 4px rgba(15,23,42,.06), 0 0 0 3px rgba(238,181,65,.25);
}
.cpp-vfx .vfx-auth-card,
.cpp-vfx .vfx-card,
.cpp-vfx .vfx-panel {
    box-shadow: 0 18px 40px -18px rgba(198,145,42,.25), 0 4px 10px -4px rgba(15,23,42,.08) !important;
    transition: transform .2s ease, box-shadow .2s ease;
}
.cpp-vfx .vfx-btn,
.cpp-vfx button[type=submit],
.cpp-vfx input[type=submit],
.cpp-vfx .vfx-auth-submit {
    box-shadow: 0 2px 0 rgba(255,255,255,.5) inset, 0 10px 24px -10px rgba(198,145,42,.5) !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
}
.cpp-vfx .vfx-btn:hover,
.cpp-vfx button[type=submit]:hover,
.cpp-vfx input[type=submit]:hover,
.cpp-vfx .vfx-auth-submit:hover {
    transform: translateY(-2px);
}