@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;1,9..144,400&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

/* ── RESET — override theme interference ── */
#vj-ba-root,
#vj-ba-root *{box-sizing:border-box!important;margin:0;padding:0;font-synthesis:none}
#vj-ba-root button,
#vj-ba-root a,
#vj-ba-root input,
#vj-ba-root textarea{
    background:transparent!important;
    color:inherit!important;
    border:none!important;
    border-radius:0!important;
    box-shadow:none!important;
    text-decoration:none!important;
    -webkit-appearance:none!important;
    appearance:none!important;
}

/* ── CONTAINER ── */
#vj-ba-root{
    background:#0A0A0C!important;
    color:#F0EEE6!important;
    font-family:'EB Garamond',Georgia,serif!important;
    font-weight:500!important;
    max-width:640px;
    margin:0 auto;
    padding:0 28px!important;
    min-height:420px;
    border-radius:4px;
}

/* v7.39 — FIXED. The 640px cap above was applied to the ENTIRE plugin,
   quiz AND results both — confirmed as the real root cause of the
   "narrow, scrollable, not a real landing page" complaint. Quiz screens
   genuinely benefit from staying narrow (one question at a time, focus
   matters there) — but the results/free page is a completely different
   context and needs real landing-page width. Scoped override, only
   applies to #s-results, quiz flow is completely untouched. */
#vj-ba-root.vj-root-wide{max-width:760px!important}
#vj-ba-root:has(#s-results.active){max-width:760px!important}
#vj-ba-root #s-results{max-width:680px!important;margin:0 auto!important}
#vj-ba-root #s-results .vj-score-title{font-size:26px!important}
#vj-ba-root #s-results .vj-score-circle{width:130px!important;height:130px!important}
#vj-ba-root #s-results .vj-score-num{font-size:38px!important}

/* ── SCREENS ── */
#vj-ba-root .vj-ba-screen{display:none!important}
#vj-ba-root .vj-ba-screen.active{display:block!important}

/* ── EYEBROW ── */
#vj-ba-root .vj-eyebrow{
    font-family:'EB Garamond',Georgia,serif!important;
    font-size:11px!important;
    font-weight:400!important;
    letter-spacing:.2em!important;
    text-transform:uppercase!important;
    color:#D4FF00!important;
    margin-bottom:18px!important;
    display:block!important;
}

/* ── INTRO ── */
#vj-ba-root .vj-intro{padding:36px 0 32px!important;text-align:center!important}

#vj-ba-root .vj-title{
    font-family:'Fraunces',Georgia,serif!important;
    font-weight:400!important;
    font-style:normal!important;
    font-size:clamp(28px,5vw,44px)!important;
    line-height:1.05!important;
    color:#F0EEE6!important;
    margin-bottom:26px!important;
    letter-spacing:-.3px!important;
}
#vj-ba-root .vj-title em{
    color:#D4FF00!important;
    font-style:normal!important;
    font-weight:600!important;
    font-family:'Fraunces',Georgia,serif!important;
}
/* v8.8 — NEW. Status-gap subheadline under the H1. */
#vj-ba-root .vj-intro-sub{
    font-family:'EB Garamond',Georgia,serif!important;font-size:14.5px!important;font-weight:500!important;
    color:#C9C9C2!important;line-height:1.55!important;max-width:410px!important;
    margin:0 auto 26px!important;text-align:center!important;
}
/* v8.8 — NEW. Teaser under the button — names the concrete free payoff
   (positioning statement) and the paid destination by name, deliberately
   without explaining what's inside it (curiosity gap, not a spec sheet). */
#vj-ba-root .vj-intro-teaser{
    font-family:'EB Garamond',Georgia,serif!important;font-size:13.5px!important;font-weight:500!important;
    color:#97C459!important;line-height:1.5!important;max-width:420px!important;
    margin:0 auto 16px!important;text-align:center!important;
}
#vj-ba-root .vj-h2{
    font-family:'EB Garamond',Georgia,serif!important;
    font-style:normal!important;
    font-size:19px!important;
    font-weight:500!important;
    color:#D4FF00!important;
    line-height:1.5!important;
    margin-bottom:22px!important;
    max-width:480px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    display:block!important;
}
#vj-ba-root .vj-subtitle{
    font-family:'EB Garamond',Georgia,serif!important;
    font-size:17px!important;
    font-weight:400!important;
    color:#888880!important;
    line-height:1.65!important;
    margin-bottom:24px!important;
    max-width:460px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    display:block!important;
}
#vj-ba-root .vj-meta-row{
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
    gap:12px 20px!important;
    margin-bottom:28px!important;
}
#vj-ba-root .vj-meta-item{
    font-family:'EB Garamond',Georgia,serif!important;
    font-size:14px!important;
    font-weight:400!important;
    color:#8A8A80!important;
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
}
#vj-ba-root .vj-volt{color:#D4FF00!important}

/* ── TEASER GAUGE (intro screen only) ── */
#vj-ba-root .vj-ba-gauge-wrap{
    width:100%!important;
    max-width:280px!important;
    margin:0 auto 20px!important;
}
#vj-ba-root .vj-ba-gauge-wrap svg{
    width:100%!important;
    height:auto!important;
    display:block!important;
    overflow:visible!important;
}
#vj-ba-root .vj-ba-track{
    fill:none!important;
    stroke:#48484E!important;
    stroke-width:14!important;
    stroke-linecap:round!important;
}
#vj-ba-root .vj-ba-progress{
    fill:none!important;
    stroke:#D4FF00!important;
    stroke-width:14!important;
    stroke-linecap:round!important;
    filter:drop-shadow(0 0 5px rgba(212,255,0,.6)) drop-shadow(0 0 12px rgba(212,255,0,.28));
}
#vj-ba-root .vj-ba-needle{
    stroke:#D4FF00!important;
    stroke-width:5!important;
    stroke-linecap:round!important;
    filter:drop-shadow(0 0 4px rgba(212,255,0,.75));
}
#vj-ba-root .vj-ba-pivot{
    fill:#111!important;
    stroke:#48484E!important;
    stroke-width:2!important;
}
#vj-ba-root .vj-ba-tick{
    font-family:'EB Garamond',Georgia,serif!important;
    font-size:13px!important;
    fill:#888880!important;
    display:none!important; /* tick numbers stay hidden — quieter gauge, per the approved mockup */
}
#vj-ba-root .vj-ba-score-num{
    font-family:'Fraunces',Georgia,serif!important;
    font-weight:400!important;
    font-size:30px!important;
    letter-spacing:.5px!important;
    fill:#F0EEE6!important;
    display:block!important; /* v7.6 — brought back: the live-moving number IS the hook, not flat placeholder text */
}
#vj-ba-root .vj-ba-score-den{
    font-family:'EB Garamond',Georgia,serif!important;
    font-size:12px!important;
    fill:#8A8A80!important;
}
#vj-ba-root .vj-gauge-placeholder{
    display:none!important; /* replaced by the live animated number + /100 label inside the SVG itself */
}
@media (prefers-reduced-motion: reduce){
    #vj-ba-root .vj-ba-gauge-wrap *{transition:none!important;}
}

/* ── BUTTONS ── */
body #vj-ba-root button.vj-btn-primary,
body #vj-ba-root a.vj-btn-primary{
    display:block!important;
    width:100%!important;
    background-color:#D4FF00!important;
    color:#0A0A0C!important;
    font-family:'Fraunces',Georgia,serif!important;
    font-weight:700!important;
    font-size:16px!important;
    padding:15px 24px!important;
    border:none!important;
    border-radius:10px!important;
    cursor:pointer!important;
    letter-spacing:.02em!important;
    text-align:center!important;
    text-decoration:none!important;
    box-shadow:none!important;
    outline:none!important;
    line-height:1.2!important;
    transition:background .15s!important;
}
body #vj-ba-root button.vj-btn-primary:hover,
body #vj-ba-root button.vj-btn-primary:focus,
body #vj-ba-root button.vj-btn-primary:active,
body #vj-ba-root button.vj-btn-primary:visited,
body #vj-ba-root a.vj-btn-primary:hover,
body #vj-ba-root a.vj-btn-primary:focus,
body #vj-ba-root a.vj-btn-primary:active,
body #vj-ba-root a.vj-btn-primary:visited{
    background-color:#bcff00!important;
    color:#0A0A0C!important;
    outline:none!important;
    box-shadow:none!important;
}
#vj-ba-root .vj-btn-primary:disabled{opacity:.4!important;cursor:not-allowed!important}
body #vj-ba-root button.vj-btn-back{
    background-color:transparent!important;
    border:none!important;
    color:#8A8A80!important;
    font-size:15px!important;
    cursor:pointer!important;
    font-family:'EB Garamond',Georgia,serif!important;
    font-weight:400!important;
    padding:12px 4px!important;
    display:flex!important;
    align-items:center!important;
    gap:5px!important;
    box-shadow:none!important;
    text-decoration:none!important;
    line-height:1.2!important;
}
body #vj-ba-root button.vj-btn-back:hover,
body #vj-ba-root button.vj-btn-back:focus{color:#888!important;background-color:transparent!important}

/* ── QUESTIONS SCREEN WRAPPER — adds the bottom padding every other
   screen already has (.vj-intro / .vj-gate / .vj-results / .vj-download)
   so the Back/Next row never sits flush against the root container's
   edge (was causing cropped corners on the nav buttons). Top spacing is
   already handled by .vj-progress-wrap below, so only bottom is added
   here to avoid doubling the gap above the progress bar. ── */
#vj-ba-root #vj-q-wrap{padding-bottom:40px!important}

/* ── PROGRESS ── */
#vj-ba-root .vj-quiz-progress-wrap{padding:24px 0 0!important}
#vj-ba-root .vj-progress-hdr{display:flex!important;justify-content:space-between!important;margin-bottom:8px!important}
#vj-ba-root .vj-progress-sec{
    font-size:10px!important;letter-spacing:.18em!important;
    text-transform:uppercase!important;color:#D4FF00!important;
    font-family:'EB Garamond',Georgia,serif!important;font-weight:400!important;
}
#vj-ba-root .vj-progress-cnt{font-size:12px!important;color:#F0EEE6!important;font-family:Arial,-apple-system,sans-serif!important;background:#1A1A1F!important;padding:3px 10px!important;border-radius:10px!important}

/* ── SEGMENTED QUIZ PROGRESS BAR — one bar per question instead of a
   single continuous fill, so it's clear exactly how many remain. ── */
#vj-ba-root .vj-qseg-row{display:flex!important;gap:4px!important;margin-bottom:28px!important;}
#vj-ba-root .vj-qseg{flex:1!important;height:5px!important;border-radius:3px!important;background:#1A1A1E!important;transition:background .3s!important;}
#vj-ba-root .vj-qseg.filled{background:#D4FF00!important;}

/* ── QUESTION TEXT ── */
#vj-ba-root .vj-q-text{
    font-family:'Fraunces',Georgia,serif!important;
    font-weight:400!important;
    font-size:clamp(19px,3vw,24px)!important;
    color:#F0EEE6!important;
    line-height:1.3!important;
    margin-bottom:6px!important;
}
#vj-ba-root .vj-q-hint{
    font-size:14px!important;color:#8A8A80!important;
    font-style:normal!important;margin-bottom:18px!important;
    font-family:'EB Garamond',Georgia,serif!important;font-weight:400!important;
}

