/* Leavox pre-sell quiz: same visual language as the LP (site.css provides fonts, .btn-primary, .bg-stripes, .hero-bg, .skeleton, .clip-text) */

:root {
  --ink: #0A0D0C;
  --muted: #5A6560;
  --line: #E3EAE6;
  --soft: #F4F8F5;
  --green: #00A34A;
  --neon: #2EFF74;
  --mint: #E4FFEE;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.lv { margin: 0; background: #fff; color: var(--ink); font-family: var(--font-fustat), sans-serif; -webkit-font-smoothing: antialiased; }
.lv img, .lv video { display: block; max-width: 100%; }
.lv a { color: inherit; }
.lv h1, .lv h2, .lv h3, .lv p { margin: 0; }

/* ---------- Grid shell (side stripes + center column, 1px gaps) ---------- */
.lv-main { background: var(--line); min-height: 100vh; display: flex; flex-direction: column; gap: 1px; }
.lv-row { display: flex; gap: 1px; }
.lv-side { display: none; }
.lv-center { flex: 1 1 auto; width: 100%; background-color: #fff; border-radius: 8px; overflow: hidden; }
.lv-divider .lv-center { height: 48px; }
@media (min-width: 810px) {
  .lv-side { display: block; flex: 1 1 0; min-width: 32px; background: #fff; }
  .lv-side.l { border-radius: 0 8px 8px 0; }
  .lv-side.r { border-radius: 8px 0 0 8px; }
  .lv-center { max-width: 1200px; }
  .lv-divider .lv-center { height: 64px; }
}
@media (min-width: 1440px) { .lv-center { max-width: 1280px; } }

.lv-pad { padding: 56px 24px; }
@media (min-width: 810px) { .lv-pad { padding: 80px 32px; } }
@media (min-width: 1200px) { .lv-pad { padding: 96px 64px; } }

/* ---------- Top bar ---------- */
.lv-top { border-radius: 0 0 8px 8px; }
.lv-top__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; }
.lv-top__logo { width: 120px; height: auto; }
.lv-steps { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.lv-steps__dots { display: flex; gap: 4px; }
.lv-steps__dots i { width: 18px; height: 4px; border-radius: 99px; background: var(--line); }
.lv-steps__dots i.done { background: var(--green); }
.lv-steps__dots i.now { background: var(--neon); box-shadow: 0 0 0 2px rgba(46, 255, 116, .25); }
@media (max-width: 520px) { .lv-steps__label { display: none; } }
@media (min-width: 810px) { .lv-top__inner { padding: 16px 32px; } .lv-top__logo { width: 144px; } }

/* ---------- Hero ---------- */
.lv-hero { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1200px) { .lv-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; } }
.lv-alert { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; }
.lv-alert span { font-weight: 500; color: var(--muted); }
.lv-alert__dot { position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--mint); display: grid; place-items: center; flex: none; }
.lv-alert__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: lv-pulse 1.6s ease-in-out infinite; }
@keyframes lv-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .5; } }

.lv-h1 { margin-top: 28px !important; font-size: 40px; font-weight: 600; line-height: 105%; letter-spacing: -0.04em; }
.lv-h1 span { display: block; }
@media (min-width: 810px) { .lv-h1 { font-size: 52px; } }
.lv-green { background-color: var(--green) !important; }
.lv-lead { margin-top: 24px !important; font-family: var(--font-inter-tight), sans-serif; font-size: 18px; font-weight: 500; line-height: 170%; color: var(--muted); max-width: 560px; }

