/* Verkoopklaar?: aanvullingen op kvs.css (dat de fases, statuslabels, momentopname,
   acties, onderdelen, blokkades, klok en de volgende-stap al levert).
   Nieuw hier: de meerkeuze-vraag, de "geen prijs"-noot, de documentenlijst,
   de fiscale lijst en de kostenposten. Zelfde NCB-idioom: hairlines, geen radius. */

body.quiz-open .vk-landing { display: none; }

/* ---------- meerkeuze (documenten) ---------- */
.q-options.q-multi .q-opt { align-items: flex-start; }
.q-options.q-multi .q-opt .q-key { margin-top: 2px; }
.q-options.q-multi .q-opt[aria-checked="true"] .q-key::after { content: "✓"; }
.q-options.q-multi .q-opt .q-key::after { content: ""; }
.q-options.q-multi .q-opt[aria-checked="true"] .q-key { font-size: 0; }
.q-options.q-multi .q-opt[aria-checked="true"] .q-key::after { font-size: 13px; }
.q-multihint { color: var(--ink); }
.quiz-nav .btn-small { margin-left: 4px; }
.quiz-nav .btn[disabled] { opacity: .4; cursor: not-allowed; }

/* ---------- geen prijs ---------- */
.noprice { margin-top: 26px; max-width: 760px; border-left: 3px solid var(--ink); padding: 4px 0 4px 22px; }
.noprice .overline { display: block; margin-bottom: 6px; }
.noprice p { font-family: var(--serif); font-size: 17px; line-height: 1.7; color: var(--ink-soft); max-width: 58ch; }

/* ---------- documenten ---------- */
.docs-unsure { margin-top: 20px; font-size: 14px; color: var(--ink-soft); max-width: 62ch; }
.doc-list { margin-top: 30px; max-width: 860px; }
.doc { display: grid; grid-template-columns: 30px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.doc:first-child { border-top: 1px solid var(--ink); }
.doc .mark { font-family: var(--serif); font-size: 18px; padding-top: 2px; color: var(--muted); }
.doc.have .mark { color: var(--green); }
.doc.missing .mark { color: var(--red); }
.doc-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.doc h3 { font-size: 17px; margin: 0; }
.doc p { font-size: 14px; color: var(--muted); max-width: 66ch; }
.doc .todo { margin-top: 8px; color: var(--ink-soft); }
.doc .todo b { font-weight: 600; color: var(--ink); }

.doc .bron-link { display: inline-block; margin-top: 10px; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; color: var(--ink); text-underline-offset: 4px; }

/* ---------- momentopname: drie gesloten kaarten vóór de gate ---------- */
.snap-card.locked { position: relative; background: var(--band); border-color: var(--line); }
.snap-card.locked .lock { position: absolute; top: 22px; right: 22px; color: var(--muted); }
.snap-card.locked h3 { padding-right: 30px; }
.snap-card.locked p { color: var(--ink-soft); }
.snap-card.locked a { display: inline-block; margin-top: 12px; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; color: var(--ink); text-underline-offset: 4px; }

/* ---------- plan: een woord van Nick ---------- */
.plan-letter { display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: start; }
.plan-letter-foto picture { display: block; position: sticky; top: 96px; }
.plan-letter-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; background: var(--photo); }
.plan-letter h2 { max-width: 22em; margin: 14px 0 22px; }
.advice.letter { border: none; padding: 0; background: transparent; }
.advice.letter p { font-family: var(--sans); font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.advice .letter-sig { margin-top: 26px; font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink); }
.advice .letter-sig small { display: block; font-size: 11px; font-weight: 500; letter-spacing: var(--track-s); text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.plan-letter .noprice { margin-top: 34px; }

/* ---------- plan: sterk in één regel, blokkades inklapbaar ---------- */
.strength-inline { margin-top: 26px; max-width: 860px; border-top: 1px solid var(--line); padding-top: 18px; }
.strength-inline .overline { display: block; margin-bottom: 10px; }
.strength-inline ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.strength-inline li { font-size: 14px; color: var(--ink-soft); }
.strength-inline .ok { color: var(--green); margin-right: 8px; }
.blocker-list { margin-top: 24px; max-width: 860px; }
details.blocker { border: 1px solid var(--line); border-left: 3px solid var(--ink); background: var(--paper); padding: 0; margin-top: 12px; }
details.blocker.kritiek { border-left-color: var(--red); }
details.blocker summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr 20px; gap: 16px; align-items: center; padding: 18px 22px; }
details.blocker summary::-webkit-details-marker { display: none; }
details.blocker summary .st { margin: 0; }
details.blocker summary .bt { font-family: var(--serif); font-size: 18px; line-height: 1.35; }
details.blocker .a { padding: 0 22px 20px; }
details.blocker .a p { font-size: 14px; color: var(--ink-soft); max-width: 70ch; }
details.blocker .a .todo { margin-top: 12px; }
details.blocker .a .todo b { font-weight: 600; }
.plus::before { content: "+"; font-family: var(--sans); font-size: 18px; font-weight: 300; color: var(--muted); }
details[open] > summary .plus::before { content: "\2212"; }

