.fit-funnel {
  --cp-bg: #f7f8fc;
  --cp-surface: #ffffff;
  --cp-text: #1f2937;
  --cp-muted: #5b6472;
  --cp-border: #d9deea;
  --cp-border-strong: #b7c1d6;
  --cp-shadow: 0 14px 40px rgba(15, 23, 42, 0.10);
  --cp-accent: #2563eb;
  --cp-accent-hover: #1d4ed8;
  --cp-accent-contrast: #ffffff;
  --cp-accent-soft: #e8f0ff;

  padding: 48px 20px 72px;
  background: var(--cp-bg);
  color: var(--cp-text);
}

.fit-shell {
  max-width: 760px;
  margin: 0 auto;
}

.fit-header {
  text-align: center;
  margin-bottom: 28px;
}

.eyebrow {
  margin: 0 0 10px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cp-accent);
}

.fit-header h1 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 4vw, 3rem);
}

.subhead {
  margin: 0 auto;
  max-width: 620px;
  color: var(--cp-muted);
}

.progress-wrap {
  margin: 0 auto 28px;
  max-width: 620px;
}

.progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  color: var(--cp-muted);
}

.progress-bar {
  height: 10px;
  border-radius: 999px;
  background: #e9edf5;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cp-accent), #60a5fa);
  transition: width 280ms ease;
}

.quiz {
  min-height: 420px;
}

.question-card {
  display: none;
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  box-shadow: var(--cp-shadow);
  opacity: 0;
  transform: translateY(18px);
}

.question-card.active {
  display: block;
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.options-grid,
.checkbox-list {
  display: grid;
  gap: 14px;
}

.option-btn {
  border: 1px solid var(--cp-border);
  background: #fff;
  padding: 16px;
  border-radius: 14px;
  cursor: pointer;
}

.option-btn:hover {
  border-color: var(--cp-border-strong);
}

.option-btn.selected {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
}

.check-option {
  display: flex;
  gap: 10px;
  border: 1px solid var(--cp-border);
  padding: 12px;
  border-radius: 12px;
}

.primary-btn {
  background: var(--cp-accent);
  color: #fff;
  padding: 14px 22px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
}

.primary-btn:hover {
  background: var(--cp-accent-hover);
}

.secondary-btn {
  background: #fff;
  border: 1px solid var(--cp-border);
  padding: 12px 20px;
  border-radius: 999px;
  cursor: pointer;
}

.hidden {
  display: none;
}