.lv-pricehint { margin-top: 32px !important; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lv-pricehint strong { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; }
.lv-pricehint span { font-family: var(--font-inter-tight), sans-serif; font-size: 14px; font-weight: 500; color: var(--muted); }

.lv-cta { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
@media (min-width: 810px) { .lv-cta { align-items: flex-start; } }
.lv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 28px; border-radius: 999px; font-family: var(--font-fustat), sans-serif; font-size: 17px; font-weight: 700; text-decoration: none; transition: background-color .3s, transform .2s; box-shadow: 0 8px 24px rgba(22, 215, 91, .28); }
.lv-btn:hover { transform: translateY(-1px); }
.lv-btn svg { width: 20px; height: 20px; flex: none; }

.lv-trust { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 36px; padding: 0; list-style: none; }
.lv-trust li { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; }
.lv-trust svg { width: 18px; height: 18px; color: var(--green); flex: none; }

/* Visual frame (same as LP media cards) */
.lv-frame { overflow: hidden; border-radius: 16px; border: 3px solid #fff; background: #F1F4F2; box-shadow: 0 7px 29px rgba(9, 40, 24, .18); }
.lv-frame img, .lv-frame video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* ---------- Footer ---------- */
.lv-foot { display: flex; flex-direction: column; gap: 14px; align-items: center; padding: 32px 24px; text-align: center; font-family: var(--font-inter-tight), sans-serif; font-size: 13px; color: var(--muted); }
.lv-foot img { width: 110px; height: auto; }
.lv-foot nav { display: flex; gap: 18px; }
.lv-foot nav a { text-decoration: none; font-weight: 600; }
.lv-foot nav a:hover { color: var(--green); }

/* ---------- Quiz ---------- */
.lv-top__tag { font-size: 13px; font-weight: 600; color: var(--green); background: var(--mint); padding: 6px 12px; border-radius: 999px; }
.lv-quiz-wrap { display: grid; gap: 40px; justify-items: center; text-align: center; }
.lv-intro { max-width: 720px; display: flex; flex-direction: column; align-items: center; }
.lv-intro .lv-lead { margin-left: auto; margin-right: auto; }
.lv-quiz-wrap.is-done .lv-intro { display: none; }

.lv-quiz { width: 100%; max-width: 620px; background: #fff; border-radius: 20px; border: 3px solid #fff; box-shadow: 0 7px 29px rgba(9, 40, 24, .18); padding: 24px; text-align: left; }
@media (min-width: 810px) { .lv-quiz { padding: 32px; } }

.lv-progress { margin-bottom: 24px; }
.lv-progress__label { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--muted); }
.lv-progress__bar { margin-top: 8px; height: 6px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.lv-progress__bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--green), var(--neon)); transition: width .4s ease; }

.lv-q { display: none; border: 0; margin: 0; padding: 0; min-width: 0; }
.lv-q.is-active { display: grid; gap: 10px; animation: lv-in .35s ease-out; }
@keyframes lv-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lv-q legend { padding: 0; margin-bottom: 18px; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.03em; }
@media (min-width: 810px) { .lv-q legend { font-size: 28px; } }

.lv-opt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; text-align: left; font-family: var(--font-fustat), sans-serif; font-size: 16px; font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color .2s, background-color .2s, transform .15s; }
.lv-opt:hover { border-color: #B9C6BF; background: var(--soft); }
.lv-opt:active { transform: scale(.99); }
.lv-opt:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
.lv-opt b { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--soft); font-size: 14px; color: var(--muted); transition: background-color .2s, color .2s; }
.lv-opt.is-picked { border-color: var(--neon); background: rgba(46, 255, 116, .08); }
.lv-opt.is-picked b { background: var(--neon); color: #062c17; }

.lv-analyzing { text-align: center; justify-items: center; padding: 16px 0 8px; }
.lv-spinner { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--mint); border-top-color: var(--green); animation: lv-spin .8s linear infinite; }
@keyframes lv-spin { to { transform: rotate(360deg); } }
.lv-analyzing__title { margin-top: 16px !important; font-size: 20px; font-weight: 700; }
.lv-analyzing ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; text-align: left; }
.lv-analyzing li { position: relative; margin: 0; padding-left: 28px; font-family: var(--font-inter-tight), sans-serif; font-size: 14px; font-weight: 500; color: #9AA6A0; transition: color .3s; }
.lv-analyzing li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); transition: all .3s; }
.lv-analyzing li.is-done { color: var(--ink); }
.lv-analyzing li.is-done::before { border-color: var(--green); background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.7 5.3a1 1 0 0 1 0 1.4l-8 8a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.4L8 12.6l7.3-7.3a1 1 0 0 1 1.4 0Z'/%3E%3C/svg%3E") center / 12px no-repeat; }

.lv-result { text-align: center; justify-items: center; }
.lv-result__badge { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--green); background: var(--mint); padding: 4px 12px; border-radius: 99px; }
.lv-result h2 { margin-top: 6px; font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -0.03em; }
.lv-result p { font-family: var(--font-inter-tight), sans-serif; font-size: 16px; font-weight: 500; line-height: 170%; color: var(--muted); }
.lv-result .lv-btn { margin-top: 8px; width: 100%; }
.lv-result small { font-family: var(--font-inter-tight), sans-serif; font-size: 13px; color: var(--muted); }

/* ---------- Logos strip ---------- */
.lv-logos { padding: 32px 24px; text-align: center; }
.lv-logos p { font-size: 14px; font-weight: 700; color: var(--muted); }
.lv-logos ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lv-logos li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; }
.lv-logos img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }