/* Een keuze en een inhoudelijk voorbeeld vormen samen de opening. */
.voor-wie-page .vw-intro { display: grid; gap: var(--sp-8); padding-block: var(--sp-10); }
.voor-wie-page .vw-intro > * { min-width: 0; }
.voor-wie-page .vw-selection h1 { max-width: 16ch; font-size: var(--fs-44); margin-bottom: var(--sp-4); text-wrap: balance; }
.voor-wie-page .vw-selection .u-lead { max-width: 40ch; margin: 0; }
.voor-wie-page .vw-choices { border: 0; padding: 0; margin: var(--sp-8) 0 0; min-width: 0; }
.voor-wie-page .vw-choices[hidden], .voor-wie-page .vw-fallback[hidden], .voor-wie-page .vw-example[hidden] { display: none; }
.voor-wie-page .vw-choices legend { padding: 0; margin-bottom: var(--sp-3); font-size: var(--fs-19); font-weight: 600; }
.voor-wie-page .vw-choices > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.voor-wie-page .vw-choice { display: flex; align-items: center; gap: var(--sp-2); position: relative; min-height: 52px; padding: var(--sp-2); border: 1px solid var(--line-sterk); border-radius: var(--r-sm); font-size: var(--fs-16); font-weight: 550; cursor: pointer; transition: background-color var(--dur-hover) var(--ease-uit), border-color var(--dur-hover) var(--ease-uit); }
.voor-wie-page .vw-choice > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.voor-wie-page .vw-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.voor-wie-page .vw-choice-mark { width: 14px; height: 14px; flex: 0 0 14px; border: 1px solid currentColor; border-radius: var(--r-pill); display: grid; place-items: center; }
.voor-wie-page .vw-choice-mark::after { content: ''; width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; transform: scale(0); }
.voor-wie-page .vw-choice:has(input:checked) { color: var(--brand-ink); border-color: var(--brand); background: var(--brand); }
.voor-wie-page .vw-choice input:checked + .vw-choice-mark::after { transform: scale(1); }
.voor-wie-page .vw-choice:hover { border-color: var(--brand); background: var(--brand-soft); }
.voor-wie-page .vw-choice:has(input:checked):hover { background: var(--brand-pressed, var(--brand)); }
.voor-wie-page .vw-choice:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 3px; }
.voor-wie-page .vw-work { min-width: 0; }
.voor-wie-page .vw-document { padding: var(--sp-6); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
.voor-wie-page .vw-example figure { margin: 0; }
.voor-wie-page .vw-example h2 { font-size: var(--fs-32); line-height: var(--lh-tight); max-width: 24ch; margin: 0 0 var(--sp-3); text-wrap: balance; }
.voor-wie-page .vw-example figcaption { color: var(--muted); font-size: var(--fs-16); margin-bottom: var(--sp-6); }
.voor-wie-page .vw-example-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--fs-16); line-height: var(--lh-body); }
.voor-wie-page .vw-example-table th, .voor-wie-page .vw-example-table td { text-align: left; vertical-align: top; padding: var(--sp-3) var(--sp-2) var(--sp-3) 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.voor-wie-page .vw-example-table th:first-child { width: 42%; }
.voor-wie-page .vw-example-table thead { color: var(--brand); }
.voor-wie-page .vw-example-table td { color: var(--muted); }
.voor-wie-page .vw-example-flow { list-style: none; margin: 0; padding: 0; }
.voor-wie-page .vw-example-flow li { position: relative; padding: 0 0 var(--sp-5) var(--sp-8); }
.voor-wie-page .vw-example-flow li:last-child { padding-bottom: 0; }
.voor-wie-page .vw-example-flow li::before { content: ''; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border: 2px solid var(--brand); border-radius: var(--r-pill); background: var(--panel); }
.voor-wie-page .vw-example-flow li:not(:last-child)::after { content: ''; position: absolute; left: 5px; top: 19px; width: 2px; bottom: var(--sp-1); background: var(--line-sterk); }
.voor-wie-page .vw-example-flow strong, .voor-wie-page .vw-example-flow span { display: block; font-size: var(--fs-16); }
.voor-wie-page .vw-example-flow span { color: var(--muted); margin-top: var(--sp-1); }
.voor-wie-page .vw-decision > p { text-align: center; margin: 0; padding-bottom: var(--sp-4); font-size: var(--fs-16); }
.voor-wie-page .vw-decision > p + p { position: relative; padding-top: var(--sp-4); }
.voor-wie-page .vw-decision > p + p::before { content: ''; position: absolute; left: 50%; top: 0; height: 12px; border-left: 1px solid var(--line-sterk); }
.voor-wie-page .vw-decision ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); list-style: none; padding: 0; margin: 0; }
.voor-wie-page .vw-decision li { position: relative; border-top: 1px solid var(--line-sterk); padding-top: var(--sp-4); text-align: center; font-size: var(--fs-16); }
.voor-wie-page .vw-decision strong, .voor-wie-page .vw-decision span { display: block; }
.voor-wie-page .vw-decision li strong { color: var(--brand); }
.voor-wie-page .vw-decision span { margin-top: var(--sp-2); color: var(--muted); }
.voor-wie-page .vw-example-context { margin: var(--sp-6) 0 var(--sp-5); font-size: var(--fs-16); max-width: 48ch; }
.voor-wie-page .vw-more { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); text-align: left; font-size: var(--fs-16); }
.voor-wie-page .vw-more svg { width: 24px; height: 24px; flex: 0 0 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.voor-wie-page .vw-maker { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.voor-wie-page .vw-maker img { width: 64px; height: 64px; border-radius: var(--r-md); }
.voor-wie-page .vw-maker p { font-size: var(--fs-16); font-weight: 600; margin: 0; }
.voor-wie-page .vw-maker span { color: var(--muted); font-weight: 400; }
.voor-wie-page .vw-fallback { display: grid; gap: var(--sp-2); margin-top: var(--sp-6); }
.voor-wie-page .vw-fallback a { display: flex; align-items: center; min-height: 48px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line-sterk); border-radius: var(--r-sm); text-decoration: none; }
.voor-wie-page .vw-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.uitleg.voor-wie-page .u-research { background: var(--panel); border-block: 1px solid var(--line); padding-block: var(--sp-8); }
.uitleg.voor-wie-page .u-research .u-definition { margin-bottom: var(--sp-4); }
.uitleg.voor-wie-page .u-research .u-bar-row { margin-top: var(--sp-3); }
.uitleg.voor-wie-page .u-research .u-bar-track { height: 12px; background: var(--panel-2); }
.voor-wie-page .detail-questions { background: var(--panel-2); }
.voor-wie-page .detail-faq details { background: var(--panel); }
@media (min-width: 960px) {
  .voor-wie-page .vw-intro { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: var(--sp-10); align-items: center; }
  .voor-wie-page .vw-selection h1 { max-width: 15ch; }
  .voor-wie-page .vw-choices { max-width: 440px; }
  .voor-wie-page .vw-choice { padding-inline: var(--sp-4); }
  .voor-wie-page .vw-document { padding: var(--sp-8); }
  .voor-wie-page .vw-example { min-height: 410px; display: flex; flex-direction: column; }
  .voor-wie-page .vw-example-context { margin-top: auto; padding-top: var(--sp-6); }
}
@media (max-width: 599px) {
  .voor-wie-page .vw-intro { padding-block: var(--sp-6); gap: var(--sp-6); }
  .voor-wie-page .vw-selection h1 { font-size: var(--fs-32); }
  .voor-wie-page .vw-choices { margin-top: var(--sp-5); }
  .voor-wie-page .vw-choice { gap: var(--sp-1); padding-inline: var(--sp-1); }
  .voor-wie-page .vw-document { padding: var(--sp-4); }
  .voor-wie-page .vw-example h2 { font-size: var(--fs-24); }
  .voor-wie-page .vw-example-table th, .voor-wie-page .vw-example-table td { padding-block: var(--sp-3); }
  .voor-wie-page .vw-more { padding-inline: var(--sp-3); }
}