/* ── OPTIONS — kill all theme overrides ── */
#vj-ba-root .vj-options{display:flex!important;flex-direction:column!important;gap:8px!important;margin-bottom:20px!important}
body #vj-ba-root button.vj-option,
body #vj-ba-root button.vj-followup-option{
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    padding:13px 16px!important;
    background-color:#0D0D10!important;
    border:1px solid #3A3A3E!important;
    border-radius:0!important;
    cursor:pointer!important;
    font-family:'EB Garamond',Georgia,serif!important;
    font-size:16px!important;
    font-weight:400!important;
    color:#C8C6BE!important;
    text-align:left!important;
    width:100%!important;
    box-shadow:none!important;
    outline:none!important;
    text-decoration:none!important;
    transition:border-color .15s,color .15s!important;
}
body #vj-ba-root button.vj-option:hover,
body #vj-ba-root button.vj-option:focus,
body #vj-ba-root button.vj-option:focus-visible,
body #vj-ba-root button.vj-option:active,
body #vj-ba-root button.vj-option:visited,
body #vj-ba-root button.vj-followup-option:hover,
body #vj-ba-root button.vj-followup-option:focus,
body #vj-ba-root button.vj-followup-option:focus-visible,
body #vj-ba-root button.vj-followup-option:active,
body #vj-ba-root button.vj-followup-option:visited{
    border-color:#D4FF00!important;
    color:#F0EEE6!important;
    background-color:#0D0D10!important;
    outline:none!important;
    box-shadow:none!important;
    text-decoration:none!important;
}
body #vj-ba-root button.vj-option.selected,
body #vj-ba-root button.vj-option.selected:hover,
body #vj-ba-root button.vj-option.selected:focus,
body #vj-ba-root button.vj-option.selected:active,
body #vj-ba-root button.vj-followup-option.selected,
body #vj-ba-root button.vj-followup-option.selected:hover,
body #vj-ba-root button.vj-followup-option.selected:focus,
body #vj-ba-root button.vj-followup-option.selected:active{
    border-color:#D4FF00!important;
    background-color:rgba(212,255,0,.06)!important;
    color:#F0EEE6!important;
}
#vj-ba-root button,
#vj-ba-root button:hover,
#vj-ba-root button:focus,
#vj-ba-root button:active,
#vj-ba-root button:visited,
#vj-ba-root a,
#vj-ba-root a:hover,
#vj-ba-root a:focus,
#vj-ba-root a:active,
#vj-ba-root a:visited{
    -webkit-tap-highlight-color:transparent!important;
    accent-color:#D4FF00!important;
}
#vj-ba-root .vj-check{
    width:18px!important;height:18px!important;
    border-radius:50%!important;
    border:1px solid #48484E!important;
    flex-shrink:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:10px!important;
    font-family:'EB Garamond',Georgia,serif!important;
    background:transparent!important;
    color:transparent!important;
    transition:all .15s!important;
}
#vj-ba-root .vj-option.selected .vj-check,
#vj-ba-root .vj-followup-option.selected .vj-check{
    background:#D4FF00!important;
    border-color:#D4FF00!important;
    color:#0A0A0C!important;
}

/* ── TEXT INPUT ── */
#vj-ba-root .vj-text-input-wrap{margin-bottom:20px!important}
#vj-ba-root .vj-textarea{
    width:100%!important;
    background:#0D0D10!important;
    border:1px solid #48484E!important;
    color:#F0EEE6!important;
    font-family:'EB Garamond',Georgia,serif!important;
    font-size:16px!important;
    font-weight:400!important;
    padding:13px 16px!important;
    outline:none!important;
    border-radius:0!important;
    resize:vertical!important;
    min-height:64px!important;
    line-height:1.5!important;
    box-shadow:none!important;
}
#vj-ba-root .vj-textarea::placeholder{color:#7A7A72!important}
#vj-ba-root .vj-textarea:focus{border-color:#D4FF00!important;outline:none!important;box-shadow:none!important}

/* ── Q NAV ── */
#vj-ba-root .vj-q-nav{display:flex!important;justify-content:space-between!important;align-items:center!important;margin-top:24px!important;padding-top:4px!important}
#vj-ba-root .vj-q-nav .vj-btn-primary{width:auto!important;padding:13px 28px!important}

/* ── GATE ── */
#vj-ba-root .vj-gate{padding:40px 0!important;text-align:center!important}
#vj-ba-root .vj-score-preview{
    background:#0D0D10!important;border:1px solid #3A3A3E!important;
    border-top:2px solid #D4FF00!important;padding:28px!important;
    margin-bottom:24px!important;position:relative!important;overflow:hidden!important;
}
#vj-ba-root .vj-preview-score{
    font-family:'Fraunces',Georgia,serif!important;font-weight:400!important;
    font-size:64px!important;color:#D4FF00!important;line-height:1!important;display:block!important;
}
#vj-ba-root .vj-preview-label{
    font-family:'EB Garamond',Georgia,serif!important;font-size:12px!important;
    color:#9B9A94!important;letter-spacing:.1em!important;text-transform:uppercase!important;
    display:block!important;margin-top:6px!important;
}
#vj-ba-root .vj-preview-blur-overlay{
    position:absolute!important;inset:0!important;
    background:rgba(10,10,12,.45)!important;
    backdrop-filter:blur(4px)!important;
}
#vj-ba-root .vj-gate-title{
    font-family:'Fraunces',Georgia,serif!important;font-weight:400!important;
    font-size:26px!important;color:#F0EEE6!important;margin-bottom:10px!important;
}
#vj-ba-root .vj-gate-sub{
    font-family:'EB Garamond',Georgia,serif!important;font-size:17px!important;
    color:#888880!important;line-height:1.6!important;margin-bottom:24px!important;
    max-width:480px!important;margin-left:auto!important;margin-right:auto!important;
}
#vj-ba-root .vj-gate-form{display:flex!important;flex-direction:column!important;gap:10px!important;margin-bottom:12px!important}
#vj-ba-root .vj-dashboard-pending-note{
    font-family:'EB Garamond',Georgia,serif!important;font-size:13px!important;font-weight:500!important;
    color:#9B9A94!important;background:#151517!important;border:0.5px solid #2E2E31!important;
    border-radius:8px!important;padding:12px 16px!important;margin:16px auto!important;max-width:420px!important;
}
#vj-ba-root .vj-input{
    width:100%!important;background:#0D0D10!important;
    border:1px solid #48484E!important;color:#F0EEE6!important;
    font-family:'EB Garamond',Georgia,serif!important;font-size:16px!important;
    font-weight:400!important;padding:13px 16px!important;outline:none!important;
    border-radius:0!important;box-shadow:none!important;
}
#vj-ba-root .vj-input::placeholder{color:#7A7A72!important}
#vj-ba-root .vj-input:focus{border-color:#D4FF00!important;outline:none!important;box-shadow:none!important}

/* ── POSITIONING SENTENCE — one flowing sentence with inline blanks,
   replacing the earlier 4 stacked boxes. Inline inputs are sized to
   their content and sit directly in the text flow so the whole thing
   reads as a sentence being completed, not a form being filled out. ── */
#vj-ba-root .vj-pos-sentence{
    font-family:'EB Garamond',Georgia,serif!important;font-size:19px!important;
    line-height:2!important;color:#F0EEE6!important;margin-bottom:8px!important;
}
body #vj-ba-root input.vj-pos-inline-input{
    display:inline-flex!important;vertical-align:baseline!important;
    width:auto!important;max-width:100%!important;flex:0 0 auto!important;
    background:transparent!important;
    border:none!important;border-bottom:1.5px solid rgba(240,238,230,.35)!important;
    color:#F0EEE6!important;font-family:'EB Garamond',Georgia,serif!important;
    font-style:normal!important;font-size:19px!important;padding:6px 6px!important;
    outline:none!important;box-shadow:none!important;border-radius:0!important;
    min-width:60px!important;
}
body #vj-ba-root input.vj-pos-inline-input::placeholder{color:#8A8A80!important;font-style:normal!important}
body #vj-ba-root input.vj-pos-inline-input:focus{border-bottom-color:#D4FF00!important;background:rgba(212,255,0,.06)!important}
body #vj-ba-root input.vj-pos-inline-input-optional{font-size:16px!important;color:#F0EEE6!important}
#vj-ba-root .vj-pos-sentence{line-height:2.3!important}
#vj-ba-root .vj-pos-optional-result{margin-top:18px!important;padding-top:16px!important;border-top:1px solid #3A3A3E!important}
#vj-ba-root .vj-pos-optional-label{font-family:'EB Garamond',Georgia,serif!important;font-size:13px!important;color:#9B9A94!important;margin-bottom:8px!important}
#vj-ba-root .vj-pos-sentence-secondary{font-size:16px!important}
/* Full worked example — shown once above the sentence, so people see
   the whole shape of what they're building before touching any blank. */
#vj-ba-root .vj-pos-worked-example{
    background:rgba(212,255,0,.05)!important;border:1px solid rgba(212,255,0,.25)!important;
    border-radius:4px!important;padding:12px 16px!important;margin-bottom:18px!important;
}
#vj-ba-root .vj-pos-worked-label{
    font-family:Arial,sans-serif!important;font-size:10px!important;letter-spacing:.05em!important;
    text-transform:uppercase!important;color:#D4FF00!important;margin-bottom:5px!important;font-weight:600!important;
}
#vj-ba-root .vj-pos-worked-text{
    font-family:'EB Garamond',Georgia,serif!important;font-size:13.5px!important;
    color:#C8C6BE!important;font-style:normal!important;line-height:1.5!important;
}
#vj-ba-root .vj-gate-note{font-family:'EB Garamond',Georgia,serif!important;font-size:13px!important;color:#8A8A80!important;font-style:normal!important}
#vj-ba-root .vj-error{color:#ff6b6b!important;font-size:14px!important;margin-top:8px!important;font-family:'EB Garamond',Georgia,serif!important;display:none!important}

/* ── LOADING ── */
#vj-ba-root .vj-loading{text-align:center!important;padding:60px 20px!important}
#vj-ba-root .vj-spinner{
    width:40px!important;height:40px!important;
    border:3px solid #3A3A3E!important;border-top-color:#D4FF00!important;
    border-radius:50%!important;animation:vjspin .8s linear infinite!important;
    margin:0 auto 16px!important;
}
@keyframes vjspin{to{transform:rotate(360deg)}}
#vj-ba-root .vj-loading p{font-family:'EB Garamond',Georgia,serif!important;font-size:16px!important;color:#888!important;font-style:normal!important}

/* ── RESULTS ── */
#vj-ba-root .vj-results{padding:40px 0!important}

/* D2 — free-page toolbar (mode toggle + download) */
#vj-ba-root .vj-results-toolbar{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:10px!important;margin-bottom:24px!important;flex-wrap:wrap!important}
body #vj-ba-root .vj-download-free-btn{
    font-family:'EB Garamond',Georgia,serif!important;font-size:13px!important;font-weight:500!important;
    background-color:#D4FF00!important;color:#0A0A0C!important;border:none!important;
    padding:8px 16px!important;border-radius:3px!important;cursor:pointer!important;white-space:nowrap!important;
}
body #vj-ba-root .vj-download-free-btn:hover,
body #vj-ba-root .vj-download-free-btn:focus{background-color:#D4FF00!important;color:#0A0A0C!important;outline:none!important}

#vj-ba-root .vj-score-wrap{text-align:center!important;margin-bottom:28px!important;position:relative!important;overflow:hidden!important;padding-top:8px!important}
@keyframes vj-multiglow-rotate{0%{transform:translateX(-50%) rotate(0deg);}100%{transform:translateX(-50%) rotate(360deg);}}
#vj-ba-root .vj-score-glow{
    position:absolute!important;top:-60px!important;left:50%!important;width:380px!important;height:380px!important;
    background:conic-gradient(from 0deg, rgba(212,255,0,0.10), rgba(10,102,194,0.08), rgba(196,30,58,0.07), rgba(212,255,0,0.10))!important;
    border-radius:50%!important;filter:blur(36px)!important;pointer-events:none!important;
    -webkit-mask-image:radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0) 78%)!important;
    mask-image:radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0) 78%)!important;
    animation:vj-multiglow-rotate 8s linear infinite!important;
}
#vj-ba-root .vj-score-eyebrow{position:relative!important;color:#8A8A80!important;font-size:10px!important;letter-spacing:.16em!important;text-transform:uppercase!important;margin:0 0 14px!important}
#vj-ba-root .vj-score-circle{
    position:relative!important;width:110px!important;height:110px!important;border-radius:50%!important;
    background:#0D0D10!important;border:3px solid #D4FF00!important;
    display:flex!important;flex-direction:column!important;
    align-items:center!important;justify-content:center!important;margin:0 auto 14px!important;
}
#vj-ba-root .vj-score-num{font-family:'Fraunces',Georgia,serif!important;font-weight:400!important;font-size:34px!important;color:#D4FF00!important;line-height:1!important}
#vj-ba-root .vj-score-den{font-family:'EB Garamond',Georgia,serif!important;font-size:12px!important;color:#8A8A80!important}
#vj-ba-root .vj-score-hey{position:relative!important;font-family:'Fraunces',Georgia,serif!important;font-weight:400!important;font-size:22px!important;color:#F0EEE6!important;margin-bottom:4px!important}
#vj-ba-root .vj-score-status{position:relative!important;font-family:'EB Garamond',Georgia,serif!important;font-size:14px!important;color:#D4FF00!important;margin-bottom:12px!important}
#vj-ba-root .vj-score-sub{position:relative!important;font-family:'EB Garamond',Georgia,serif!important;font-size:14px!important;color:#C8C6BE!important;font-style:normal!important;line-height:1.65!important;max-width:520px!important;margin:0 auto!important}

