/* =====================================================================
   Funnel-specific styles (funnel.css) — quiz, VSL, order, upsell.
   Loads after main.css; reuses its tokens.
   ===================================================================== */

/* Funnel header (trust only) */
.funnel-header { border-bottom: 1px solid var(--line); background: var(--paper); }
.funnel-header__inner { display: flex; align-items: center; justify-content: space-between; padding-block: var(--s-3); }
.funnel-header__contact { display: flex; align-items: center; gap: var(--s-4); font-family: var(--font-head); font-weight: 600; font-size: var(--t-sm); }

/* Funnel canvas */
.funnel-wrap { max-width: 760px; margin-inline: auto; padding: var(--s-8) var(--s-5); }
.funnel-wrap--wide { max-width: 1080px; }

/* ----------------------------- Quiz -------------------------------- */
.quiz { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.quiz__bar { height: 6px; background: var(--paper-2); }
.quiz__bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--green-600), var(--gold-500)); transition: width .4s var(--ease); }
.quiz__body { padding: var(--s-8) var(--s-7); }
.quiz__step { display: none; animation: quizIn .45s var(--ease); }
.quiz__step.is-active { display: block; }
@keyframes quizIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.quiz__count { font-family: var(--font-head); font-weight: 600; font-size: var(--t-sm); color: var(--gold-700); letter-spacing: .04em; }
.quiz__q { font-family: var(--font-head); font-size: var(--t-2xl); color: var(--green-900); margin-top: var(--s-2); line-height: 1.18; }
.quiz__options { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.quiz__opt {
    display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5);
    border: 2px solid var(--line); border-radius: var(--r-md); cursor: pointer; font-size: var(--t-md);
    transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.quiz__opt:hover { border-color: var(--green-400); transform: translateX(3px); }
.quiz__opt.is-selected { border-color: var(--green-700); background: var(--green-50); }
.quiz__opt input { accent-color: var(--green-700); width: 18px; height: 18px; }
.quiz__field { width: 100%; padding: .8rem 1rem; border: 2px solid var(--line); border-radius: var(--r-md); font-size: var(--t-md); margin-top: var(--s-3); font-family: var(--font-body); }
.quiz__field:focus { outline: none; border-color: var(--green-600); }
.quiz__nav { display: flex; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-7); }
.quiz__err { color: #a4282a; font-size: var(--t-sm); margin-top: var(--s-3); display: none; }
.quiz__err.is-shown { display: block; }

/* Quiz result */
.result__score { display: grid; place-items: center; width: 140px; height: 140px; border-radius: 50%; margin: 0 auto var(--s-5); background: conic-gradient(var(--gold-500) var(--deg,0deg), var(--paper-2) 0); }
.result__score span { width: 112px; height: 112px; border-radius: 50%; background: var(--card); display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: var(--t-2xl); color: var(--green-800); }
.result__tier { display: inline-block; padding: .4rem 1rem; border-radius: var(--r-pill); font-family: var(--font-head); font-weight: 700; }
.tier-low  { background: var(--green-50); color: var(--green-700); }
.tier-mod  { background: var(--gold-100); color: var(--gold-700); }
.tier-high { background: #fdecea; color: #a4282a; }

/* Quiz loading overlay */
.quiz__loading { display: none; text-align: center; padding: var(--s-8); }
.quiz__loading.is-shown { display: block; }
.spinner { width: 42px; height: 42px; border: 4px solid var(--paper-2); border-top-color: var(--green-600); border-radius: 50%; margin: 0 auto var(--s-4); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------ VSL -------------------------------- */
.vsl-hero { text-align: center; padding-top: var(--s-6); }
.vsl-proof { display: flex; gap: var(--s-6); justify-content: center; flex-wrap: wrap; color: var(--muted); font-family: var(--font-head); font-weight: 600; font-size: var(--t-sm); }
.vsl-video { aspect-ratio: 16/9; border-radius: var(--r-lg); overflow: hidden; background: #000; box-shadow: var(--shadow-lg); margin-block: var(--s-6); }
.vsl-video iframe, .vsl-video .placeholder { width: 100%; height: 100%; border: 0; }
.vsl-video .placeholder { display: grid; place-items: center; color: #cfe2d4; background: linear-gradient(135deg,var(--green-900),var(--green-700)); font-family: var(--font-head); }
.vsl-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar); transform: translateY(110%); transition: transform .4s var(--ease); background: rgba(251,249,244,.97); backdrop-filter: blur(8px); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0,0,0,.1); }
.vsl-sticky.is-shown { transform: none; }
.vsl-sticky__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--s-5); max-width: 1080px; margin-inline: auto; }
@media (max-width:600px){ .vsl-sticky__inner{ flex-direction: column; } .vsl-sticky .btn{ width:100%; } }

.trust-badges { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: center; }
.trust-badge { display: flex; align-items: center; gap: .4rem; font-size: var(--t-sm); font-family: var(--font-head); font-weight: 600; color: var(--green-700); }

/* ---------------------------- Order -------------------------------- */
.order-grid { display: grid; grid-template-columns: 1.3fr .9fr; gap: var(--s-7); align-items: start; }
@media (max-width: 900px){ .order-grid{ grid-template-columns: 1fr; } }
.order-form label { display: block; font-family: var(--font-head); font-weight: 600; font-size: var(--t-sm); margin: var(--s-4) 0 var(--s-2); }
.order-form input, .order-form select { width: 100%; padding: .75rem .9rem; border: 2px solid var(--line); border-radius: var(--r-md); font-size: var(--t-md); font-family: var(--font-body); }
.order-form input:focus, .order-form select:focus { outline: none; border-color: var(--green-600); }
.pay-methods { display: grid; gap: var(--s-3); margin-top: var(--s-3); }
.pay-method { display: flex; align-items: center; gap: var(--s-3); border: 2px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); cursor: pointer; }
.pay-method.is-selected { border-color: var(--green-700); background: var(--green-50); }
.summary { position: sticky; top: 90px; }
.summary__row { display: flex; justify-content: space-between; padding: var(--s-2) 0; border-bottom: 1px dashed var(--line); }
.summary__total { display: flex; justify-content: space-between; font-family: var(--font-head); font-weight: 800; font-size: var(--t-lg); color: var(--green-800); padding-top: var(--s-3); }
.bump { border: 2px dashed var(--gold-500); background: var(--gold-100); border-radius: var(--r-md); padding: var(--s-4); margin-top: var(--s-5); display: flex; gap: var(--s-3); align-items: flex-start; }
.bump input { margin-top: .3rem; width: 18px; height: 18px; accent-color: var(--green-700); }
.field-err { color: #a4282a; font-size: var(--t-sm); margin-top: .3rem; }

/* --------------------------- Upsell -------------------------------- */
.upsell { max-width: 640px; margin-inline: auto; text-align: center; }
.upsell__yes { font-size: var(--t-md); }
.upsell__no { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: var(--t-sm); margin-top: var(--s-4); font-family: var(--font-body); }

/* Onboarding timeline */
.timeline { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--s-4); counter-reset: step; }
@media (max-width:700px){ .timeline{ grid-template-columns: 1fr 1fr; } }
.timeline__item { text-align: center; padding: var(--s-4); }
.timeline__dot { width: 44px; height: 44px; border-radius: 50%; background: var(--green-700); color: #fff; display: grid; place-items: center; margin: 0 auto var(--s-3); font-family: var(--font-head); font-weight: 700; }