/* ---------- plan: fotoband en verdieping ---------- */
.plan-band { margin-top: 88px; height: min(38vw, 420px); overflow: hidden; background: var(--photo); }
.plan-band picture { display: contents; }
.plan-band img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; }
.plan-more-list { margin-top: 30px; max-width: 860px; border-top: 1px solid var(--ink); }
details.plan-more { border-bottom: 1px solid var(--line); }
details.plan-more summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 200px 1fr 20px; gap: 20px; align-items: baseline; padding: 22px 0; }
details.plan-more summary::-webkit-details-marker { display: none; }
details.plan-more summary .no { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: var(--track-s); text-transform: uppercase; color: var(--muted); }
details.plan-more summary .bt { font-family: var(--serif); font-size: 22px; line-height: 1.3; }
details.plan-more .a { padding: 0 0 34px; }
details.plan-more .a .clocks, details.plan-more .a .fiscal-list, details.plan-more .a .route-story { margin-top: 22px; }
details.plan-more .costs-h { font-size: 22px; margin: 14px 0 8px; }

@media (max-width: 900px) {
  .plan-letter { grid-template-columns: 1fr; gap: 24px; }
  .plan-letter-foto { max-width: 160px; }
  .plan-letter-foto picture { position: static; }
  details.blocker summary { grid-template-columns: 1fr 20px; }
  details.blocker summary .st { grid-column: 1; }
  details.plan-more summary { grid-template-columns: 1fr 20px; gap: 6px 12px; }
  details.plan-more summary .plus { grid-row: 1 / 3; }
  .plan-band { margin-top: 64px; height: 46vw; }
}

/* ---------- klok (één kolom) ---------- */
.clocks.one { grid-template-columns: 1fr; max-width: 760px; }

/* ---------- fiscaal en kosten ---------- */
.fiscal-list { margin-top: 30px; max-width: 800px; }
.fiscal { padding: 20px 0; border-bottom: 1px solid var(--line); }
.fiscal:first-child { border-top: 1px solid var(--ink); }
.fiscal h3 { font-size: 17px; margin-bottom: 6px; }
.fiscal p { font-size: 14px; color: var(--ink-soft); max-width: 68ch; }
.fiscal .who { margin-top: 8px; color: var(--muted); }
.fiscal .who b { font-weight: 600; color: var(--ink); }
.cost-list { margin-top: 26px; max-width: 800px; }
.cost { display: grid; grid-template-columns: 240px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.cost:first-child { border-top: 1px solid var(--ink); }
.cost b { font-weight: 600; }
.cost span { color: var(--muted); }

/* ---------- landing ---------- */
.vk-stats sup { font-size: 60%; }

/* zo werkt het: drie stappen op één hairline */
.vk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: var(--s5); border-top: 1px solid var(--ink); }
.vk-step { padding: 26px 28px 8px 0; border-right: 1px solid var(--line); }
.vk-step + .vk-step { padding-left: 28px; }
.vk-step:last-child { border-right: none; padding-right: 0; }
.vk-step .n { font-family: var(--serif); font-size: 26px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vk-step h3 { font-size: 20px; margin: 12px 0 8px; max-width: 16em; }
.vk-step p { font-size: 15px; color: var(--muted); max-width: 34ch; }

/* wie schrijft dit: portret naast de tekst */
.vk-wie-grid { display: grid; grid-template-columns: minmax(260px, 2fr) 3fr; gap: 64px; align-items: center; }
.vk-wie-foto picture { display: block; }
.vk-wie-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; background: var(--photo); }
.vk-wie-tekst h2 { max-width: 20em; margin-bottom: 22px; }
.vk-wie-tekst .prose p { font-size: 16.5px; }
.vk-sig { margin-top: 28px; font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink); }
.vk-sig small { display: block; font-size: 11px; font-weight: 500; letter-spacing: var(--track-s); text-transform: uppercase; color: var(--muted); margin-top: 6px; }

/* het plan: korte lijst en de fasen als strook */
.vk-planlijst { margin: 18px 0 0; padding: 0; list-style: none; max-width: 52ch; }
.vk-planlijst li { padding: 12px 0; border-top: 1px solid var(--line); font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.vk-planlijst li:last-child { border-bottom: 1px solid var(--line); }
.vk-planlijst strong { color: var(--ink); font-weight: 600; }
.preview-grid > div:first-child .vk-planlijst li { font-family: var(--sans); font-size: 15px; }
.vk-fasen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; list-style: none; margin: var(--s5) 0 0; padding: 0; border-top: 1px solid var(--line); }
.vk-fasen li { padding: 18px 20px 0 0; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; }
.vk-fasen li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.vk-fasen .n { grid-row: 1 / 3; font-family: var(--serif); font-size: 18px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vk-fasen b { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink); }
.vk-fasen span:not(.n) { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* zelf nakijken: de officiële bronnen */
.vk-bron-kop { display: grid; grid-template-columns: 3fr 2fr; gap: 64px; align-items: end; }
.vk-bron-kop h2 { max-width: 22em; }
.vk-bron-kop .lede { margin-top: 18px; max-width: 58ch; }
.vk-bron-noot { margin-top: 14px; font-size: 14px; color: var(--muted); max-width: 60ch; }
.vk-bron-foto picture { display: block; }
.vk-bron-foto img { display: block; width: 100%; height: auto; max-height: 440px; aspect-ratio: 3 / 4; object-fit: cover; object-position: center; background: var(--photo); }
.bron-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; margin-top: var(--s5); }
.bron-groep { border-top: 1px solid var(--ink); padding: 20px 0 30px; }
.bron-groep h3 { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: var(--track-s); text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
.bron { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.bron:last-child { border-bottom: none; }
.bron b { display: block; font-family: var(--sans); font-size: 15px; font-weight: 600; }
.bron b::after { content: " ↗"; font-weight: 400; color: var(--muted); }
.bron span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 60ch; }
.bron:hover b { text-decoration: underline; text-underline-offset: 4px; }
.bron-uitleg { font-size: 14px; color: var(--muted); max-width: 60ch; margin: 12px 0 4px; line-height: 1.55; }
.bron-gemeenten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.bron-gemeenten li { border-bottom: 1px solid var(--line); }
.bron-gemeenten a { display: block; padding: 12px 0; font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
.bron-gemeenten a::after { content: "↗"; font-weight: 400; color: var(--muted); margin-left: 8px; }
.bron-gemeenten a:hover { text-decoration: underline; text-underline-offset: 4px; }
.vk-bron-fine { margin-top: 26px; font-size: 13px; color: var(--muted); }
.vk-bron-fine a { color: var(--ink); }

@media (max-width: 900px) {
  .vk-steps { grid-template-columns: 1fr; border-top: none; }
  .vk-step { border-right: none; border-top: 1px solid var(--line); padding: 20px 0 6px !important; }
  .vk-step:first-child { border-top: 1px solid var(--ink); }
  .vk-wie-grid { grid-template-columns: 1fr; gap: 32px; }
  .vk-wie-foto { max-width: 420px; }
  .vk-fasen { grid-template-columns: 1fr 1fr; }
  .vk-fasen li:nth-child(3) { padding-left: 0; border-left: none; border-top: 1px solid var(--line); margin-top: 18px; }
  .vk-fasen li:nth-child(4) { border-top: 1px solid var(--line); margin-top: 18px; }
  .vk-bron-kop { grid-template-columns: 1fr; gap: 28px; }
  .vk-bron-foto img { max-height: 320px; aspect-ratio: 3 / 2; }
  .bron-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .vk-fasen { grid-template-columns: 1fr; }
  .vk-fasen li { padding-left: 0 !important; border-left: none !important; border-top: 1px solid var(--line); margin-top: 0 !important; padding-top: 14px; padding-bottom: 4px; }
  .vk-fasen li:first-child { border-top: none; }
  .bron-gemeenten { grid-template-columns: 1fr; }
}
.lang-row { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--sans); font-size: 12px; letter-spacing: var(--track); text-transform: uppercase; margin-top: 10px; }
.lang-row a { text-underline-offset: 4px; }
.lang-row .now { color: var(--muted); }

@media (max-width: 900px) {
  .cost { grid-template-columns: 1fr; gap: 4px; }
  .noprice { padding-left: 16px; }
}
@media print {
  .doc, .fiscal, .cost { break-inside: avoid; }
}