/* ── DIVIDER ── */
#vj-ba-root .vj-divider{display:flex!important;align-items:center!important;gap:14px!important;margin:24px 0 18px!important}
#vj-ba-root .vj-divider hr{flex:1!important;border:none!important;border-top:.5px solid #3A3A3E!important}
#vj-ba-root .vj-divider span{font-family:'EB Garamond',Georgia,serif!important;font-size:10px!important;letter-spacing:.18em!important;text-transform:uppercase!important;color:#8A8A80!important;white-space:nowrap!important}

/* ── WEAK AREAS ── */
#vj-ba-root .vj-weak-item{background:#0D0D10!important;border:1px solid #3A3A3E!important;border-left:2px solid #D4FF00!important;border-radius:0!important;padding:16px 18px!important;margin-bottom:10px!important}
#vj-ba-root .vj-weak-title{font-family:'Fraunces',Georgia,serif!important;font-weight:400!important;font-size:17px!important;color:#F0EEE6!important;margin-bottom:5px!important}
#vj-ba-root .vj-weak-diag{font-family:'EB Garamond',Georgia,serif!important;font-size:15px!important;color:#888880!important;line-height:1.55!important;margin-bottom:8px!important}
#vj-ba-root .vj-weak-task{font-family:'EB Garamond',Georgia,serif!important;font-size:14px!important;color:#C8C6BE!important;background:rgba(212,255,0,.05)!important;border-left:2px solid #D4FF00!important;border-radius:0!important;padding:8px 12px!important;line-height:1.5!important;display:block!important}
#vj-ba-root .vj-weak-task strong{color:#D4FF00!important;font-size:10px!important;letter-spacing:.1em!important;text-transform:uppercase!important;display:block!important;margin-bottom:3px!important;font-family:'EB Garamond',Georgia,serif!important}

/* ── LOCKED MORE CARD (A4 — remaining weak areas, visible-but-inaccessible) ── */
#vj-ba-root .vj-locked-more{border:1px dashed #48484E!important;padding:18px!important;text-align:center!important;margin-bottom:10px!important}
#vj-ba-root .vj-locked-more-n{font-family:'Fraunces',Georgia,serif!important;font-size:20px!important;color:#D4FF00!important;margin-bottom:4px!important;display:block!important}
#vj-ba-root .vj-locked-more-t{font-family:'EB Garamond',Georgia,serif!important;font-size:14px!important;color:#888!important;font-style:normal!important;display:block!important}

/* ── OUTCOME BOX ── */
#vj-ba-root .vj-outcome-box{background:#0D0D10!important;border:1px solid #3A3A3E!important;border-top:2px solid #D4FF00!important;padding:18px 20px!important}
#vj-ba-root .vj-outcome-text{font-family:'Fraunces',Georgia,serif!important;font-weight:500!important;font-style:normal!important;font-size:16px!important;color:#F0EEE6!important;line-height:1.5!important;margin-bottom:10px!important}
#vj-ba-root .vj-outcome-disclaimer{font-family:'EB Garamond',Georgia,serif!important;font-size:12px!important;color:#9B9A94!important;line-height:1.5!important}

/* ── D2: LIGHT-MODE OVERRIDE FOR FREE RESULTS SCREEN ONLY ──
   Toggled via .vj-light-preview on #vj-ba-root. Scoped to #s-results
   descendants only — intro/questions/gate/teaser screens are
   untouched, since D2 only asked for a toggle on the free results
   page. Color values match vj_ba_get_theme('light') in pdf-page1.php
   for visual consistency with the PDF's own light mode.
   showScreen() in script.js guarantees .vj-light-preview is removed
   whenever navigating to any screen other than results, so this rule
   can be a plain unconditional override — the class is never present
   on the wrong screen by construction, not by a CSS-level workaround. */
#vj-ba-root.vj-light-preview{background:#F3EDE6!important}
#vj-ba-root.vj-light-preview #s-results{background:#F3EDE6!important}
#vj-ba-root.vj-light-preview #s-results .vj-score-circle{background:#E6DFD2!important;border-color:#6B5738!important}
#vj-ba-root.vj-light-preview #s-results .vj-score-num{color:#6B5738!important}
#vj-ba-root.vj-light-preview #s-results .vj-score-den{color:#8C8170!important}
#vj-ba-root.vj-light-preview #s-results .vj-score-title{color:#2B2418!important}
#vj-ba-root.vj-light-preview #s-results .vj-score-sub{color:#5C5240!important}
#vj-ba-root.vj-light-preview #s-results .vj-score-hey{color:#2B2418!important}
#vj-ba-root.vj-light-preview #s-results .vj-score-status{color:#6B5738!important}
#vj-ba-root.vj-light-preview #s-results .vj-divider span{color:#8C8170!important}
#vj-ba-root.vj-light-preview #s-results .vj-divider hr{border-top-color:#D4C9B5!important}
#vj-ba-root.vj-light-preview #s-results .vj-opportunity-box{background:#E6DFD2!important;border-color:#6B5738!important}
#vj-ba-root.vj-light-preview #s-results .vj-opportunity-head{color:#2B2418!important}
#vj-ba-root.vj-light-preview #s-results .vj-opportunity-diag{color:#5C5240!important}
#vj-ba-root.vj-light-preview #s-results .vj-opportunity-outcome{color:#2B2418!important;border-top-color:#D4C9B5!important;font-weight:500!important}
#vj-ba-root.vj-light-preview #s-results .vj-opportunity-more{color:#8C8170!important}
#vj-ba-root.vj-light-preview #s-results .vj-locked-more{border-color:#C2B49C!important}
#vj-ba-root.vj-light-preview #s-results .vj-locked-more-n{color:#6B5738!important}
#vj-ba-root.vj-light-preview #s-results .vj-locked-more-t{color:#8C8170!important}
#vj-ba-root.vj-light-preview #s-results .vj-h2{color:#2B2418!important}

/* v7.18 — light-mode coverage for everything added since the toggle was
   first built: proof section, suggestions, roadmap, checklist, teaser
   card. None of these had ANY light-theme override before, so text was
   genuinely invisible (hardcoded near-white on the light cream bg). */
#vj-ba-root.vj-light-preview #s-results .vj-proof-unlocked{background:#E6DFD2!important;border-color:#D4C9B5!important}
#vj-ba-root.vj-light-preview #s-results .vj-proof-label{color:#6B5738!important}
#vj-ba-root.vj-light-preview #s-results .vj-proof-sub{color:#8C8170!important}
#vj-ba-root.vj-light-preview #s-results .vj-proof-text{color:#2B2418!important}
#vj-ba-root.vj-light-preview #s-results .vj-proof-raw-label,
#vj-ba-root.vj-light-preview #s-results .vj-proof-suggest-label{color:#6B5738!important}
#vj-ba-root.vj-light-preview #s-results .vj-proof-raw-key{color:#8C8170!important}
#vj-ba-root.vj-light-preview #s-results .vj-proof-raw-val{color:#2B2418!important}
#vj-ba-root.vj-light-preview #s-results .vj-proof-suggestion{background:#F3EDE6!important;border-color:#D4C9B5!important}
#vj-ba-root.vj-light-preview #s-results .vj-roadmap-label{color:#8C8170!important}
#vj-ba-root.vj-light-preview #s-results .vj-roadmap-row{border-color:#D4C9B5!important;color:#2B2418!important}
#vj-ba-root.vj-light-preview #s-results .vj-roadmap-row-weakest{border-color:#6B5738!important;border-width:2px!important;background:rgba(134,115,89,.16)!important}
#vj-ba-root.vj-light-preview #s-results .vj-roadmap-status{color:#2B2418!important;font-weight:600!important}
#vj-ba-root.vj-light-preview #s-results .vj-lock-icon-svg.vj-lock-closed{color:#8C8170!important}
#vj-ba-root.vj-light-preview #s-results .vj-lock-icon-svg.vj-lock-open{color:#6B5738!important}
#vj-ba-root.vj-light-preview #s-results .vj-fix-item{background:#F3EDE6!important;border-color:#D4C9B5!important}
#vj-ba-root.vj-light-preview #s-results .vj-fix-name{color:#2B2418!important}
#vj-ba-root.vj-light-preview #s-results .vj-teaser-wrap,
#vj-ba-root.vj-light-preview #s-results .vj-teaser-card{background:#F3EDE6!important;border-color:#6B5738!important}
#vj-ba-root.vj-light-preview #s-results .vj-lock-step-label{color:#8C8170!important}
#vj-ba-root.vj-light-preview #s-results .vj-lock-title-main{color:#2B2418!important}
#vj-ba-root.vj-light-preview #s-results .vj-lock-title{color:#2B2418!important}
#vj-ba-root.vj-light-preview #s-results .vj-report-toggle{color:#6B5738!important}
#vj-ba-root.vj-light-preview #s-results .vj-outcome-bridge{color:#5C5240!important}

/* v9.4 — FIXED. Everything below was built with hardcoded dark-mode
   colors and never got a light-mode counterpart at all — meaning the
   CTA box, module list, model bar, and trust notes stayed stuck dark
   regardless of the toggle, creating jarring dark "islands" floating
   in an otherwise light page instead of actually switching. */
#vj-ba-root.vj-light-preview #s-results .vj-cta-box{
    background:linear-gradient(180deg,#F3EDE6,#E6DFD2)!important;border-color:#D4C9B5!important;
    box-shadow:0 20px 50px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.4)!important;
}
#vj-ba-root.vj-light-preview #s-results .vj-cta-headline{color:#2B2418!important}
#vj-ba-root.vj-light-preview #s-results .vj-cta-highlight{color:#6B5738!important}
#vj-ba-root.vj-light-preview #s-results .vj-cta-paragraph{color:#5C5240!important}
#vj-ba-root.vj-light-preview #s-results .vj-lock-note{color:#8C8170!important}
#vj-ba-root.vj-light-preview #s-results .vj-unlocks-label{color:#8C8170!important}
#vj-ba-root.vj-light-preview #s-results .vj-section-divider{background:#D4C9B5!important}
#vj-ba-root.vj-light-preview #s-results .vj-dash-preview-list{background:#F3EDE6!important;border-color:#D4C9B5!important}
#vj-ba-root.vj-light-preview #s-results .vj-dash-preview-row-top{color:#8C8170!important}
#vj-ba-root.vj-light-preview #s-results .vj-dash-preview-row-unlocked .vj-dash-preview-row-top{color:#2B2418!important}
#vj-ba-root.vj-light-preview #s-results .vj-dash-preview-row-unlocked{background:#E6DFD2!important}
#vj-ba-root.vj-light-preview #s-results .vj-dash-preview-desc{color:#8C8170!important}
#vj-ba-root.vj-light-preview #s-results .vj-dash-preview-lock{color:#8C8170!important}
#vj-ba-root.vj-light-preview #s-results .vj-dash-preview-check{color:#5C8A5C!important}
#vj-ba-root.vj-light-preview #s-results .vj-model-seg-free{background:#E6DFD2!important;color:#6B5738!important}
#vj-ba-root.vj-light-preview #s-results .vj-model-seg-paid{background:#DCD3C2!important;color:#8C8170!important}
#vj-ba-root.vj-light-preview #s-results .vj-not-ai-note{color:#8C8170!important}
#vj-ba-root.vj-light-preview #s-results .vj-refund-note{color:#8C8170!important}
#vj-ba-root.vj-light-preview #s-results .vj-already-purchased a{color:#6B5738!important}
#vj-ba-root.vj-light-preview #s-results .vj-proof-suggestion-best{border-left-color:#6B5738!important}
#vj-ba-root.vj-light-preview #s-results .vj-proof-best-tag{background:#6B5738!important;color:#F3EDE6!important}
#vj-ba-root.vj-light-preview #s-results .vj-proof-personalized-note{color:#5C8A5C!important}
#vj-ba-root.vj-light-preview #s-results .vj-breakdown-row-weakest{border-color:#6B5738!important;background:rgba(134,115,89,.10)!important}
#vj-ba-root.vj-light-preview #s-results .vj-breakdown-row-weakest .vj-breakdown-row-top{color:#2B2418!important}
#vj-ba-root.vj-light-preview #s-results .vj-breakdown-row-top{color:#5C5240!important}
#vj-ba-root.vj-light-preview #s-results .vj-breakdown-row-weakest .vj-breakdown-comment{color:#5C5240!important}
#vj-ba-root.vj-light-preview #s-results .vj-progress-dot-lock{background:#6B5738!important}
#vj-ba-root.vj-light-preview #s-results .vj-progress-track-marker{background:#6B5738!important;box-shadow:0 0 0 4px #F3EDE6!important}
#vj-ba-root.vj-light-preview #s-results .vj-volt{color:#6B5738!important}
#vj-ba-root.vj-light-preview #s-results .vj-weak-item{background:#F3EDE6!important;border-color:#D4C9B5!important;border-left-color:#6B5738!important}
#vj-ba-root.vj-light-preview #s-results .vj-weak-task{color:#5C5240!important;background:rgba(134,115,89,.06)!important;border-left-color:#6B5738!important}
#vj-ba-root.vj-light-preview #s-results .vj-weak-task strong{color:#6B5738!important}
#vj-ba-root.vj-light-preview #s-results .vj-outcome-box{background:#E6DFD2!important;border-color:#D4C9B5!important;border-top-color:#6B5738!important}
#vj-ba-root.vj-light-preview #s-results .vj-lock-open{color:#6B5738!important}
#vj-ba-root.vj-light-preview #s-results .vj-progress-track-fill{background:#6B5738!important}
#vj-ba-root.vj-light-preview #s-results .vj-progress-step.done .vj-progress-dot{background:#5C8A5C!important;color:#F3EDE6!important}
#vj-ba-root.vj-light-preview #s-results .vj-progress-step.active .vj-progress-dot{background:#6B5738!important;color:#F3EDE6!important}
#vj-ba-root.vj-light-preview #s-results .vj-progress-step.done .vj-progress-label{color:#5C8A5C!important}
#vj-ba-root.vj-light-preview #s-results .vj-progress-step.active .vj-progress-label{color:#6B5738!important}
#vj-ba-root.vj-light-preview #s-results .vj-progress-curiosity span{color:#6B5738!important}
#vj-ba-root.vj-light-preview #s-results .vj-breakdown-encourage{color:#6B5738!important}
#vj-ba-root.vj-light-preview #s-results a.vj-upsell-btn.vj-upsell-btn-top{
    background-color:#6B5738!important;color:#F3EDE6!important;
}
#vj-ba-root.vj-light-preview #s-results a.vj-upsell-btn.vj-upsell-btn-top svg path{fill:#F3EDE6!important}
#vj-ba-root.vj-light-preview #s-results a.vj-upsell-btn.vj-upsell-btn-bottom{
    background-color:transparent!important;color:#6B5738!important;border-color:#6B5738!important;
}
#vj-ba-root.vj-light-preview #s-results a.vj-upsell-btn.vj-upsell-btn-bottom:hover,
#vj-ba-root.vj-light-preview #s-results a.vj-upsell-btn.vj-upsell-btn-bottom:focus,
#vj-ba-root.vj-light-preview #s-results a.vj-upsell-btn.vj-upsell-btn-bottom:active,
#vj-ba-root.vj-light-preview #s-results a.vj-upsell-btn.vj-upsell-btn-bottom:visited{
    background-color:rgba(107,87,56,0.08)!important;color:#6B5738!important;
}
#vj-ba-root.vj-light-preview #s-results .vj-upsell-btn-top{
    box-shadow:0 0 0 1px rgba(107,87,56,0.25),0 8px 24px rgba(107,87,56,0.18)!important;
}
#vj-ba-root.vj-light-preview #s-results .vj-disclaimer{color:#8C8170!important}
#vj-ba-root.vj-light-preview #s-results .vj-disclaimer strong{color:#6B5738!important}
#vj-ba-root.vj-light-preview #s-results .vj-pos-validation-msg{color:#B8791E!important}
body #vj-ba-root.vj-light-preview #s-results .vj-theme-pill,
body #vj-ba-root.vj-light-preview #s-results .vj-theme-pill:hover,
body #vj-ba-root.vj-light-preview #s-results .vj-theme-pill:focus{border-color:#6B5738!important;color:#2B2418!important;background-color:#E6DFD2!important}
body #vj-ba-root.vj-light-preview #s-results .vj-theme-pill.active{background-color:rgba(134,115,89,.12)!important;border-color:#6B5738!important;color:#2B2418!important}
body #vj-ba-root.vj-light-preview #s-results .vj-download-free-btn{background-color:#6B5738!important;color:#F3EDE6!important}

/* ── COMPACT TEASER CARD ── */
/* v7.18 — .vj-teaser-wrap and .vj-teaser-card used to share this exact
   rule, meaning both got the lime border independently. Since the card
   sits nested inside the wrap in the actual HTML, that produced two
   visible lime frames stacked on top of each other — looked especially
   cramped/distracting on mobile. The wrap is now just a plain layout
   container; only the card (the actual visual "box") keeps the border. */
body #vj-ba-root .vj-teaser-wrap{position:relative!important;max-width:460px!important;width:100%!important;margin:0 auto!important}
#vj-ba-root .vj-teaser-card{position:relative!important;z-index:1!important;background:rgba(13,13,16,.92)!important;backdrop-filter:blur(8px)!important;border:1px solid #D4FF00!important;padding:28px 26px!important;text-align:center!important;max-width:460px!important;width:100%!important;margin:0 auto!important}
#vj-ba-root .vj-lock-icon{font-size:30px!important;margin-bottom:12px!important;display:block!important}
#vj-ba-root .vj-lock-step-label{
    font-family:'EB Garamond',Georgia,serif!important;font-size:12px!important;
    letter-spacing:1.5px!important;text-transform:uppercase!important;color:#8A8A80!important;
    margin-bottom:8px!important;
}
#vj-ba-root .vj-lock-title-main{font-family:'Fraunces',Georgia,serif!important;font-weight:600!important;font-size:24px!important;color:#D4FF00!important;margin-bottom:10px!important;letter-spacing:-.3px!important;display:block!important;line-height:1.2!important}
#vj-ba-root .vj-lock-title{font-family:'Fraunces',Georgia,serif!important;font-weight:400!important;font-size:18px!important;color:#F0EEE6!important;margin-bottom:8px!important;letter-spacing:-.2px!important;display:block!important;line-height:1.3!important}
#vj-ba-root .vj-lock-desc{font-family:'EB Garamond',Georgia,serif!important;font-size:14px!important;color:#999!important;line-height:1.5!important;margin-bottom:18px!important;display:block!important}

/* ── DELIVERABLES BLOCK (replaces old bullet points + roadmap —
   names the two real PDF deliverables explicitly instead of listing
   feature bullets) ── */
#vj-ba-root .vj-deliverables{
    display:flex!important;flex-direction:column!important;gap:11px!important;
    margin-bottom:20px!important;text-align:left!important;
}
#vj-ba-root .vj-deliverable-item{
    display:flex!important;gap:12px!important;align-items:flex-start!important;
    background:rgba(212,255,0,.04)!important;border:1px solid #3A3A3E!important;
    padding:12px 14px!important;border-radius:4px!important;min-height:64px!important;
}
#vj-ba-root .vj-deliverable-icon{font-size:18px!important;flex-shrink:0!important;line-height:1.4!important}
#vj-ba-root .vj-deliverable-icon.vj-check-icon{
    width:20px!important;height:20px!important;border-radius:50%!important;
    background:#D4FF00!important;color:#0A0A0C!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    font-size:12px!important;font-weight:bold!important;line-height:1!important;margin-top:2px!important;
}
#vj-ba-root .vj-deliverable-name{
    font-family:'Fraunces',Georgia,serif!important;font-weight:400!important;
    font-size:15px!important;color:#F0EEE6!important;margin-bottom:3px!important;line-height:1.3!important;
}
#vj-ba-root .vj-deliverable-desc{
    font-family:'EB Garamond',Georgia,serif!important;font-size:12.5px!important;
    color:#888!important;line-height:1.5!important;
}
#vj-ba-root .vj-deliverable-item.done{
    background:rgba(74,222,128,.06)!important;border-color:rgba(74,222,128,.25)!important;
}

/* ── FIXES CHECKLIST — personalized list of the actual weak areas found,
   shown as ticked "ready" items. This is the concrete answer to "what
   gets fixed" instead of a vague "unlock now" — each line is a real
   problem this specific person's answers surfaced. ── */
#vj-ba-root .vj-fixes-checklist{
    display:flex!important;flex-direction:column!important;gap:11px!important;
    margin:14px 0 11px!important;
}
#vj-ba-root .vj-fix-item{
    display:flex!important;align-items:center!important;gap:12px!important;
    background:rgba(212,255,0,.05)!important;border:1px solid rgba(212,255,0,.2)!important;
    padding:13px 16px!important;border-radius:6px!important;
}
#vj-ba-root .vj-fix-check{
    width:22px!important;height:22px!important;border-radius:50%!important;
    background:#D4FF00!important;color:#0A0A0C!important;flex-shrink:0!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    font-size:13px!important;font-weight:bold!important;
}
#vj-ba-root .vj-fix-name{
    font-family:'EB Garamond',Georgia,serif!important;font-size:16px!important;color:#F0EEE6!important;
}

/* ── TICKBOX — custom clickable "I don't have one" confirmation button,
   replacing a bare native checkbox that rendered nearly invisible on
   this dark theme with zero styling of its own. ── */
body #vj-ba-root button.vj-tickbox{
    display:flex!important;align-items:center!important;gap:10px!important;
    padding:11px 14px!important;margin-top:12px!important;
    background-color:#0D0D10!important;border:1px solid #3A3A3E!important;
    border-radius:4px!important;cursor:pointer!important;width:100%!important;
    font-family:'EB Garamond',Georgia,serif!important;font-size:13px!important;
    color:#C8C6BE!important;text-align:left!important;
    transition:border-color .15s,color .15s!important;
}
body #vj-ba-root button.vj-tickbox:hover,
body #vj-ba-root button.vj-tickbox:focus{
    border-color:#D4FF00!important;color:#F0EEE6!important;
}
body #vj-ba-root button.vj-tickbox.checked{
    border-color:#D4FF00!important;background-color:rgba(212,255,0,.06)!important;color:#F0EEE6!important;
}
#vj-ba-root .vj-tickbox-mark{
    width:18px!important;height:18px!important;border-radius:3px!important;
    border:1px solid #48484E!important;flex-shrink:0!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    font-size:11px!important;background:transparent!important;color:#0A0A0C!important;
    transition:all .15s!important;
}
#vj-ba-root .vj-tickbox.checked .vj-tickbox-mark{
    background:#D4FF00!important;border-color:#D4FF00!important;
}

/* ── STEP PROGRESS BAR — shows the visitor is mid-flow, not
   at a fresh purchase decision. Step 1 (score) always shows done
   since reaching this template means the quiz was already submitted. ── */
#vj-ba-root .vj-progress-wrap{
    display:flex!important;align-items:center!important;gap:6px!important;
    max-width:520px!important;margin:24px auto 0!important;font-family:Arial,-apple-system,sans-serif!important;
}
#vj-ba-root .vj-progress-step{display:flex!important;align-items:center!important;gap:6px!important;flex:0 0 auto!important;white-space:nowrap!important;}
#vj-ba-root .vj-progress-dot{
    width:22px!important;height:22px!important;border-radius:50%!important;
    background:#3A3A3E!important;color:#9B9A94!important;display:flex!important;align-items:center!important;
    justify-content:center!important;font-size:11px!important;font-weight:bold!important;flex-shrink:0!important;
}
#vj-ba-root .vj-progress-step.done .vj-progress-dot{background:#4ADE80!important;color:#0A0A0C!important;}
#vj-ba-root .vj-progress-step.active .vj-progress-dot{background:#D4FF00!important;color:#0A0A0C!important;}
#vj-ba-root .vj-progress-label{font-size:10.5px!important;color:#9B9A94!important;}
#vj-ba-root .vj-progress-step.done .vj-progress-label{color:#4ADE80!important;}
#vj-ba-root .vj-progress-step.active .vj-progress-label{color:#D4FF00!important;}
#vj-ba-root .vj-progress-track{flex:1!important;height:5px!important;margin:0 16px!important;border-radius:3px!important;background:#2E2E31!important;position:relative!important;overflow:hidden!important;}
@media (max-width:480px){
    #vj-ba-root .vj-progress-label{display:none!important;}
}

/* ── NOT-AI NOTE — small, muted, italic; reassurance without competing
   with the gauge or CTA for attention. ── */
#vj-ba-root .vj-not-ai-note{
    font-family:Arial,-apple-system,sans-serif!important;font-size:12.5px!important;
    color:#8A8A80!important;font-style:normal!important;line-height:1.6!important;
    max-width:440px!important;margin:0 auto 16px!important;text-align:center!important;
}

/* ── v7.0 — FREE-TO-PAID MODEL BAR (landing page only) — states the
   $7 unlock exists right here, first time a visitor sees it at all. ── */
#vj-ba-root .vj-model-bar{
    display:flex!important;align-items:center!important;
    max-width:420px!important;margin:0 auto 14px!important;
    border-radius:20px!important;overflow:hidden!important;
}
#vj-ba-root .vj-model-seg{
    flex:1!important;display:flex!important;align-items:center!important;justify-content:center!important;
    font-family:'EB Garamond',Georgia,serif!important;font-size:12px!important;font-weight:600!important;
    padding:11px 12px!important;
}
#vj-ba-root .vj-model-seg-free{background:#1c2410!important;color:#D4FF00!important}
#vj-ba-root .vj-model-seg-paid{background:#1c1c19!important;color:#9B9A94!important}

/* ── NEWSLETTER BONUS NOTE — sits on the gate screen, right above submit.
   Informational disclosure, not a checkbox: everyone who completes the
   quiz gets pushed to FluentCRM already (see vj_ba_push_fluentcrm in
   ajax.php), so this just makes that existing behavior visible and
   honest up front, with a clear unsubscribe mention. ── */
#vj-ba-root .vj-newsletter-note{
    font-family:Arial,-apple-system,sans-serif!important;font-size:12.5px!important;
    color:#B9B9B2!important;line-height:1.6!important;
    background:#141416!important;border:1px solid #262626!important;border-radius:6px!important;
    padding:12px 14px!important;margin:12px 0 16px!important;text-align:left!important;
}
#vj-ba-root .vj-newsletter-note strong{color:#D4FF00!important;}
#vj-ba-root .vj-newsletter-note a{color:#D4FF00!important;text-decoration:underline!important;}

/* ── OUTCOME BRIDGE (what happens after they download) ── */
#vj-ba-root .vj-outcome-bridge{
    font-family:'EB Garamond',Georgia,serif!important;font-style:normal!important;
    font-size:13.5px!important;color:#999!important;line-height:1.55!important;
    text-align:center!important;margin-bottom:16px!important;display:block!important;
}

/* ── URGENCY LINE (above CTA) ── */
#vj-ba-root .vj-urgency-line{
    font-family:'EB Garamond',Georgia,serif!important;font-weight:500!important;
    font-size:13px!important;color:#D4FF00!important;
    letter-spacing:.02em!important;margin-bottom:12px!important;display:block!important;
}

/* ── STRIKETHROUGH COMPARE PRICE — decorative anchor only, not wired
   to the admin "PDF Price Label" option; update manually if the real
   price ever changes ── */
#vj-ba-root .vj-price-was{
    text-decoration:line-through!important;opacity:.55!important;
    font-size:14px!important;margin-right:2px!important;
}
body #vj-ba-root a.vj-upsell-btn{
    display:block!important;width:100%!important;
    background-color:#D4FF00!important;color:#0A0A0C!important;
    font-family:'Fraunces',Georgia,serif!important;font-weight:400!important;font-size:16px!important;
    padding:14px 24px!important;text-decoration:none!important;text-align:center!important;
    border-radius:0!important;border:none!important;box-shadow:none!important;
    margin-bottom:10px!important;transition:background .15s!important;
}
body #vj-ba-root a.vj-upsell-btn:hover,
body #vj-ba-root a.vj-upsell-btn:focus,
body #vj-ba-root a.vj-upsell-btn:active,
body #vj-ba-root a.vj-upsell-btn:visited{background-color:#bcff00!important;color:#0A0A0C!important}
#vj-ba-root .vj-lock-note{font-family:'EB Garamond',Georgia,serif!important;font-size:13px!important;font-weight:500!important;color:#9B9A94!important;font-style:normal!important;display:block!important;text-align:center!important}

/* ── DISCLAIMER (fix guarantee + no-outcome-guarantee, below the CTA) ── */
#vj-ba-root .vj-disclaimer{
    font-family:'EB Garamond',Georgia,serif!important;font-size:13px!important;
    color:#9B9A94!important;line-height:1.65!important;text-align:left!important;
    border-top:.5px solid #3A3A3E!important;padding-top:14px!important;margin-top:14px!important;
    display:block!important;
}
#vj-ba-root .vj-disclaimer strong{color:#c2dba9!important;font-weight:600!important}

/* ── ALREADY PURCHASED LINK ── */
#vj-ba-root .vj-already-purchased{text-align:center!important;margin-top:14px!important}
#vj-ba-root .vj-refund-note{text-align:center!important;color:#7A7A72!important;font-size:11.5px!important;font-weight:500!important;line-height:1.5!important;max-width:440px!important;margin:14px auto 0!important}
body #vj-ba-root .vj-already-purchased a{font-family:'EB Garamond',Georgia,serif!important;font-size:13px!important;color:#9B9A94!important;text-decoration:underline!important;font-style:normal!important}
body #vj-ba-root .vj-already-purchased a:hover{color:#D4FF00!important}

/* ── THEME TOGGLE (download screen only) ── */
#vj-ba-root .vj-theme-toggle{display:flex!important;align-items:center!important;justify-content:space-between!important;flex-wrap:wrap!important;gap:10px!important;margin-bottom:14px!important}
#vj-ba-root .vj-theme-pills{display:flex!important;gap:6px!important}
body #vj-ba-root button.vj-theme-pill,
body #vj-ba-root button.vj-theme-pill:hover,
body #vj-ba-root button.vj-theme-pill:focus{border-color:#D4FF00!important;color:#F0EEE6!important;background-color:#0D0D10!important;outline:none!important;box-shadow:none!important}
body #vj-ba-root button.vj-theme-pill.active{background-color:rgba(212,255,0,.08)!important;border-color:#D4FF00!important;color:#F0EEE6!important}
#vj-ba-root .vj-theme-swatch{width:12px!important;height:12px!important;border-radius:50%!important;display:inline-block!important;border:1px solid rgba(255,255,255,.15)!important}
#vj-ba-root .vj-swatch-dark{background-color:#0A0A0C!important}
#vj-ba-root .vj-swatch-light{background-color:#E6DFD2!important}

/* ── DOWNLOAD SCREEN ── */
#vj-ba-root .vj-download{padding:40px 0!important;text-align:center!important}
#vj-ba-root .vj-download-preview-wrap{border:1px solid #3A3A3E!important;overflow:hidden!important;min-height:400px!important;max-height:400px!important;position:relative!important}
#vj-ba-root .vj-download-preview{transform-origin:top left!important;width:800px!important;transform:scale(0.50)!important}

/* ── RESPONSIVE ── */
@media(max-width:500px){
    #vj-ba-root{padding:0 16px!important}
    #vj-ba-root .vj-teaser-wrap{min-height:160px!important;padding:16px!important}
    #vj-ba-root .vj-teaser-card{padding:22px 18px!important}
    #vj-ba-root .vj-download-preview{transform:scale(0.30)!important}
    #vj-ba-root .vj-download-preview-wrap{min-height:280px!important;max-height:280px!important}
    #vj-ba-root .vj-q-nav{flex-direction:column-reverse!important;gap:8px!important}
    #vj-ba-root .vj-q-nav .vj-btn-primary{width:100%!important}
    #vj-ba-root .vj-meta-row{gap:8px 14px!important}
}


/* ── v7.0 — SKILL SELECTION: custom "type your own" toggle (q1b) ── */
body #vj-ba-root button.vj-custom-toggle{
    display:flex!important;align-items:center!important;gap:8px!important;
    padding:13px 16px!important;background-color:transparent!important;
    border:1.5px dashed #48484E!important;border-radius:0!important;cursor:pointer!important;
    font-family:'EB Garamond',Georgia,serif!important;font-size:14px!important;
    color:#8A8A80!important;text-align:left!important;width:100%!important;
    box-shadow:none!important;outline:none!important;margin-bottom:14px!important;
    transition:border-color .15s,color .15s!important;
}
body #vj-ba-root button.vj-custom-toggle:hover,
body #vj-ba-root button.vj-custom-toggle.active{border-color:#D4FF00!important;color:#D4FF00!important}
#vj-ba-root .vj-custom-input-wrap{margin-bottom:16px!important}

/* ── v7.0 — MULTI-SELECT (q1c) — reuses .vj-option's own styling since
   chips share the class; only the count label and grid gap need rules ── */
#vj-ba-root .vj-options-multi{flex-direction:row!important;flex-wrap:wrap!important}
#vj-ba-root .vj-options-multi .vj-option{width:auto!important;flex:0 0 auto!important;border-radius:20px!important;padding:11px 18px!important}
#vj-ba-root .vj-multi-count{font-family:'EB Garamond',Georgia,serif!important;font-size:13px!important;color:#8A8A80!important;margin-bottom:16px!important}

/* ── v7.0 — TAG INPUT (q1c fallback for custom primary skill) ── */
#vj-ba-root .vj-tag-input-wrap{
    display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px!important;
    border:1px solid #3A3A3E!important;padding:12px 14px!important;margin-bottom:16px!important;min-height:52px!important;
}
#vj-ba-root .vj-tag-list{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
#vj-ba-root .vj-tag{
    display:inline-flex!important;align-items:center!important;gap:6px!important;
    background:rgba(212,255,0,.08)!important;border:1px solid #D4FF00!important;
    border-radius:16px!important;padding:6px 12px!important;
    font-family:'EB Garamond',Georgia,serif!important;font-size:14px!important;color:#D4FF00!important;
}
body #vj-ba-root button.vj-tag-remove{
    background:transparent!important;border:none!important;color:#D4FF00!important;
    font-size:11px!important;cursor:pointer!important;padding:0!important;width:auto!important;
}
#vj-ba-root #vj-tag-new{border:none!important;background:transparent!important;flex:1!important;min-width:160px!important;padding:6px 0!important}

/* v8.4 — proof content now lives inside the Foundation row (see
   .vj-foundation-proof) — the standalone wrapper/label/sub styles for
   the old separate box are gone with it. */
/* v8.7 — FIXED. Removed italic (item 21) — thin italic serif at this
   size on a near-black background was reading as faint/hard to read,
   same root cause fixed elsewhere for other body text. Medium weight
   instead of italic for a decent, readable look. */
#vj-ba-root .vj-proof-text{
    font-family:'Fraunces',Georgia,serif!important;font-style:normal!important;font-weight:500!important;
    font-size:18px!important;line-height:1.55!important;color:#F0EEE6!important;
}

/* v7.6 — intro CTA only: compact and centered, matching the approved
   mockup. .vj-btn-primary stays full-width everywhere else (Next
   buttons throughout the quiz genuinely benefit from full-width). */
body #vj-ba-root button#vj-start.vj-btn-primary{
    display:inline-flex!important;
    width:auto!important;
    padding:15px 40px!important;
    margin:0 auto 12px!important;
    align-items:center!important;justify-content:center!important;
    border-radius:10px!important;
    font-weight:700!important;
}

/* ── v7.9 — LOCK ICONS + FULL ROADMAP (free results page) ── */
#vj-ba-root .vj-lock-icon-svg{flex-shrink:0!important;vertical-align:middle!important}
#vj-ba-root .vj-lock-open{color:#D4FF00!important}
#vj-ba-root .vj-lock-closed{color:#8A8A80!important}
#vj-ba-root .vj-proof-label{display:flex!important;align-items:center!important;gap:8px!important}
#vj-ba-root .vj-roadmap-label{
    font-family:'EB Garamond',Georgia,serif!important;font-size:13px!important;
    letter-spacing:1.2px!important;text-transform:uppercase!important;color:#8A8A80!important;
    margin:24px 0 14px!important;
}
#vj-ba-root .vj-roadmap-rows{display:flex!important;flex-direction:column!important;gap:6px!important;margin-bottom:18px!important}
#vj-ba-root .vj-roadmap-row{
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    border:1px solid #48484E!important;border-radius:8px!important;padding:10px 16px!important;
    font-family:'EB Garamond',Georgia,serif!important;font-size:14.5px!important;color:#F0EEE6!important;
}
#vj-ba-root .vj-roadmap-row-weakest{border-color:#D4FF00!important;background:rgba(212,255,0,.05)!important}
#vj-ba-root .vj-roadmap-row-left{display:flex!important;align-items:center!important;gap:10px!important}
#vj-ba-root .vj-roadmap-status{font-size:13px!important;color:#D4FF00!important;text-transform:capitalize!important}

/* v7.10 — positioning field validation message */
#vj-ba-root .vj-pos-validation-msg{
    font-family:'EB Garamond',Georgia,serif!important;font-size:13px!important;
    color:#FFAA33!important;margin:4px 0 14px!important;
}

/* v7.11 — highlight the SPECIFIC incomplete positioning field, not just
   a vague message elsewhere on the page. */
body #vj-ba-root input.vj-field-incomplete{
    border-bottom-color:#FFAA33!important;
    background:rgba(255,170,51,.06)!important;
}
/* v7.18 — separate red styling for suspected typos, distinct from the
   amber "incomplete" state — different problem, different color, so
   the two are never confused for one another. */
body #vj-ba-root input.vj-field-typo{
    border-bottom-color:#FF5A5A!important;
    background:rgba(255,90,90,.06)!important;
}
#vj-ba-root .vj-pos-typo-msg{
    font-family:'EB Garamond',Georgia,serif!important;font-size:13px!important;
    color:#FF5A5A!important;margin:4px 0 14px!important;
}

/* v7.12 — compact weak-area rows (all but the single weakest item) */
#vj-ba-root .vj-weak-item-compact{
    display:flex!important;align-items:center!important;gap:10px!important;
    border:1px solid #48484E!important;border-radius:8px!important;padding:11px 16px!important;
    margin-bottom:9px!important;font-family:'EB Garamond',Georgia,serif!important;font-size:14px!important;
}
#vj-ba-root .vj-weak-compact-icon{color:#FFAA33!important;flex-shrink:0!important}
#vj-ba-root .vj-weak-compact-name{color:#F0EEE6!important;flex:1!important}
#vj-ba-root .vj-weak-compact-tag{font-size:11px!important;color:#8A8A80!important;text-transform:uppercase!important;letter-spacing:.5px!important}

/* v7.13 — "What you told us" facts + two genuine suggestions */
#vj-ba-root .vj-proof-raw-label{
    font-family:'EB Garamond',Georgia,serif!important;font-size:12px!important;
    letter-spacing:1px!important;text-transform:uppercase!important;color:#8A8A80!important;
    margin:18px 0 10px!important;
}
#vj-ba-root .vj-proof-raw-grid{display:flex!important;flex-direction:column!important;gap:0!important;margin-bottom:8px!important}
#vj-ba-root .vj-proof-raw-item{display:flex!important;justify-content:space-between!important;gap:12px!important;font-family:'EB Garamond',Georgia,serif!important;font-size:14px!important;padding:9px 0!important;border-bottom:0.5px solid #232326!important}
#vj-ba-root .vj-proof-raw-item:last-child{border-bottom:none!important}
#vj-ba-root .vj-proof-raw-key{color:#8A8A80!important;flex-shrink:0!important}
#vj-ba-root .vj-proof-raw-val{color:#F0EEE6!important;text-align:right!important}
#vj-ba-root .vj-proof-suggest-label{
    font-family:'EB Garamond',Georgia,serif!important;font-size:12px!important;
    letter-spacing:1px!important;text-transform:uppercase!important;color:#D4FF00!important;
    margin:0 0 10px!important;
}
#vj-ba-root .vj-proof-suggestion{
    display:flex!important;align-items:flex-start!important;gap:12px!important;
    margin-bottom:10px!important;padding:12px 14px!important;
    border:1px solid #48484E!important;border-radius:8px!important;background:#0F0F12!important;
}
#vj-ba-root .vj-proof-suggestion-single{
    border-left:3px solid #D4FF00!important;border-color:#48484E!important;border-left-color:#D4FF00!important;
    padding:16px 18px!important;
}
#vj-ba-root .vj-proof-suggestion-best{
    border-left:3px solid #D4FF00!important;border-color:#48484E!important;border-left-color:#D4FF00!important;
    padding:18px 18px 16px 15px!important;position:relative!important;margin-top:16px!important;
}
#vj-ba-root .vj-proof-best-tag{
    position:absolute!important;top:-11px!important;left:14px!important;
    font-family:'EB Garamond',Georgia,serif!important;font-size:10px!important;
    font-weight:600!important;letter-spacing:0.08em!important;text-transform:uppercase!important;
    color:#151504!important;background:#D4FF00!important;border-radius:4px!important;
    padding:3px 8px!important;white-space:nowrap!important;
}
#vj-ba-root .vj-proof-suggestion-num{
    flex-shrink:0!important;width:20px!important;height:20px!important;border-radius:50%!important;
    background:#D4FF00!important;color:#0A0A0C!important;font-family:'EB Garamond',Georgia,serif!important;
    font-size:12px!important;font-weight:600!important;display:flex!important;align-items:center!important;justify-content:center!important;
}
#vj-ba-root .vj-proof-suggestion .vj-proof-text{margin:0!important}
#vj-ba-root .vj-proof-personalized-note{
    font-family:'EB Garamond',Georgia,serif!important;font-size:12.5px!important;font-style:normal!important;
    color:#97C459!important;line-height:1.5!important;margin:12px 0 0!important;
}

/* v7.15 — combined "Your biggest opportunity" block */
#vj-ba-root .vj-opportunity-box{
    border:1px solid #D4FF00!important;border-radius:8px!important;
    padding:22px 24px!important;background:rgba(212,255,0,.04)!important;
    font-family:'EB Garamond',Georgia,serif!important;margin-bottom:12px!important;
}
#vj-ba-root .vj-opportunity-head{
    display:flex!important;align-items:center!important;gap:8px!important;margin-bottom:12px!important;
    font-family:'Fraunces',Georgia,serif!important;font-size:18px!important;color:#F0EEE6!important;
}
#vj-ba-root .vj-opportunity-tag{font-size:11px!important;color:#FF5A5A!important;text-transform:uppercase!important;letter-spacing:.5px!important;font-family:'EB Garamond',Georgia,serif!important}
#vj-ba-root .vj-opportunity-diag{font-size:15px!important;line-height:1.6!important;color:#c9c9c0!important;margin-bottom:16px!important}
#vj-ba-root .vj-opportunity-outcome{
    border-top:1px solid #333!important;padding-top:14px!important;
    font-style:normal!important;font-size:14.5px!important;line-height:1.6!important;color:#D4FF00!important;
}
#vj-ba-root .vj-opportunity-more{text-align:center!important;font-size:13px!important;color:#8A8A80!important;margin-bottom:6px!important}

/* v7.32 — NEW additions: pulse animation, shareable card, dashboard
   preview list, View Full Report toggle. Same #vj-ba-root !important
   scoping pattern as everything else in this file. */

/* v7.41 — REBUILT. Replaces the old thin-line + pulsing-dot pattern
   with a real filled/unfilled progress track (continuous bar, no hard
   color break), a shimmer sweep for motion, and a glowing ring around
   the lock icon marking where progress currently sits. */
@keyframes vj-shimmer-sweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}
@keyframes vj-lock-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212,255,0,0.5), 0 0 0 4px #0A0A0C; }
    50%      { box-shadow: 0 0 0 8px rgba(212,255,0,0), 0 0 0 4px #0A0A0C; }
}
#vj-ba-root .vj-progress-track-fill{position:absolute!important;left:0!important;top:0!important;width:55%!important;height:100%!important;background:#4ADE80!important;border-radius:3px!important;z-index:1!important}
#vj-ba-root .vj-progress-track-shimmer{position:absolute!important;top:0!important;left:0!important;width:30%!important;height:100%!important;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent)!important;animation:vj-shimmer-sweep 2.2s ease-in-out infinite!important;z-index:2!important}
#vj-ba-root .vj-progress-track-marker{position:absolute!important;left:55%!important;top:50%!important;transform:translate(-50%,-50%)!important;width:11px!important;height:11px!important;border-radius:50%!important;background:#D4FF00!important;box-shadow:0 0 0 4px #0A0A0C!important;z-index:3!important}
#vj-ba-root .vj-progress-dot-lock{animation:vj-lock-glow 1.8s ease-in-out infinite!important;background:#D4FF00!important;display:flex!important;align-items:center!important;justify-content:center!important}
#vj-ba-root .vj-progress-step.active .vj-progress-label{color:#D4FF00!important;font-weight:600!important}
#vj-ba-root .vj-progress-curiosity{
    text-align:center!important;color:#8a8a84!important;font-size:12px!important;
    margin:0 0 22px!important;font-family:'EB Garamond',Georgia,serif!important;
}
#vj-ba-root .vj-progress-curiosity span{color:#D4FF00!important}

