/* ============================================================
   UpgradeAirKit.com — 60-Second Air Quiz (lead magnet)
   Builds on design-system.css tokens. Everything shines.
   ============================================================ */

.quiz-band {
  background: var(--grad-navy);
  color: #EAF1FB;
  position: relative;
  overflow: hidden;
  padding-block: clamp(36px, 6vw, 64px);
}
.quiz-band::after {
  content: ""; position: absolute; inset: auto -10% -50% 30%; height: 90%;
  background: radial-gradient(closest-side, rgba(47,168,79,.28), transparent 70%);
  filter: blur(24px); pointer-events: none;
}
.quiz-band .eyebrow { color: #6BE08C; }
.quiz-band h1 { color: #fff; }
.quiz-band .lede { color: #B8CCE4; }

/* ---- Quiz shell ---- */
.quiz-shell {
  max-width: 760px; margin: clamp(-48px,-5vw,-64px) auto 0;
  position: relative; z-index: 2;
}
.quiz-card {
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  padding: clamp(22px, 4vw, 40px);
  position: relative;
  overflow: hidden;
}
.quiz-card::before {
  content:""; position:absolute; inset:0 0 auto 0; height:5px;
  background: var(--grad-green);
}

/* ---- Progress ---- */
.quiz-progress { display:flex; align-items:center; gap:14px; margin-bottom: 22px; }
.quiz-progress__track {
  flex:1; height:10px; border-radius: var(--radius-pill);
  background: var(--mist-2); overflow:hidden;
  box-shadow: inset 0 1px 3px rgba(12,42,77,.12);
}
.quiz-progress__fill {
  height:100%; width:0; border-radius: var(--radius-pill);
  background: var(--grad-green); box-shadow: var(--glow-green);
  transition: width .5s cubic-bezier(.65,0,.35,1);
}
.quiz-progress__label {
  font-family: var(--font-display); font-weight:800; font-size:.82rem;
  color: var(--green-dark); letter-spacing:.04em; white-space:nowrap;
}

/* ---- Lulu coach row ---- */
.quiz-coach { display:flex; align-items:center; gap:14px; margin-bottom: 18px; }
.quiz-coach__avatar {
  flex:0 0 64px; width:64px; height:64px; border-radius:50%;
  background: var(--green-light) url('../assets/lulu/lulu-cameos-alpha.png') no-repeat;
  background-size: 500% 350%;       /* 5 cols x ~3.5 rows sprite */
  background-position: 0% 0%;       /* default: face pose */
  border: 3px solid #fff;
  box-shadow: var(--shadow-sm), 0 0 0 3px rgba(47,168,79,.18);
}
.quiz-coach__bubble {
  position:relative; background: var(--mist); border:1px solid var(--line);
  border-radius:16px; padding:.6em .95em; font-family: var(--font-script);
  color: var(--ink); font-size:1.35rem; line-height:1.25; flex:1;
}
.quiz-coach__bubble .heart { color: var(--rose); }
.quiz-coach__bubble::before {
  content:""; position:absolute; left:-9px; top:22px; width:0; height:0;
  border:9px solid transparent; border-right-color: var(--mist); border-left:0;
}

/* ---- Steps (one screen per question) ---- */
.quiz-step { display:none; animation: stepIn .45s cubic-bezier(.2,.7,.2,1) both; }
.quiz-step.is-active { display:block; }
@keyframes stepIn {
  from { opacity:0; transform: translateX(26px) scale(.99); }
  to   { opacity:1; transform: none; }
}
.quiz-step.is-leaving { animation: stepOut .3s ease both; }
@keyframes stepOut { to { opacity:0; transform: translateX(-26px) scale(.99); } }

.quiz-step h2 { font-size: clamp(1.4rem,3vw,2rem); margin-bottom:.6em; }

/* ---- Answer cards ---- */
.quiz-options { display:grid; grid-template-columns: repeat(2,1fr); gap:14px; }
.quiz-option {
  display:flex; align-items:center; gap:14px; text-align:left;
  padding: 16px 18px; border-radius: var(--radius);
  background: var(--paper); border:2px solid var(--line); cursor:pointer;
  font-family: var(--font-body); font-size:1rem; color: var(--ink);
  transition: transform .15s ease, box-shadow .2s ease, border-color .15s ease, background .15s ease;
  position:relative;
}
.quiz-option:hover { transform: translateY(-3px); border-color: var(--green); box-shadow: var(--glow-green); }
.quiz-option:focus-visible { outline:3px solid var(--green); outline-offset:2px; }
.quiz-option.is-selected {
  border-color: var(--green); background: var(--green-light);
  box-shadow: var(--glow-green);
}
.quiz-option__ico {
  flex:0 0 44px; width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; font-size:1.4rem;
  background: var(--grad-air); border:1px solid var(--line);
}
.quiz-option.is-selected .quiz-option__ico { background: var(--grad-green); color:#fff; border-color:transparent; }
.quiz-option__txt strong { display:block; font-family:var(--font-display); font-weight:700; color:var(--navy); }
.quiz-option__txt small { color: var(--ink-soft); font-size:.86rem; }

/* ---- Nav buttons ---- */
.quiz-nav { display:flex; justify-content:space-between; align-items:center; margin-top:24px; gap:12px; }
.quiz-back {
  background:none; border:0; color:var(--ink-soft); font-weight:700; cursor:pointer;
  font-family:var(--font-display); font-size:.92rem; padding:.5em .2em;
}
.quiz-back:hover { color:var(--navy); }
.quiz-back[hidden] { visibility:hidden; }

/* ---- Email gate ---- */
.quiz-gate { display:none; animation: stepIn .45s cubic-bezier(.2,.7,.2,1) both; }
.quiz-gate.is-active { display:block; }
.quiz-gate h2 { font-size:clamp(1.5rem,3vw,2.1rem); }
.quiz-field { margin-bottom:14px; }
.quiz-field label { display:block; font-family:var(--font-display); font-weight:700; color:var(--navy); font-size:.9rem; margin-bottom:6px; }
.quiz-field input {
  width:100%; padding:.85em 1em; border-radius: var(--radius);
  border:2px solid var(--line); font-size:1rem; font-family:var(--font-body);
  background: var(--mist); transition:border-color .15s ease, box-shadow .15s ease;
}
.quiz-field input:focus { outline:none; border-color: var(--green); box-shadow: var(--glow-green); background:#fff; }
.quiz-error { color: var(--rose); font-size:.86rem; margin:.3em 0 0; min-height:1.1em; }
.quiz-privacy { font-size:.8rem; color:var(--ink-soft); margin-top:10px; }

/* ---- Result reveal ---- */
.quiz-result { display:none; }
.quiz-result.is-active { display:block; animation: resultIn .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes resultIn { from { opacity:0; transform: translateY(24px) scale(.96); } to { opacity:1; transform:none; } }

.result-hero { text-align:center; margin-bottom: 20px; }
.result-hero .eyebrow { color: var(--green-dark); }
.result-card {
  display:grid; grid-template-columns: 200px 1fr; gap: clamp(16px,3vw,28px);
  align-items:center; padding: clamp(18px,3vw,28px);
  border-radius: var(--radius-lg); border:1px solid var(--line);
  background: var(--grad-air);
  box-shadow: var(--shadow);
  position:relative; overflow:hidden;
}
.result-card::after {
  content:""; position:absolute; inset:-40% -20% auto auto; width:60%; height:120%;
  background: radial-gradient(closest-side, rgba(47,168,79,.22), transparent 70%);
  filter: blur(10px); pointer-events:none;
}
.result-card__media {
  border-radius: var(--radius); overflow:hidden; background:#fff;
  box-shadow: var(--shadow-sm); aspect-ratio: 1/1;
}
.result-card__media img { width:100%; height:100%; object-fit:cover; }
.result-card__body { position:relative; z-index:2; }
.result-card__body h3 { font-size: clamp(1.4rem,2.6vw,1.9rem); margin-bottom:.15em; }
.result-price { font-family:var(--font-display); font-weight:900; color:var(--navy); font-size:1.6rem; }
.result-price s { color:var(--ink-soft); font-weight:600; font-size:1rem; margin-left:.4em; }
.result-why { list-style:none; padding:0; margin:.8em 0; }
.result-why li { display:flex; gap:.5em; align-items:flex-start; margin:.35em 0; font-size:.95rem; }
.result-why li::before { content:"✓"; color:var(--green-dark); font-weight:900; }
.result-cta { display:flex; gap:12px; flex-wrap:wrap; margin-top: 18px; }
.result-lulu {
  margin-top:18px; font-family:var(--font-script); font-size:1.45rem; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:.7em 1em;
  white-space:pre-line;
}
.result-lulu .heart { color:var(--rose); }

/* ---- Soft optional contact card (below the reveal) ---- */
.quiz-contact {
  margin-top: 26px; padding: clamp(18px,3vw,26px);
  border-radius: var(--radius-lg); border:1px solid var(--line);
  background:#fff; box-shadow: var(--shadow-sm);
}
.quiz-contact > h3 { font-size: clamp(1.15rem,2.2vw,1.45rem); color:var(--navy); }
.quiz-contact__grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.quiz-contact__card {
  display:flex; flex-direction:column; gap:8px;
  padding:16px; border-radius: var(--radius); border:1px solid var(--line);
  background: var(--mist);
}
.quiz-contact__card label { font-family:var(--font-display); font-weight:700; color:var(--navy); font-size:.9rem; }
.quiz-contact__card input {
  width:100%; padding:.8em 1em; border-radius: var(--radius);
  border:2px solid var(--line); font-size:1rem; font-family:var(--font-body);
  background:#fff; transition:border-color .15s ease, box-shadow .15s ease;
}
.quiz-contact__card input:focus { outline:none; border-color: var(--green); box-shadow: var(--glow-green); }
.quiz-contact__card .btn { margin-top:auto; width:100%; justify-content:center; }
.quiz-status { margin:12px 0 0; min-height:1.1em; font-size:.9rem; color:var(--green-dark); font-weight:600; }
.quiz-status.is-error { color: var(--rose); }
.quiz-contact__done {
  text-align:center; padding: clamp(20px,4vw,34px) 14px;
  background: var(--grad-air); border-radius: var(--radius); color:var(--ink);
}

/* ---- Confetti ---- */
.confetti { position:fixed; inset:0; pointer-events:none; z-index:60; overflow:hidden; }
.confetti i {
  position:absolute; top:-12px; width:9px; height:14px; border-radius:2px;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(110vh) rotate(720deg); opacity:.2; }
}

/* ---- Loading spinner on submit ---- */
.quiz-spin { width:18px; height:18px; border:3px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Header actions reused ---- */
.header-actions { display:flex; align-items:center; gap:.8rem; margin-left:auto; }
.nav + .header-actions { margin-left:0; }

/* ---- Responsive ---- */
@media (max-width: 620px) {
  .quiz-options { grid-template-columns: 1fr; }
  .result-card { grid-template-columns: 1fr; text-align:center; }
  .result-card__media { max-width:200px; margin-inline:auto; }
  .result-why li { text-align:left; }
  .quiz-coach__bubble { font-size:1.15rem; }
  .quiz-contact__grid { grid-template-columns: 1fr; }
}

/* Quiz contact — shared name field (added 2026-07-09) */
.quiz-contact__name { margin: 0 0 1em; text-align: left; }
.quiz-contact__name label { display:block; font-weight:600; margin:0 0 .35em; }
.quiz-contact__name input {
  width:100%; padding:.7em .9em; border:1.5px solid rgba(11,111,87,.25);
  border-radius:12px; font-size:1rem; background:#fff; transition:border-color .15s, box-shadow .15s;
}
.quiz-contact__name input:focus {
  outline:none; border-color:#0b6f57; box-shadow:0 0 0 3px rgba(18,160,124,.18);
}