/* ==========================================================================
   T-Patch — Variant B (quiz-first funnel). Reuses tokens.css variables.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background:
    radial-gradient(120% 80% at 50% -10%, var(--color-surface-tint), transparent 60%),
    var(--color-bg);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; padding: 0; }
s { color: var(--color-muted); }

/* ---- Shell ---- */
.qz { min-height: 100dvh; display: flex; flex-direction: column; }
.qz__top {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 2rem); max-width: 680px; width: 100%; margin-inline: auto;
}
.qz__brand { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--color-brand-deep); }
.qz__progress { flex: 1; height: 8px; background: var(--color-surface-soft); border-radius: 999px; overflow: hidden; }
.qz__bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--color-brand), var(--color-accent)); border-radius: 999px; transition: width .45s var(--ease-out-expo); }
.qz__step-label { font-size: var(--text-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; min-width: 2.5rem; text-align: right; }

/* ---- Stage / steps ---- */
.qz__stage { flex: 1; display: grid; place-items: center; padding: clamp(1rem, 4vw, 2rem); }
.qstep {
  display: none; width: 100%; max-width: 560px; text-align: left;
  animation: qIn .4s var(--ease-out-expo);
}
.qstep.is-active { display: block; }
.qstep--center { text-align: center; }
@keyframes qIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.qz__eyebrow {
  display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: var(--text-sm);
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-brand);
  background: var(--color-brand-tint); padding: .35em .9em; border-radius: 999px; margin-bottom: 1rem;
}
.qz__eyebrow--ok { color: #0a5b2a; background: var(--color-success-soft); }
.qz__h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3rem); color: var(--color-brand-deep); }
.qz__h1 em { font-style: italic; color: var(--color-accent-dark); }
.qz__h2 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.25rem); color: var(--color-brand-deep); margin-bottom: .5rem; }
.qz__q { font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2rem); color: var(--color-ink); margin-bottom: 1.5rem; }
.qz__lede { font-size: var(--text-lg); color: var(--color-ink-soft); margin: 1rem 0 1.75rem; }
.qz__micro { margin-top: 1rem; font-size: var(--text-sm); color: var(--color-muted); }
.qz__rating { margin-top: 1.5rem; font-size: var(--text-sm); color: var(--color-muted); }
.qz__introimg { width: 100%; height: 240px; object-fit: cover; object-position: center 35%; border-radius: var(--radius-xl); box-shadow: var(--shadow-md); margin: 0 0 1.5rem; display: block; }
.qz__stars { color: var(--color-star); letter-spacing: .06em; }

/* ---- Buttons ---- */
.qbtn { display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-head); font-weight: 700; border-radius: 999px; padding: .95em 1.8em;
  transition: transform .15s var(--ease-out-back), box-shadow .25s ease, background-color .15s ease; will-change: transform; }
.qbtn:hover { transform: translateY(-2px); }
.qbtn:active { transform: translateY(0); }
.qbtn--primary { background: var(--color-accent); color: #2a1500; box-shadow: var(--shadow-accent); }
.qbtn--primary:hover { background: var(--color-accent-dark); }
.qbtn--lg { font-size: var(--text-lg); padding: 1.05em 2em; }
.qbtn--block { width: 100%; }

/* ---- Options ---- */
.qopts { display: grid; gap: .75rem; }
.qopt {
  text-align: left; background: var(--color-surface); border: 1.5px solid var(--color-line);
  border-radius: var(--radius-md); padding: 1.1em 1.25em; font-family: var(--font-head); font-weight: 600;
  font-size: var(--text-lg); color: var(--color-ink); display: flex; align-items: center; justify-content: space-between;
  transition: border-color .15s ease, background .15s ease, transform .12s ease; }
.qopt::after { content: "→"; color: var(--color-brand); opacity: 0; transform: translateX(-6px); transition: .15s ease; }
.qopt:hover { border-color: var(--color-brand); background: var(--color-brand-tint); transform: translateX(2px); }
.qopt:hover::after { opacity: 1; transform: none; }
.qopt.is-picked { border-color: var(--color-brand); background: var(--color-brand-tint); }

/* ---- Analyzing spinner ---- */
.qz__spinner { width: 56px; height: 56px; margin: 0 auto 1.25rem; border-radius: 50%;
  border: 5px solid var(--color-brand-soft); border-top-color: var(--color-brand); animation: qspin .8s linear infinite; }
@keyframes qspin { to { transform: rotate(360deg); } }

/* ---- Result ---- */
.qz__statcard { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
.qz__stat { background: var(--color-brand-deep); color: #fff; border-radius: var(--radius-lg); padding: 1.1rem 1.25rem; }
.qz__stat strong { display: block; font-family: var(--font-display); font-size: 1.9rem; }
.qz__stat span { font-size: var(--text-xs); color: var(--color-brand-soft); }
.qz__ba { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 0 0 1.5rem; }
.qz__ba figure { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.qz__ba img { width: 100%; height: 220px; object-fit: cover; object-position: top center; display: block; }
.qz__ba figcaption { padding: .5rem .7rem; font-size: var(--text-xs); color: var(--color-muted); }
.qz__plan { position: relative; background: var(--color-surface); border: 2px solid var(--color-accent); border-radius: var(--radius-xl); padding: 1.5rem; box-shadow: var(--shadow-md); margin-bottom: 1.5rem; }
.qz__plan-flag { position: absolute; top: -.8rem; left: 1.25rem; font-family: var(--font-head); font-weight: 700; font-size: var(--text-xs);
  background: var(--color-accent); color: #2a1500; padding: .35em 1em; border-radius: 999px; }
.qz__plan h3 { font-family: var(--font-head); font-size: var(--text-xl); margin-top: .3rem; }
.qz__plan-price { display: flex; align-items: baseline; gap: .5rem; margin: .4rem 0 1rem; }
.qz__plan-price span { font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; color: var(--color-brand-deep); }
.qz__plan-list { display: grid; gap: .5rem; font-size: var(--text-sm); }
.qz__plan-list li { position: relative; padding-left: 1.6rem; color: var(--color-ink-soft); }
.qz__plan-list li::before { content: "✓"; position: absolute; left: 0; color: var(--color-success); font-weight: 700; }

/* ---- Order form ---- */
.qform { display: grid; gap: 1rem; margin-top: 1.25rem; }
.qfield { display: grid; gap: .35rem; }
.qfield label { font-family: var(--font-head); font-weight: 500; font-size: var(--text-sm); }
.qfield input, .qfield textarea { font: inherit; width: 100%; padding: .8em .9em; border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md); background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.qfield input:focus, .qfield textarea:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 3px var(--color-brand-soft); }
.qfield.is-invalid input, .qfield.is-invalid textarea { border-color: var(--color-danger); }
.qerr { color: var(--color-danger); font-size: var(--text-xs); min-height: 1em; }
.qsummary { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--color-surface-soft); border-radius: var(--radius-md); padding: .9rem 1.1rem; }
.qsummary strong { color: var(--color-brand-deep); }
.qsuccess { background: var(--color-success-soft); color: #0a5b2a; border-radius: var(--radius-md); padding: 1rem; font-size: var(--text-sm); }

@media (max-width: 460px) { .qz__statcard { grid-template-columns: 1fr; } }