/* ---- alles gescoped onder #mk-test, raakt de rest van je pagina niet ---- */
#mk-test, #mk-test * { box-sizing: border-box; }
#mk-test {
  --coral: #fe686a; --coral-dark: #e2494b; --magenta: #f056de;
  --sage: #6d7a5e; --mint: #dcfdd8; --cream: #fbf7f0;
  --ink: #2a2825; --body: #4a453e; --muted: #837d74; --line: #e7dfd2;
  font-family: Heebo, system-ui, sans-serif; color: var(--ink);
  background: var(--cream); -webkit-font-smoothing: antialiased;
  padding: 28px 20px 56px; display: flex; justify-content: center;
}
#mk-test .mk-wrap { width: 100%; max-width: 640px; }
#mk-test button { font-family: inherit; cursor: pointer; }
#mk-test input { font-family: inherit; }
#mk-test p { margin: 0; }
#mk-test h1, #mk-test h2 {
  margin: 0; font-family: Heebo, sans-serif; font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.015em; line-height: 0.92;
}
#mk-test h1 { font-size: 40px; }
#mk-test h2 { font-size: 30px; }
@media (min-width: 560px) { #mk-test h1 { font-size: 52px; } #mk-test h2 { font-size: 34px; } }

#mk-test .mk-stack { display: flex; flex-direction: column; }
#mk-test .mk-badge {
  align-self: flex-start; display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 9px 18px; border-radius: 999px;
  background: var(--coral); color: #fff;
}
#mk-test .mk-badge--mint { background: var(--mint); color: var(--sage); }
#mk-test .mk-badge--magenta { background: var(--magenta); color: #fff; }
#mk-test .mk-accent { color: var(--coral); }
#mk-test .mk-italic {
  font-family: Lora, serif; font-style: italic; font-size: 17px; line-height: 1.5; color: var(--sage);
}
#mk-test .mk-eyebrow {
  font-family: Lora, serif; font-weight: 700; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage);
}
#mk-test .mk-body { font-size: 17px; line-height: 1.6; color: var(--body); }

#mk-test .mk-btn {
  display: inline-block; text-align: center; text-decoration: none; border: none;
  background: var(--coral); color: #fff; font-size: 18px; font-weight: 700;
  padding: 20px 28px; border-radius: 999px; box-shadow: 0 10px 24px rgba(254,104,106,0.32);
  transition: transform 180ms ease-out, background 180ms ease-out;
}
#mk-test .mk-btn:hover { background: var(--coral-dark); transform: translateY(-2px); color: #fff; }
#mk-test .mk-btn--full { display: block; width: 100%; }
#mk-test .mk-btn--outline {
  background: none; color: var(--ink); border: 2px solid var(--ink);
  box-shadow: none; font-size: 16px; padding: 15px 30px;
}
#mk-test .mk-btn--outline:hover { background: var(--ink); color: #fff; }
#mk-test .mk-answer {
  display: block; width: 100%; text-align: left; min-height: 58px; padding: 17px 24px;
  border-radius: 999px; border: 2px solid var(--ink); background: #fff; color: var(--ink);
  font-size: 17px; font-weight: 600;
  transition: background 160ms ease-out, color 160ms ease-out, transform 160ms ease-out;
}
#mk-test .mk-answer:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
#mk-test .mk-link {
  border: none; background: none; color: var(--muted); font-size: 15px;
  text-decoration: underline; padding: 8px 12px;
}
#mk-test .mk-link:hover { color: var(--ink); }
#mk-test .mk-input {
  width: 100%; min-height: 58px; padding: 17px 22px; border-radius: 999px;
  border: 2px solid var(--line); background: #fff; color: var(--ink); font-size: 17px;
}
#mk-test .mk-input:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px rgba(254,104,106,0.18); }
#mk-test .mk-fine { font-size: 13px; line-height: 1.5; color: var(--muted); }
#mk-test .mk-error { font-size: 14px; color: var(--coral-dark); }

#mk-test .mk-progress-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
#mk-test .mk-progress { height: 8px; border-radius: 999px; background: #ece4d7; overflow: hidden; }
#mk-test .mk-progress span {
  display: block; height: 100%; border-radius: 999px; background: var(--coral);
  transition: width 320ms ease-out;
}

#mk-test .mk-card {
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 8px 26px rgba(42,40,37,0.06); overflow: hidden;
}
#mk-test .mk-question { padding: 34px 26px; animation: mkIn 260ms ease-out; }
#mk-test .mk-question p {
  font-weight: 700; font-size: 24px; line-height: 1.3;
  letter-spacing: -0.01em; text-wrap: pretty; margin-bottom: 28px;
}
@media (min-width: 560px) { #mk-test .mk-question p { font-size: 27px; } }

#mk-test .mk-result-flag {
  padding: 11px 22px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: #fff;
}
#mk-test .mk-result-head {
  width: 100%; text-align: left; border: none; background: none;
  padding: 22px; display: flex; flex-direction: column; gap: 14px;
}
#mk-test .mk-result-row { display: flex; align-items: center; gap: 14px; }
#mk-test .mk-mark {
  flex: none; width: 44px; height: 44px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-family: Lora, serif; font-weight: 700; font-size: 18px; color: #fff;
}
#mk-test .mk-result-name { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
#mk-test .mk-result-score {
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted);
}
#mk-test .mk-bar { width: 100%; height: 10px; border-radius: 999px; background: #f1ebe0; overflow: hidden; }
#mk-test .mk-bar span { display: block; height: 100%; border-radius: 999px; transition: width 420ms ease-out; }
#mk-test .mk-teaser {
  font-family: Lora, serif; font-style: italic; font-size: 15px; line-height: 1.5; color: var(--sage);
}
#mk-test .mk-result-body {
  padding: 0 22px 26px; display: flex; flex-direction: column; gap: 18px; animation: mkFade 260ms ease-out;
}
#mk-test .mk-rule { height: 1px; background: #efe7da; }
#mk-test .mk-strategy { font-size: 16px; line-height: 1.6; font-weight: 700; }
#mk-test .mk-tips {
  background: var(--cream); border-radius: 16px; padding: 20px 20px 22px;
  display: flex; flex-direction: column; gap: 12px;
}
#mk-test .mk-tip { display: flex; gap: 10px; font-size: 15px; line-height: 1.55; color: var(--body); }
#mk-test .mk-tip b { color: var(--sage); }

#mk-test .mk-rescard-photo {
  position: relative; aspect-ratio: 4 / 3; background-size: cover; background-position: 50% 45%;
  display: flex; flex-direction: column; justify-content: flex-end;
}
#mk-test .mk-pattern-title {
  position: relative; width: 100%; margin: 0; font-family: Heebo, sans-serif; font-weight: 800;
  font-size: 34px; line-height: 0.98; letter-spacing: -0.02em; color: #fff;
  padding: 0 20px 6px; text-shadow: 0 2px 18px rgba(20,18,16,0.45);
}
@media (min-width: 560px) { #mk-test .mk-pattern-title { font-size: 44px; } }
#mk-test .mk-kernzin {
  position: relative; width: 100%; padding: 0 20px 20px; font-family: Lora, serif; font-style: italic;
  font-size: 18px; line-height: 1.35; color: rgba(255,255,255,0.92); text-shadow: 0 1px 14px rgba(20,18,16,0.5);
}
#mk-test .mk-dot { flex: none; width: 14px; height: 14px; border-radius: 999px; }

#mk-test .mk-gate {
  background: var(--ink); border-radius: 22px; padding: 32px 26px 28px;
  display: flex; flex-direction: column; gap: 18px; box-shadow: 0 18px 40px rgba(42,40,37,0.18);
}
#mk-test .mk-gate h2 { color: #fff; }
#mk-test .mk-gate h2 span { color: var(--magenta); }
#mk-test .mk-gate p { color: #d8d2c8; font-size: 16px; line-height: 1.6; }
#mk-test .mk-gate .mk-input { border-color: #4a453e; }
#mk-test .mk-gate .mk-fine { color: #9a938a; }
#mk-test .mk-gate .mk-error { color: #ffb3b4; }

#mk-test .mk-cta {
  background: var(--mint); border-radius: 22px; padding: 32px 26px;
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
}
#mk-test .mk-cta p { font-size: 16px; line-height: 1.6; color: #47503c; }
#mk-test .mk-foot { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 8px 0 4px; }
#mk-test .mk-foot img { width: 132px; height: auto; opacity: 0.9; }

#mk-test .mk-overlay {
  position: fixed; inset: 0; z-index: 9999; background: rgba(42,40,37,0.55);
  display: flex; align-items: flex-end; justify-content: center; padding: 20px;
  animation: mkFade 200ms ease-out;
}
@media (min-width: 560px) { #mk-test .mk-overlay { align-items: center; } }
#mk-test .mk-modal {
  width: 100%; max-width: 460px; background: #fff; border-radius: 26px;
  padding: 30px 24px 26px; display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 24px 60px rgba(42,40,37,0.3); animation: mkPop 280ms ease-out;
}
#mk-test .mk-modal .mk-input { background: var(--cream); }
#mk-test .mk-modal-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
#mk-test .mk-close {
  flex: none; border: none; background: #f4eee3; color: var(--muted);
  width: 34px; height: 34px; border-radius: 999px; font-size: 15px; line-height: 1;
}
#mk-test .mk-close:hover { background: var(--line); color: var(--ink); }

/* ---- cover / fotoblokken ---- */
#mk-test .mk-hero {
  position: relative; border-radius: 32px; overflow: hidden; background: #fff;
  box-shadow: 0 18px 44px rgba(42,40,37,0.14);
}
#mk-test .mk-hero-photo {
  position: relative; aspect-ratio: 4 / 5; background-size: cover; background-position: 50% 20%;
  display: flex; flex-direction: column; justify-content: flex-end;
}
#mk-test .mk-band {
  position: relative; border-radius: 32px; overflow: hidden; min-height: 290px;
  background-size: cover; background-position: 50% 32%;
  display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: 0 18px 44px rgba(42,40,37,0.14);
}
@media (min-width: 560px) {
  #mk-test .mk-hero-photo { aspect-ratio: 16 / 11; background-position: 50% 16%; }
  #mk-test .mk-band { min-height: 340px; }
}
#mk-test .mk-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(28,26,23,0.86) 0%, rgba(28,26,23,0.5) 40%, rgba(28,26,23,0) 72%);
}
#mk-test .mk-hero-copy {
  position: relative; padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 10px;
}
#mk-test .mk-hero-title {
  text-transform: none; color: #fff; font-size: 42px; line-height: 0.98; letter-spacing: -0.02em;
  text-wrap: balance;
}
@media (min-width: 560px) { #mk-test .mk-hero-title { font-size: 58px; } }
#mk-test .mk-hero-eyebrow {
  font-family: Lora, serif; font-weight: 700; font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase; color: #ffb3b4;
}
#mk-test .mk-hero-foot {
  background: var(--cream); padding: 24px; display: flex; flex-direction: column; gap: 16px;
}
#mk-test .mk-photo-badge { position: absolute; top: 20px; left: 20px; z-index: 2; }
#mk-test .mk-avatar {
  flex: none; width: 44px; height: 44px; border-radius: 999px;
  background-size: cover; background-position: 50% 16%;
  box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(42,40,37,0.14);
}
#mk-test .mk-mini-logo { width: 116px; height: auto; opacity: 0.9; }

@keyframes mkIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes mkFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mkPop { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  #mk-test *, #mk-test *::before { animation: none !important; transition: none !important; }
}

/* ---- Kajabi-pantser: voorkomt dat thema-CSS de test-stijl overschrijft ---- */
#mk-test h1, #mk-test h2, #mk-test h3 {
  font-family: Heebo, system-ui, sans-serif !important;
  text-transform: uppercase !important; margin: 0 !important;
}
#mk-test h1 { line-height: 0.92 !important; }
#mk-test .mk-hero-title { color: #fff !important; text-transform: none !important; }
#mk-test .mk-pattern-title { color: #fff !important; }
#mk-test .mk-gate h2 { color: #fff !important; }
#mk-test .mk-gate h2 span { color: var(--magenta) !important; }
#mk-test .mk-accent { color: var(--coral) !important; }
#mk-test .mk-btn, #mk-test a.mk-btn, #mk-test button.mk-btn {
  background: var(--coral) !important; color: #fff !important;
  text-decoration: none !important; border: none !important;
  border-radius: 999px !important;
}
#mk-test .mk-btn:hover { background: var(--coral-dark) !important; color: #fff !important; }
#mk-test .mk-btn--outline, #mk-test button.mk-btn--outline {
  background: transparent !important; color: var(--ink) !important;
  border: 2px solid var(--ink) !important; box-shadow: none !important;
}
#mk-test .mk-btn--outline:hover { background: var(--ink) !important; color: #fff !important; }
#mk-test .mk-answer, #mk-test button.mk-answer {
  background: #fff !important; color: var(--ink) !important;
  border: 2px solid var(--ink) !important; border-radius: 999px !important;
  text-transform: none !important; letter-spacing: normal !important;
}
#mk-test .mk-answer:hover { background: var(--ink) !important; color: #fff !important; }
#mk-test .mk-link, #mk-test button.mk-link { background: none !important; border: none !important; color: var(--muted) !important; }
#mk-test p { margin: 0 !important; }
#mk-test img { max-width: 100%; }

/* ---- verborgen Kajabi-formulier: de test vult en verstuurt het via script ---- */
form[action*="/forms/2149684785/"] {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important;
  pointer-events: none !important; margin: 0 !important; padding: 0 !important;
}
div:has(> form[action*="/forms/2149684785/"]) { margin: 0 !important; padding: 0 !important; min-height: 0 !important; }