#vj-ba-root .vj-share-card-label{
    color:#8A8A80!important;font-size:10px!important;letter-spacing:.12em!important;
    text-transform:uppercase!important;text-align:center!important;margin:0 0 10px!important;
}
#vj-ba-root .vj-share-card{
    position:relative!important;aspect-ratio:1/1!important;max-width:280px!important;
    margin:0 auto 12px!important;border-radius:14px!important;overflow:hidden!important;
    background:#0A0A0C!important;border:0.5px solid #2E2E31!important;
}
#vj-ba-root .vj-share-card-topbar{
    background:#D4FF00!important;padding:8px 16px!important;display:flex!important;
    justify-content:space-between!important;align-items:center!important;
    font-size:9px!important;letter-spacing:.1em!important;text-transform:uppercase!important;
    font-weight:600!important;color:#151504!important;
}
#vj-ba-root .vj-share-card-body{
    display:flex!important;flex-direction:column!important;align-items:center!important;
    justify-content:center!important;text-align:center!important;padding:20px!important;
    height:calc(100% - 32px)!important;
}
#vj-ba-root .vj-share-card-quote-mark{color:#D4FF00!important;font-size:22px!important;font-family:'Fraunces',Georgia,serif!important;margin-bottom:2px!important;display:block!important}
#vj-ba-root .vj-share-card-quote{color:#F5F5F0!important;font-size:14px!important;margin:0 0 10px!important;font-family:'Fraunces',Georgia,serif!important;line-height:1.4!important}
#vj-ba-root .vj-share-card-rule{width:24px!important;height:2px!important;background:#D4FF00!important;margin:0 auto 8px!important}
#vj-ba-root .vj-share-card-score{color:#4ADE80!important;font-size:11px!important}
#vj-ba-root .vj-share-card-actions{display:flex!important;gap:8px!important;max-width:280px!important;margin:0 auto 26px!important;flex-wrap:wrap!important}
#vj-ba-root .vj-share-copy-btn{
    flex:1!important;min-width:84px!important;background:#1C1C1F!important;color:#D8D8D2!important;
    border:0.5px solid #2E2E31!important;border-radius:8px!important;padding:10px 6px!important;
    font-size:11px!important;cursor:pointer!important;font-family:'EB Garamond',Georgia,serif!important;
}
/* v7.41 — FIXED. Was a subtle bordered/text-only button that read as
   invisible — now solid LinkedIn brand blue with white text, matching
   the real LinkedIn "Share" button convention so it's unmistakable. */
#vj-ba-root .vj-share-linkedin-btn{
    flex:1!important;min-width:84px!important;background:#0A66C2!important;color:#FFFFFF!important;
    border:none!important;border-radius:8px!important;padding:10px 6px!important;
    font-size:11px!important;font-weight:600!important;cursor:pointer!important;font-family:'EB Garamond',Georgia,serif!important;
}
/* v7.41 — Archetype card elements */
#vj-ba-root .vj-share-card-eyebrow{color:#8A8A80!important;font-size:9px!important;letter-spacing:.1em!important;text-transform:uppercase!important;margin:0 0 8px!important}
#vj-ba-root .vj-share-card-archetype{color:#D4FF00!important;font-size:21px!important;font-family:'Fraunces',Georgia,serif!important;font-weight:400!important;margin:0 0 6px!important}
#vj-ba-root .vj-share-card-verified{display:inline-flex!important;align-items:center!important;gap:5px!important;background:#141416!important;border-radius:20px!important;padding:4px 11px!important;margin:0 0 14px!important}
#vj-ba-root .vj-share-card-verified span{color:#4ADE80!important;font-size:9px!important;font-weight:600!important}

#vj-ba-root .vj-report-toggle{
    text-align:center!important;color:#D4FF00!important;font-size:13px!important;
    margin:0 0 18px!important;text-decoration:underline!important;text-underline-offset:3px!important;
    cursor:pointer!important;font-family:'EB Garamond',Georgia,serif!important;
}

#vj-ba-root .vj-dash-preview-label{
    color:#8A8A80!important;font-size:10px!important;letter-spacing:.1em!important;
    text-transform:uppercase!important;margin:0 0 8px!important;
}
#vj-ba-root .vj-dash-preview-list{background:#0A0A0C!important;border-radius:10px!important;border:0.5px solid #2E2E31!important;padding:8px!important;margin-bottom:20px!important}
#vj-ba-root .vj-dash-preview-check{color:#4ADE80!important;font-size:11px!important}
#vj-ba-root .vj-dash-preview-lock{color:#8a8a84!important;font-size:11px!important}
#vj-ba-root .vj-foundation-row-top{cursor:pointer!important}
#vj-ba-root .vj-foundation-caret{color:#4ADE80!important;font-size:10px!important;transition:transform .15s ease!important}
#vj-ba-root .vj-foundation-row-open .vj-foundation-caret{transform:rotate(180deg)!important}
#vj-ba-root .vj-foundation-proof{margin-top:12px!important;padding-top:12px!important;border-top:0.5px solid #2E2E31!important}

#vj-ba-root .vj-view-details-link{
    display:block!important;text-align:center!important;color:#8a8a84!important;
    font-size:11px!important;text-decoration:underline!important;margin-top:10px!important;
}

/* v7.33 — guide-not-software clarifying line */
#vj-ba-root .vj-guide-clarify{
    text-align:center!important;color:#8a8a84!important;font-size:12px!important;
    line-height:1.5!important;margin:0 0 14px!important;font-family:'EB Garamond',Georgia,serif!important;
}
#vj-ba-root .vj-guide-clarify strong{color:#D4FF00!important;font-weight:600!important}

/* v7.40 — simple quote-card name styling, replacing the removed banner-hybrid layout */
#vj-ba-root .vj-share-card-name{color:#F5F5F0!important;font-size:12px!important;margin:0 0 3px!important;font-family:'Fraunces',Georgia,serif!important}
#vj-ba-root .vj-share-caption-label{color:#8A8A80!important;font-size:9px!important;letter-spacing:.05em!important;text-transform:uppercase!important;margin:12px 0 6px!important}
#vj-ba-root .vj-share-caption-box{background:#141416!important;border-radius:10px!important;padding:12px 14px!important;font-size:11px!important;color:#D8D8D2!important;line-height:1.6!important;white-space:pre-line!important}
#vj-ba-root .vj-share-download-fallback{text-align:center!important;margin:8px 0 0!important}
#vj-ba-root .vj-share-download-fallback a{color:#8A8A80!important;font-size:11px!important;text-decoration:underline!important}
#vj-ba-root .vj-share-linkedin-note{color:#8A8A80!important;font-size:10.5px!important;font-style:normal!important;text-align:center!important;margin:6px 0 0!important}

/* v7.40 — Two-column pairing: real bar-chart breakdown + share card */
#vj-ba-root .vj-breakdown-pair{
    display:grid!important;grid-template-columns:1.1fr 0.9fr!important;gap:48px!important;
    align-items:start!important;margin-bottom:24px!important;
}
#vj-ba-root #vj-roadmap-wrap{border-right:0.5px solid #232326!important;padding-right:24px!important}
#vj-ba-root .vj-breakdown-heading{color:#8A8A80!important;font-size:10px!important;letter-spacing:.1em!important;text-transform:uppercase!important;margin:0 0 16px!important}
#vj-ba-root .vj-breakdown-row{margin-bottom:14px!important}
#vj-ba-root .vj-breakdown-row-top{display:flex!important;justify-content:space-between!important;align-items:baseline!important;margin-bottom:6px!important;font-size:13px!important;color:#D8D8D2!important}
#vj-ba-root .vj-breakdown-bar-track{height:3px!important;background:#2E2E31!important;border-radius:2px!important}
#vj-ba-root .vj-breakdown-bar-fill{height:100%!important;border-radius:2px!important}
#vj-ba-root .vj-breakdown-comment{color:#8a8a84!important;font-size:11px!important;margin:6px 0 0!important}
#vj-ba-root .vj-breakdown-row-weakest{padding:10px 12px!important;margin-left:-12px!important;margin-right:-12px!important;border:1px solid #D4FF00!important;border-radius:8px!important}
#vj-ba-root .vj-breakdown-row-weakest .vj-breakdown-row-top{color:#F5F5F0!important}
#vj-ba-root .vj-breakdown-row-weakest .vj-breakdown-comment{color:#D8D8D2!important}
#vj-ba-root .vj-breakdown-fix-tag{font-size:9px!important;color:#FF5A5A!important;text-transform:uppercase!important;letter-spacing:.06em!important;font-family:'EB Garamond',Georgia,serif!important;border:0.5px solid #FF5A5A!important;border-radius:4px!important;padding:2px 5px!important;margin-left:4px!important;vertical-align:middle!important}
#vj-ba-root .vj-breakdown-encourage{color:#4ADE80!important;font-size:11px!important;margin:16px 0 0!important;line-height:1.5!important}

/* Share card sizing inside the paired grid — no longer centered with a fixed max-width, fills its column */
#vj-ba-root .vj-breakdown-pair .vj-share-card-label{text-align:left!important}
#vj-ba-root .vj-breakdown-pair .vj-share-card{max-width:100%!important;margin:0 0 12px!important}
#vj-ba-root .vj-breakdown-pair .vj-share-card-actions{max-width:100%!important;margin:0 0 12px!important}

/* v7.40 — Full CTA section rebuild: headline, paragraph, transition label, dash-preview descriptions, reassurance line, second button */
/* v8.9 — NEW. Bordered box wrapping the CTA content — was floating
   loose on the page; this gives it a contained, "solid deal" feel. */
#vj-ba-root .vj-cta-box{
    border:1px solid #2E2E31!important;border-radius:16px!important;
    background:linear-gradient(180deg,#111113,#0A0A0C)!important;
    padding:40px 32px!important;margin:0 0 24px!important;
    box-shadow:0 20px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.03)!important;
}
#vj-ba-root .vj-cta-headline{color:#F5F5F0!important;font-size:32px!important;font-weight:600!important;font-family:'Fraunces',Georgia,serif!important;text-align:center!important;margin:0 0 18px!important;line-height:1.25!important}
#vj-ba-root .vj-cta-highlight{color:#D4FF00!important}
/* v8.3 — FIXED. Subline bumped from 12.5px (too small/quiet under a
   19px headline) to 15px with tighter line-height and slightly wider
   max-width so it reads as a real supporting line, not fine print. */
#vj-ba-root .vj-cta-paragraph{color:#D8D8D2!important;font-size:15px!important;font-weight:500!important;line-height:1.6!important;text-align:center!important;margin:0 0 20px!important;max-width:520px!important;margin-left:auto!important;margin-right:auto!important}
#vj-ba-root .vj-cta-guide-note{color:#97C459!important;font-style:normal!important;font-size:13px!important;margin-top:-10px!important}
#vj-ba-root .vj-unlocks-label{color:#8A8A80!important;font-size:10px!important;letter-spacing:.12em!important;text-transform:uppercase!important;text-align:center!important;margin:24px 0 12px!important}
#vj-ba-root .vj-dash-preview-row-top{display:flex!important;justify-content:space-between!important;font-size:15px!important;color:#8a8a84!important}
#vj-ba-root .vj-dash-preview-row-unlocked .vj-dash-preview-row-top{color:#F5F5F0!important}
/* v8.3 — FIXED. This is the real fix for "description shows beside the
   name instead of below it": with the old duplicate flex-row block
   removed above, THIS block still never set flex-direction, so it
   defaulted to row — same bug, different rule. Explicit column
   direction stacks row-top (name+icon) above the description, like
   the corrected mockup. */
#vj-ba-root .vj-dash-preview-row{display:flex!important;flex-direction:column!important;padding:9px 12px!important}
#vj-ba-root .vj-dash-preview-row-unlocked{border-radius:6px!important;background:#1C1C1F!important}
#vj-ba-root .vj-dash-preview-desc{color:#8a8a84!important;font-size:13px!important;line-height:1.5!important;margin:5px 0 0!important}
#vj-ba-root .vj-dash-preview-row-unlocked .vj-dash-preview-desc{color:#8a8a84!important}
#vj-ba-root .vj-cta-reassure{color:#8a8a84!important;font-size:11.5px!important;text-align:center!important;margin:0 0 12px!important}
/* v8.3 — NEW. Second CTA button (bottom) is now outline-style — border
   + green text, transparent background — distinct from the first,
   solid-fill button above the module list. Overrides the shared base
   .vj-upsell-btn fill/color and its own :hover/:focus/:active state so
   the outline treatment survives interaction, not just the resting state. */
