/* =========================================================
   QuickScan CSS
   Afhankelijk van core.css (fonts, colors, reset)
   Geen algemene selectors, alles scoped
   ========================================================= */

.qs {
  background-color: var(--color-bg, #ffffff);
  color: var(--color-text, #1a1a1a);
}

/* Containers */
.qs-container {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) 1.5rem;
}

/* Hero */
.qs-hero {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
}

/* Eyebrow */
.qs-eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted, #5f6b7a);
}

/* Titel */
.qs-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

/* Intro */
.qs-intro {
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 46rem;
  margin-bottom: 2rem;
  color: var(--color-text-soft, #2e2e2e);
}

/* Checklist */
.qs-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 2.5rem 0;
}

.qs-checklist li {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: var(--color-text-soft, #2e2e2e);
}

/* CTA blok */
.qs-cta {
  margin-top: 1rem;
}

/* Button */
.qs-button {
  display: inline-block;
  padding: 0.9rem 1.6rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  background-color: var(--color-primary, #0b5fff);
  color: #ffffff;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.qs-button:hover {
  background-color: var(--color-primary-dark, #0848c4);
  transform: translateY(-1px);
}

/* Disclaimer */
.qs-disclaimer {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--color-muted, #6f7a86);
  max-width: 30rem;
}
/* =========================================================
   QuickScan — Progress & Navigation
   ========================================================= */

/* Nav wrapper */
.qs-progress {
  border-bottom: 1px solid var(--color-border, #e6e8eb);
  background-color: var(--color-bg, #ffffff);
}

/* Inner */
.qs-progress-inner {
  padding-top: 1.5rem;
  padding-bottom: 1.25rem;
}

/* Steps list */
.qs-steps {
  list-style: none;
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0 0 0.75rem 0;
}

/* Step item */
.qs-step {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-muted, #7a8594);
  white-space: nowrap;
}

/* States */
.qs-step.is-active {
  color: var(--color-text, #1a1a1a);
  font-weight: 600;
}

.qs-step.is-done {
  color: var(--color-primary, #0b5fff);
}

/* Progress bar */
.qs-progressbar {
  position: relative;
  height: 4px;
  background-color: var(--color-border, #e6e8eb);
  border-radius: 2px;
  overflow: hidden;
}

/* Progress fill */
.qs-progressbar-fill {
  display: block;
  height: 100%;
  background-color: var(--color-primary, #0b5fff);
  width: 0;
  transition: width 0.2s ease;
}

/* Content spacing */
.qs-step-content {
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}
/* =========================================================
   QuickScan — Step content
   ========================================================= */

.qs-step-header {
  margin-bottom: 2.5rem;
}

.qs-step-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 1rem;
}

.qs-step-intro {
  max-width: 42rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-soft, #2e2e2e);
}

/* Form */
.qs-form {
  max-width: 42rem;
}

/* Fieldset */
.qs-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 2.5rem 0;
}

.qs-legend {
  font-weight: 600;
  margin-bottom: 1rem;
}

/* Options */
.qs-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
  cursor: pointer;
}

.qs-option input {
  margin-top: 0.2rem;
}

/* Actions */
.qs-form-actions {
  margin-top: 2rem;
}