body #vj-ba-root a.vj-upsell-btn.vj-upsell-btn-bottom{
    background-color:transparent!important;color:#97C459!important;
    border:1.5px solid #97C459!important;
}
body #vj-ba-root a.vj-upsell-btn.vj-upsell-btn-bottom:hover,
body #vj-ba-root a.vj-upsell-btn.vj-upsell-btn-bottom:focus,
body #vj-ba-root a.vj-upsell-btn.vj-upsell-btn-bottom:active,
body #vj-ba-root a.vj-upsell-btn.vj-upsell-btn-bottom:visited{
    background-color:rgba(151,196,89,0.1)!important;color:#97C459!important;
}
/* v8.2 — FIXED AGAIN. The previous fix used EQUAL specificity to the
   base rule (both "body #vj-ba-root a.X" shape), which only wins via
   source order — fragile against theme/page-builder CSS loading after
   this stylesheet, or any reordering. This selector targets BOTH
   classes the element actually has together (class="vj-upsell-btn
   vj-upsell-btn-top"), giving it strictly HIGHER specificity than the
   base rule — wins unconditionally, not just by position in the file. */
/* v8.5 — NEW. Visual break between the free-diagnosis content above
   and the paid-unlock section below — a plain hairline with breathing
   room on both sides, nothing decorative enough to compete for
   attention with the CTA that follows it. */
#vj-ba-root .vj-section-divider{
    height:1px!important;background:#232326!important;
    margin:32px 0!important;
}

body #vj-ba-root a.vj-upsell-btn.vj-upsell-btn-top,body #vj-ba-root a.vj-upsell-btn.vj-upsell-btn-bottom{
    display:flex!important;width:fit-content!important;align-items:center!important;
    justify-content:center!important;gap:10px!important;padding:15px 40px!important;
    border-radius:10px!important;margin-left:auto!important;margin-right:auto!important;
}
#vj-ba-root .vj-upsell-btn-bottom{margin-top:4px!important}
/* v8.5 — NEW. Top CTA button (the first, solid one) gets more visual
   pull — slightly bigger, plus a soft lime glow via box-shadow (not
   filter/drop-shadow, so it doesn't affect layout) — reads as the
   thing to click, not just another line on the page. The outline
   bottom button intentionally stays quieter — it's the second chance,
   not the first ask. */
#vj-ba-root .vj-upsell-btn-top{
    font-size:15px!important;padding:17px 44px!important;
    box-shadow:0 0 0 1px rgba(151,196,89,0.3),0 8px 24px rgba(151,196,89,0.25)!important;
}

/* =========================================================
   v9.0 — MOBILE RESPONSIVE PASS. Most sections built across this
   whole project (the CTA box, the breakdown two-column grid, the
   archetype card, the dashboard preview list, the model bar) never
   got a mobile-specific look at all — they just shrank whatever the
   desktop layout was. This covers what actually breaks on a phone,
   not a blanket "make everything smaller."
   ========================================================= */
@media (max-width:640px){
    /* Breakdown: bar-chart + archetype card side-by-side genuinely
       doesn't work under ~640px — 0.9fr of a 320px viewport isn't
       enough room for either column. Stack them, and drop the
       vertical divider (a right-border only makes sense between two
       side-by-side columns, not stacked ones). */
    #vj-ba-root .vj-breakdown-pair{
        grid-template-columns:1fr!important;gap:28px!important;
    }
    #vj-ba-root #vj-roadmap-wrap{
        border-right:none!important;padding-right:0!important;
        border-bottom:0.5px solid #232326!important;padding-bottom:24px!important;
    }

    /* CTA box: 40px/32px padding was fine on desktop, but eats a
       third of a phone's width on the sides. Headline drops from 32px
       — comfortable on desktop, cramped/wrapping awkwardly on a 360px
       screen — to something that still reads as prominent without
       forcing a 4-line wrap. */
    #vj-ba-root .vj-cta-box{padding:28px 20px!important}
    #vj-ba-root .vj-cta-headline{font-size:24px!important}

    /* Model bar (Check your score / Unlock your Business OS): two
       roughly-equal segments in a narrow bar means long label text has
       little room — drop size slightly so "Unlock your Business OS —
       $17" doesn't wrap to 2 lines and break the bar's height. */
    #vj-ba-root .vj-model-seg{font-size:10.5px!important;padding:11px 6px!important}

    /* Score glow: 380px circle centered on a viewport narrower than
       that just gets clipped at the edges instead of fading out
       symmetrically. Scaling it down keeps the soft-edge effect intact
       relative to the smaller score circle. */
    #vj-ba-root .vj-score-glow{width:280px!important;height:280px!important;top:-40px!important}

    /* Archetype card: fixed internal paddings were tuned for a card
       sitting in a 0.9fr desktop column (roughly 300-350px) — close
       enough to a phone's width that this mostly just needed the
       divider line's margins tightened, not a structural change. */
    #vj-ba-root .vj-share-card-body{padding:24px 20px!important}

    /* Dashboard preview rows: description text wrapping under a
       shorter row width reads fine already: this just tightens the
       row's own padding so the list doesn't feel oversized relative
       to the narrower card containing it. */
    #vj-ba-root .vj-dash-preview-row{padding:9px 10px!important}

    /* Positioning-statement suggestion boxes: the "Best fit" corner
       badge was positioned assuming the box's left padding leaves
       ~14px of border above it to sit on — still true on mobile, this
       just nudges the box's own top margin so the badge doesn't sit
       too close to the label above it on a shorter line-wrap. */
    #vj-ba-root .vj-proof-suggestion-best{margin-top:20px!important}
}

@media (max-width:400px){
    /* Below ~400px (older/smaller phones), the CTA headline still
       wraps oddly at 24px with "Top 1%" highlighted inline — one more
       step down keeps it to 2 clean lines instead of 3 uneven ones. */
    #vj-ba-root .vj-cta-headline{font-size:21px!important}
    #vj-ba-root .vj-cta-box{padding:24px 16px!important}
}

/* ===========================================================================
   KUDEXA THEME  —  added 14 Sep 2026

   The same questions appear in two places now: the public score page, which
   stays exactly as it is, and the setup wizard inside Kudexa OS, which has to
   look like the dashboard around it rather than like a page borrowed from
   somewhere else.

   Everything below is additive and scoped to #vj-ba-root.vj-kx. Nothing above
   it changes, dark remains the default, and removing this block removes the
   feature cleanly.

   Two modes, following the dashboard's own toggle:
     .vj-kx            light
     .vj-kx.vj-kx-dark dark
   =========================================================================== */

#vj-ba-root.vj-kx{
  --kx-bg:#ffffff; --kx-card:#ffffff; --kx-soft:#FAFBFD; --kx-line:#E7E9EE;
  --kx-hair:#F1F3F6; --kx-ink:#0B0B0C; --kx-body:#474E5C; --kx-mute:#6B7280;
  --kx-faint:#98A0AE; --kx-accent:#2F5BEA; --kx-accent-soft:#EFF3FE;
  --kx-on-accent:#ffffff;
}
#vj-ba-root.vj-kx.vj-kx-dark{
  --kx-bg:#0B0C0F; --kx-card:#121419; --kx-soft:#0F1116; --kx-line:#242830;
  --kx-hair:#1B1E25; --kx-ink:#F3F4F6; --kx-body:#B7BEC9; --kx-mute:#98A0AE;
  --kx-faint:#6F7684; --kx-accent:#D4FF00; --kx-accent-soft:#191D10;
  --kx-on-accent:#0B0B0C;
}

/* --- the frame ---------------------------------------------------------- */
#vj-ba-root.vj-kx{
  background:var(--kx-bg);
  color:var(--kx-body);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  max-width:none;
  padding:4px 0 24px;
  box-shadow:none;
  border:0;
}
#vj-ba-root.vj-kx *{font-family:inherit;letter-spacing:normal}
#vj-ba-root.vj-kx .vj-ba-screen{background:transparent}
#vj-ba-root.vj-kx #s-intro{display:none}

/* --- progress ----------------------------------------------------------- */
#vj-ba-root.vj-kx .vj-progress-hdr,
#vj-ba-root.vj-kx .vj-progress-sec{
  color:var(--kx-faint);font-size:11.5px;font-weight:650;letter-spacing:.09em;
  text-transform:uppercase;
}
#vj-ba-root.vj-kx .vj-progress-cnt{
  background:var(--kx-soft);color:var(--kx-mute);border:1px solid var(--kx-line);
  border-radius:99px;padding:4px 12px;font-size:12.5px;font-weight:600;
}
#vj-ba-root.vj-kx .vj-qseg{background:var(--kx-hair);height:4px;border-radius:99px}
#vj-ba-root.vj-kx .vj-qseg.done,
#vj-ba-root.vj-kx .vj-qseg.active,
#vj-ba-root.vj-kx .vj-qseg.filled{background:var(--kx-accent)}

/* --- the question ------------------------------------------------------- */
#vj-ba-root.vj-kx .vj-q-text{
  color:var(--kx-ink);font-size:25px;font-weight:700;line-height:1.25;
  letter-spacing:-.022em;text-shadow:none;
}
#vj-ba-root.vj-kx .vj-q-hint,
#vj-ba-root.vj-kx .vj-q-stakes{color:var(--kx-mute);font-size:14.5px;line-height:1.6}

/* --- options ------------------------------------------------------------ */
#vj-ba-root.vj-kx .vj-option,
#vj-ba-root.vj-kx .vj-option-multi{
  background:var(--kx-card);border:1.5px solid var(--kx-line);color:var(--kx-ink);
  border-radius:12px;box-shadow:none;transition:border-color .12s ease,background .12s ease;
}
#vj-ba-root.vj-kx .vj-option:hover,
#vj-ba-root.vj-kx .vj-option-multi:hover{
  border-color:var(--kx-accent);background:var(--kx-soft);
}
#vj-ba-root.vj-kx .vj-option.selected,
#vj-ba-root.vj-kx .vj-option-multi.selected{
  border-color:var(--kx-accent);background:var(--kx-accent-soft);color:var(--kx-ink);
  box-shadow:none;
}
#vj-ba-root.vj-kx .vj-option small,
#vj-ba-root.vj-kx .vj-option-multi small,
#vj-ba-root.vj-kx .vj-option div,
#vj-ba-root.vj-kx .vj-option-multi div{color:var(--kx-mute)}
#vj-ba-root.vj-kx .vj-option.selected small,
#vj-ba-root.vj-kx .vj-option-multi.selected small{color:var(--kx-body)}

/* the tick / radio the option draws for itself */
#vj-ba-root.vj-kx .vj-option:before,
#vj-ba-root.vj-kx .vj-option-multi:before{border-color:var(--kx-line)}
#vj-ba-root.vj-kx .vj-option.selected:before,
#vj-ba-root.vj-kx .vj-option-multi.selected:before{
  background:var(--kx-accent);border-color:var(--kx-accent);color:var(--kx-on-accent);
}

/* --- fields ------------------------------------------------------------- */
#vj-ba-root.vj-kx input[type=text],
#vj-ba-root.vj-kx input[type=email],
#vj-ba-root.vj-kx input[type=url],
#vj-ba-root.vj-kx textarea,
#vj-ba-root.vj-kx select{
  background:var(--kx-card);border:1px solid var(--kx-line);color:var(--kx-ink);
  border-radius:11px;font-size:15.5px;box-shadow:none;
}
#vj-ba-root.vj-kx input:focus,
#vj-ba-root.vj-kx textarea:focus{border-color:var(--kx-accent);outline:none}
#vj-ba-root.vj-kx ::placeholder{color:var(--kx-faint)}

/* --- buttons ------------------------------------------------------------ */
#vj-ba-root.vj-kx .vj-btn-primary{
  background:var(--kx-accent);color:var(--kx-on-accent);border:0;border-radius:11px;
  font-weight:650;box-shadow:none;text-shadow:none;
}
#vj-ba-root.vj-kx .vj-btn-primary:hover{filter:brightness(.94)}
#vj-ba-root.vj-kx .vj-btn-back{
  background:transparent;color:var(--kx-mute);border:1px solid var(--kx-line);
  border-radius:11px;
}
#vj-ba-root.vj-kx .vj-btn-back:hover{color:var(--kx-ink);border-color:var(--kx-accent)}

/* --- the screens the wizard never shows --------------------------------- */
#vj-ba-root.vj-kx #s-gate,
#vj-ba-root.vj-kx #s-results{display:none}
#vj-ba-root.vj-kx #s-loading{background:transparent;color:var(--kx-mute)}