/* keuzehulp.css · de kiezer als instrument in de hero, het pad dat de uitkomst
   op de ladder plaatst, de statische routelijst zonder JS en de aanpassingen
   op de gepinde ladder-scene en de vergelijkingstabel.
   Tokens uit tokens.css; het glas komt uit glass.css. */

/* UA-[hidden] verliest van klasse-selectors met display:flex/grid, dus op deze
   pagina forceren we het voor alles wat de kiezer aan- en uitzet. */
.chooser[hidden],
.chooser [hidden],
.routes[hidden],
.kh-path[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Hero: links de belofte, rechts het instrument
   ============================================================ */
.kh-hero {
  position: relative;
  padding-top: clamp(7.5rem, 6rem + 6vw, 11rem);
  padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
  /* De achtergrond is die van de andere kopsecties (16 sep 2026): .hero__glow
     plus class hero--beeld, dus in dark het achtergrondbeeld en in licht de
     twee CSS-bollen, zie pages.css. Eerder had deze kop een eigen gloed
     (geblurde bollen, .kh-hero__glow): Safari tekende die veel feller dan
     Chrome, links bleef er een kale strook van 1vw over (hier knipte de clip
     hieronder, de spine-strook van .page viel erbuiten) en onderaan stopte de
     gloed met een rechte rand.
     Alleen horizontaal knippen, voor de rechterbol in licht; in dark zet
     pages.css dit op visible, zodat het beeld tot de linkerrand loopt. */
  overflow-x: clip;
}
/* Bewust géén z-index: dat zou een stapelcontext maken en dan kan de kaart
   in focusmodus niet meer boven de waas uit komen. De gloed en het beeld
   liggen op z-index -1 en dus hoe dan ook onder de inhoud. */
.kh-hero__container { position: relative; }

.kh-hero__grid {
  display: grid;
  gap: clamp(2.4rem, 1.6rem + 3vw, 4rem);
  align-items: center;
}
/* De kaart krijgt de bredere kolom: daar staan twee kolommen antwoorden in. */
@media (min-width: 1040px) {
  .kh-hero__grid { grid-template-columns: 0.88fr 1.12fr; }
}
/* Tijdens de vragen staan tekst en kaart gebalanceerd naast elkaar. Zodra het
   advies er staat wordt de kaart veel hoger; dan zou de tekst mee naar beneden
   zakken. Vanaf dat moment lijnen ze bovenaan uit. */
html.kh-result .kh-hero__grid { align-items: start; }

.kh-hero__title {
  font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 13ch;
  margin-top: 1rem;
}
.kh-hero__copy .lead { margin-top: 1.3rem; max-width: 46ch; }

/* Drie feiten, gescheiden door een haarlijn. Geen iconen: het zijn feiten,
   geen features. */
.kh-facts {
  list-style: none;
  margin: clamp(1.6rem, 1.2rem + 1vw, 2.2rem) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1rem;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.kh-facts li { display: flex; align-items: center; gap: 1rem; }
.kh-facts li + li::before {
  content: "";
  width: 1px;
  height: 1.05em;
  background: var(--line-strong);
}
.kh-proof {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.2rem 0 0;
  max-width: none;
  font-size: var(--fs-small);
  color: var(--ink-faint);
}
.kh-proof__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--grad-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-2) 18%, transparent);
}

/* De uitgang. Staat er zodra de vragenlijst loopt, zodat niemand zich
   opgesloten voelt in de focusstand. */
.chooser__stop {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-faint);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-out), color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out), visibility 0s linear 0.3s;
}
.chooser.is-busy .chooser__stop { opacity: 1; visibility: visible; transition-delay: 0s; }
.chooser__stop svg { width: 14px; height: 14px; }
.chooser__stop:hover { color: var(--ink); border-color: var(--line-strong); }
.chooser__stop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================
   De kaart
   ============================================================ */
.chooser {
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.6rem) clamp(1.3rem, 1rem + 2vw, 2.6rem) clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  border-radius: var(--r-xl);
}
.chooser__top {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  min-height: 2.2rem;
}
.chooser__count {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
}
.chooser__back {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.8rem 0.45rem 0.55rem;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.chooser__back svg { width: 16px; height: 16px; }
.chooser__back:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.chooser__back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Voortgang: vijf stipjes, de huidige rekt uit tot een streepje */
.chooser__dots {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chooser__dot {
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  transition: width 0.45s var(--ease-out), background 0.3s var(--ease-out);
}
.chooser__dot.is-done { background: var(--accent-deep); }
.chooser__dot.is-current { width: 28px; background: var(--grad-accent); }

/* ---------- Eén vraag tegelijk ----------
   De vragen verschillen in lengte; zonder bodem springt de kaart bij elke
   stap een stukje op of neer. Een minimumhoogte houdt hem stil. */
/* De kaart groeit mee met de vraag (hoogte gezet door keuzehulp.js). */
.chooser__steps { overflow: hidden; }
[data-motion="on"] .chooser__steps { transition: height 0.38s var(--ease-out); }

.chooser__step {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.chooser__q {
  display: block;
  padding: 0;
  margin: 0 0 clamp(1.1rem, 0.8rem + 1.2vw, 1.6rem);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.15rem + 1.5vw, 2.15rem);
  font-weight: 640;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
  max-width: 22ch;
}
.chooser__opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}
.chooser__opt {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  min-height: 56px;
  padding: 0.95rem 1.15rem 0.95rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.chooser__opt > span:last-child { flex: 1 1 auto; min-width: 0; }
.chooser__mark {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: transparent;
  position: relative;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
/* Het vinkje: twee randen van een blokje, 45 graden gedraaid. Blijft scherp op
   elke pixeldichtheid en heeft geen gat in het midden zoals een stip-in-een-ring. */
.chooser__mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 47%;
  width: 5px;
  height: 9px;
  border: solid var(--accent-ink);
  border-width: 0 2px 2px 0;
  border-radius: 1px;
  opacity: 0;
  transform: translate(-50%, -58%) rotate(45deg) scale(0.5);
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-spring);
}
.chooser__opt:hover {
  border-color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent-2) 9%, transparent);
  transform: translateY(-1px);
}
.chooser__opt:hover .chooser__mark { border-color: var(--accent-deep); }
.chooser__opt:active { transform: translateY(0) scale(0.99); }
.chooser__opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.chooser__opt[aria-pressed="true"] {
  border-color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent-2) 14%, transparent);
  box-shadow: 0 0 0 1px var(--accent-deep), 0 14px 34px -22px var(--accent-glow);
}
.chooser__opt[aria-pressed="true"] .chooser__mark {
  border-color: transparent;
  background: var(--grad-accent-soft);
}
.chooser__opt[aria-pressed="true"] .chooser__mark::after {
  opacity: 1;
  transform: translate(-50%, -58%) rotate(45deg) scale(1);
}

/* Stapwissel: de nieuwe vraag schuift zacht in */
[data-motion="on"] .chooser__step.is-enter,
[data-motion="on"] .chooser__result.is-enter {
  animation: chooserIn 0.5s var(--ease-out) both;
}
@keyframes chooserIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ============================================================
   Het podium (podium.js, okt 2026)
   Bij het eerste antwoord zwelt de kaart op tot het hele scherm. Daar is
   hij .is-staged: geen glaskaart meer (podium.css haalt het glas weg), maar
   één vraag groot in het midden. Het advies bouwt zich daar op en krimpt
   pas met "Sluiten" terug in de hero.
   ============================================================ */

/* Bij het wisselen ligt de vraag die weggaat even over de nieuwe heen. */
.chooser { --d: 1; }
.chooser[data-dir="back"] { --d: -1; }
.chooser__steps { position: relative; }
.chooser__step.is-leave {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}
.chooser.is-picking .chooser__opt { pointer-events: none; }
[data-motion="on"] .chooser.is-staged .chooser__step.is-enter,
[data-motion="on"] .chooser.is-staged .chooser__result.is-enter { animation: none; }
.chooser.pd-ghost .chooser__top { visibility: hidden; }
/* "Opnieuw beginnen" staat op het podium rechtsboven (podium.css) */
.chooser.is-staged .chooser__result .chooser__restart { display: none; }
.kh-nw { white-space: nowrap; }

.chooser.is-staged { width: min(660px, 100%); margin: auto 0; }
.chooser.is-staged.is-result { width: min(1040px, 100%); }

.chooser.is-staged .chooser__top {
  position: absolute;
  top: 28px;
  left: clamp(16px, 3vw, 40px);
  right: clamp(16px, 3vw, 40px);
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.chooser.is-staged .chooser__dots { grid-column: 2; grid-row: 1; gap: 6px; }
.chooser.is-staged .chooser__count {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.chooser.is-staged .chooser__back { grid-column: 1; grid-row: 1; justify-self: start; margin: 0; }
.chooser.is-staged .chooser__stop { grid-column: 3; grid-row: 1; justify-self: end; }
.chooser.is-staged .chooser__back,
.chooser.is-staged .chooser__stop {
  width: 44px;
  height: 44px;
  padding: 0;
  gap: 0;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink);
  font-size: 0;
}
.chooser.is-staged .chooser__back svg,
.chooser.is-staged .chooser__stop svg { width: 18px; height: 18px; }
.chooser.is-staged .chooser__back:hover,
.chooser.is-staged .chooser__stop:hover { background: color-mix(in srgb, var(--ink) 13%, transparent); }

.chooser.is-staged .chooser__dot,
.chooser.is-staged .chooser__dot.is-current {
  position: relative;
  overflow: hidden;
  width: 34px;
  height: 4px;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
}
.chooser.is-staged .chooser__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--grad-switch);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out);
}
.chooser.is-staged .chooser__dot.is-done::after,
.chooser.is-staged .chooser__dot.is-current::after { transform: none; }

.chooser.is-staged .chooser__q {
  width: 100%;
  max-width: none;
  margin: 0 0 clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
  text-align: center;
  font-size: clamp(2.1rem, 1.3rem + 3vw, 3.7rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.042em;
}
.chooser.is-staged .chooser__opts { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.chooser.is-staged .chooser__opt {
  min-height: 74px;
  gap: 1rem;
  padding: 1.05rem 1.3rem 1.05rem 1.6rem;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  font-weight: 560;
  letter-spacing: -0.015em;
  transform: none;
  transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out),
    color 0.25s var(--ease-out), opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.chooser.is-staged .chooser__mark { order: 2; width: 24px; height: 24px; }
.chooser.is-staged .chooser__opt:hover {
  transform: none;
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}
.chooser.is-staged .chooser__opt[aria-pressed="true"] {
  border-color: transparent;
  background: var(--grad-switch);
  color: var(--switch-ink);
  box-shadow: 0 24px 60px -26px var(--accent-glow);
}
.chooser.is-staged .chooser__opt[aria-pressed="true"] .chooser__mark {
  background: var(--switch-ink);
}
.chooser.is-staged .chooser__opt[aria-pressed="true"] .chooser__mark::after { border-color: var(--accent-2); }
[data-theme="light"] .chooser.is-staged .chooser__opt[aria-pressed="true"] .chooser__mark::after { border-color: #1f7fe0; }
.chooser.is-staged.is-picking .chooser__opt[aria-pressed="false"] { opacity: 0.35; transform: scale(0.985); }

/* Vraag wisselen: de oude wijkt de diepte in, de nieuwe komt eruit op. */
.chooser.is-staged .chooser__opt:nth-child(1) { --n: 0; }
.chooser.is-staged .chooser__opt:nth-child(2) { --n: 1; }
.chooser.is-staged .chooser__opt:nth-child(3) { --n: 2; }
.chooser.is-staged .chooser__opt:nth-child(4) { --n: 3; }
[data-motion="on"] .chooser.is-staged .chooser__step.is-enter .chooser__q {
  animation: khPodIn 0.8s var(--ease-out) 0.24s both;
}
[data-motion="on"] .chooser.is-staged .chooser__step.is-enter .chooser__opt {
  animation: khPodIn 0.8s var(--ease-out) both;
  animation-delay: calc(0.32s + var(--n) * 0.05s);
}
[data-motion="on"] .chooser.is-staged .chooser__step.is-leave .chooser__q,
[data-motion="on"] .chooser.is-staged .chooser__step.is-leave .chooser__opt {
  animation: khPodOut 0.34s cubic-bezier(0.4, 0, 0.8, 0.4) both;
}
[data-motion="on"] .chooser.is-staged .chooser__step.is-leave .chooser__opt {
  animation-delay: calc(var(--n) * 0.025s);
}
@keyframes khPodIn {
  from { opacity: 0; transform: translateY(calc(30px * var(--d))) scale(1.02); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes khPodOut {
  from { opacity: 1; transform: none; filter: blur(0); }
  to { opacity: 0; transform: translateY(calc(-22px * var(--d))) scale(0.97); filter: blur(8px); }
}
/* Telefoon en tablet: dezelfde beweging zonder blur en korter. Vijf
   vervagende lagen tegelijk met het opzwellen van het podium haperden daar,
   en de kaart groeit er zelf al (podium.js grow): de vraag hoeft niet meer
   na het podium te komen, hij komt mee op. */
@media (max-width: 760px), (hover: none) {
  [data-motion="on"] .chooser.is-staged .chooser__step.is-enter .chooser__q {
    animation-duration: 0.55s;
    animation-delay: 0.08s;
  }
  [data-motion="on"] .chooser.is-staged .chooser__step.is-enter .chooser__opt {
    animation-duration: 0.55s;
    animation-delay: calc(0.12s + var(--n) * 0.04s);
  }
  /* Vraagwissel (.is-switch, keuzehulp.js): eerst gaat de oude vraag in
     0,2 s weg, dan pas komt de nieuwe. Zonder blur stonden de twee anders
     even leesbaar over elkaar heen (opname van Mika's iPhone, 1 okt 2026). */
  [data-motion="on"] .chooser.is-staged .chooser__step.is-leave .chooser__q,
  [data-motion="on"] .chooser.is-staged .chooser__step.is-leave .chooser__opt {
    animation-duration: 0.2s;
    animation-delay: 0s;
  }
  [data-motion="on"] .chooser.is-staged.is-switch .chooser__step.is-enter:not(.is-leave) .chooser__q { animation-delay: 0.22s; }
  [data-motion="on"] .chooser.is-staged.is-switch .chooser__step.is-enter:not(.is-leave) .chooser__opt {
    animation-delay: calc(0.26s + var(--n) * 0.04s);
  }
  @keyframes khPodIn {
    from { opacity: 0; transform: translateY(calc(30px * var(--d))) scale(1.02); }
    to { opacity: 1; transform: none; }
  }
  @keyframes khPodOut {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(calc(-22px * var(--d))) scale(0.97); }
  }
}


/* De laatste vraag lost op voordat het advies komt. */
[data-motion="on"] .chooser.is-staged .chooser__step.is-outro .chooser__q,
[data-motion="on"] .chooser.is-staged .chooser__step.is-outro .chooser__opt {
  animation: khPodOut 0.38s cubic-bezier(0.4, 0, 0.8, 0.4) both;
}
[data-motion="on"] .chooser.is-staged .chooser__step.is-outro .chooser__opt {
  animation-delay: calc(var(--n) * 0.025s);
}

/* De opbouw: kop gecentreerd, de ladder breed, de details in twee kolommen. */
.chooser.is-staged .chooser__result {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-areas:
    "badge badge"
    "title title"
    "kicker kicker"
    "path path"
    "list notes"
    "list first"
    "actions actions"
    "restart restart";
  /* rij 6 is flexibel: daar landt de hoogte van de lijst, zodat "Eerste
     stap" bovenaan de rechterkolom blijft staan */
  grid-template-rows: repeat(5, auto) 1fr auto auto;
  column-gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}
.chooser.is-staged .chooser__badge {
  grid-area: badge;
  justify-self: center;
  margin: 0 0 1.2rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--accent-deep);
}
[data-theme="light"] .chooser.is-staged .chooser__badge { color: #1f7fe0; }
.chooser.is-staged .chooser__title {
  grid-area: title;
  padding: 0;
  border: 0;
  text-align: center;
  font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.chooser.is-staged .chooser__kicker {
  grid-area: kicker;
  justify-self: center;
  max-width: 46ch;
  /* de afstand naar wat volgt zit hier, zodat hij ook klopt bij het advies
     zonder ladder (teams onder de tien) */
  margin: 1rem 0 clamp(2.8rem, 1.8rem + 4.5vh, 4.6rem);
  text-align: center;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  line-height: 1.4;
  letter-spacing: -0.012em;
}

.chooser.is-staged .kh-path {
  grid-area: path;
  margin: 0 0 clamp(2.6rem, 1.6rem + 4vh, 4.2rem);
  padding: clamp(1.6rem, 1rem + 2vw, 2.4rem) clamp(1.4rem, 1rem + 2vw, 2.6rem);
  border-radius: 30px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.chooser.is-staged .kh-path__tag {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-transform: none;
}
.chooser.is-staged .kh-path__title { font-size: 1.22rem; }
.chooser.is-staged .kh-path__step.is-next .kh-path__title { font-size: 1.42rem; }
.chooser.is-staged .kh-path__note { font-size: 0.98rem; }

.chooser.is-staged .chooser__list { grid-area: list; margin: 0; gap: 0.9rem; max-width: none; }
.chooser.is-staged .chooser__list li { font-size: 1.06rem; line-height: 1.5; }
.chooser.is-staged .chooser__notes { grid-area: notes; margin: 0 0 1rem; }
.chooser.is-staged .chooser__first {
  grid-area: first;
  margin: 0;
  padding: 0 0 0 clamp(1.2rem, 0.8rem + 1.4vw, 2rem);
  border: 0;
  border-left: 1px solid var(--line);
  font-size: 1.02rem;
  line-height: 1.55;
}
.chooser.is-staged .chooser__actions {
  grid-area: actions;
  justify-content: center;
  margin-top: clamp(2.4rem, 1.6rem + 3vh, 3.6rem);
}
.chooser.is-staged .chooser__restart { grid-area: restart; justify-self: center; margin-top: 1.4rem; }

/* Opbouw na de laatste vraag: kop, dan de ladder die zich tekent, dan de rest. */
[data-motion="on"] .chooser.is-staged .chooser__result.is-enter { animation: none; }
[data-motion="on"] .chooser.is-staged .chooser__result.is-enter > * {
  animation: khPodIn 0.9s var(--ease-out) both;
  animation-delay: var(--t, 0s);
}
.chooser.is-staged .chooser__badge { --t: 0.05s; }
.chooser.is-staged .chooser__title { --t: 0.12s; }
.chooser.is-staged .chooser__kicker { --t: 0.22s; }
.chooser.is-staged .kh-path { --t: 0.34s; }
.chooser.is-staged .chooser__list,
.chooser.is-staged .chooser__notes { --t: 0.9s; }
.chooser.is-staged .chooser__first { --t: 1s; }
.chooser.is-staged .chooser__actions { --t: 1.1s; }
.chooser.is-staged .chooser__restart { --t: 1.2s; }
[data-motion="on"] .chooser.is-staged .chooser__result.is-enter .kh-path__step {
  animation: khPodIn 0.8s var(--ease-out) both;
}
[data-motion="on"] .chooser.is-staged .chooser__result.is-enter .kh-path__step:nth-child(1) { animation-delay: 0.45s; }
[data-motion="on"] .chooser.is-staged .chooser__result.is-enter .kh-path__step:nth-child(2) { animation-delay: 0.62s; }
[data-motion="on"] .chooser.is-staged .chooser__result.is-enter .kh-path__step:nth-child(3) { animation-delay: 0.79s; }
[data-motion="on"] .chooser.is-staged .chooser__result.is-enter .kh-path__step::after {
  transform-origin: 0 50%;
  animation: khLine 0.7s var(--ease-out) both;
}
[data-motion="on"] .chooser.is-staged .chooser__result.is-enter .kh-path__step:nth-child(1)::after { animation-delay: 0.6s; }
[data-motion="on"] .chooser.is-staged .chooser__result.is-enter .kh-path__step:nth-child(2)::after { animation-delay: 0.78s; }
@keyframes khLine {
  from { transform: scaleX(0); }
  to { transform: none; }
}

@media (max-width: 760px) {
  .chooser.is-staged .chooser__result {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "badge" "title" "kicker" "path" "notes" "list" "first" "actions" "restart";
    grid-template-rows: none;
  }
  .chooser.is-staged .chooser__badge,
  .chooser.is-staged .chooser__restart { justify-self: start; }
  .chooser.is-staged .chooser__title,
  .chooser.is-staged .chooser__kicker { text-align: left; justify-self: start; }
  .chooser.is-staged .chooser__title { font-size: 2.3rem; }
  .chooser.is-staged .chooser__kicker { margin-bottom: 2rem; }
  .chooser.is-staged .kh-path { margin: 0 0 2rem; border-radius: 22px; }
  .chooser.is-staged .chooser__first { margin-top: 1.4rem; padding: 1.2rem 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .chooser.is-staged .chooser__actions { justify-content: stretch; }
  /* op de telefoon tekent de lijn verticaal */
  [data-motion="on"] .chooser.is-staged .chooser__result.is-enter .kh-path__step::after { transform-origin: 50% 0; animation-name: khLineV; }
}
@keyframes khLineV {
  from { transform: scaleY(0); }
  to { transform: none; }
}

@media (max-width: 760px) {
  .chooser.is-staged .chooser__top { top: 18px; }
  .chooser.is-staged .chooser__dot,
  .chooser.is-staged .chooser__dot.is-current { width: 24px; }
  .chooser.is-staged .chooser__q { font-size: 2rem; text-align: left; }
  .chooser.is-staged .chooser__opt { min-height: 64px; padding: 0.9rem 1rem 0.9rem 1.2rem; font-size: 1.02rem; border-radius: 18px; }
  /* de vijf streepjes zijn vol en zitten de sluitknop dan in de weg */
  .pd-layer.is-result .chooser.is-staged .chooser__dots { visibility: hidden; }
}

/* ============================================================
   Het pad: waar jullie staan, wat de volgende stap is, wat daarna komt
   ============================================================ */
.kh-path {
  list-style: none;
  margin: 0 0 clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  padding: 0;
  display: grid;
  gap: 1.15rem;
}
.kh-path__step {
  position: relative;
  display: grid;
  gap: 0.15rem;
  padding-left: 2rem;
}
/* De verbinding loopt van deze markering naar de volgende. */
.kh-path__step::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 22px;
  width: 2px;
  height: calc(100% + 1.15rem - 22px);
  border-radius: 2px;
  background: var(--line-strong);
}
.kh-path__step:last-child::after { display: none; }
.kh-path__step[data-link="lit"]::after { background: var(--grad-accent); box-shadow: 0 0 10px var(--accent-glow); }
.kh-path__step[data-link="soft"]::after { background: color-mix(in srgb, var(--accent-deep) 40%, transparent); }
.kh-path__step[data-link="dashed"]::after {
  background: none;
  border-left: 2px dashed var(--line-strong);
  border-radius: 0;
  width: 0;
}

.kh-path__mark {
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.kh-path__mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
}
.kh-path__tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.kh-path__title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 620;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.kh-path__note {
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 34ch;
}

/* Al gedaan: gedempt, met een vinkje. */
.kh-path__step.is-done .kh-path__mark {
  border-color: transparent;
  background: color-mix(in srgb, var(--accent-deep) 30%, transparent);
}
.kh-path__step.is-done .kh-path__mark::after {
  width: 5px;
  height: 9px;
  border-radius: 1px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  background: none;
  transform: translate(-50%, -58%) rotate(45deg);
  opacity: 0.75;
}
.kh-path__step.is-done .kh-path__title,
.kh-path__step.is-done .kh-path__note { color: var(--ink-faint); }

/* Hier staan jullie nu. */
.kh-path__step.is-now .kh-path__mark { border-color: var(--ink-faint); }
.kh-path__step.is-now .kh-path__mark::after { background: var(--ink-faint); }

/* De aanbeveling. Dit is het enige dat mag schreeuwen. */
.kh-path__step.is-next .kh-path__mark {
  border-color: transparent;
  background: var(--grad-accent);
  /* anders tegelt het verloop de doorzichtige rand nog eens: een vierkant in de bol */
  background-origin: border-box;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-2) 16%, transparent), 0 10px 26px -12px var(--accent-glow);
}
.kh-path__step.is-next .kh-path__tag { color: var(--accent-deep); }
.kh-path__step.is-next .kh-path__title { font-size: 1.16rem; }
.kh-path__step.is-next .kh-path__note { color: var(--ink); }

/* Daarna, en later. */
.kh-path__step.is-then .kh-path__mark { border-color: var(--accent-deep); border-style: solid; }
.kh-path__step.is-then .kh-path__mark::after { background: var(--accent-deep); }
.kh-path__step.is-later .kh-path__mark { border-style: dashed; }
.kh-path__step.is-later .kh-path__title,
.kh-path__step.is-later .kh-path__note { color: var(--ink-faint); }

/* Op een breder scherm ligt het pad horizontaal: drie stations naast elkaar. */
@media (min-width: 640px) {
  .kh-path {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 1.3rem;
  }
  .kh-path__step {
    padding-left: 0;
    padding-top: 2.4rem;
    align-content: start;
  }
  .kh-path__step::after {
    left: 22px;
    top: 9px;
    width: calc(100% + 1.3rem - 22px);
    height: 2px;
  }
  .kh-path__step[data-link="dashed"]::after {
    width: calc(100% + 1.3rem - 22px);
    height: 0;
    border-left: 0;
    border-top: 2px dashed var(--line-strong);
    top: 8px;
  }
  .kh-path__mark { top: 0; }
  .kh-path__note { max-width: none; }
}

/* ============================================================
   Resultaat
   ============================================================ */
.chooser__result:focus { outline: none; }
.chooser__badge {
  display: inline-flex;
  align-items: center;
  margin: 0 0 clamp(1.2rem, 0.9rem + 1vw, 1.7rem);
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--accent-deep) 34%, transparent);
  background: color-mix(in srgb, var(--accent-2) 10%, transparent);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.chooser__title {
  margin: 0;
  padding-top: clamp(1.2rem, 0.9rem + 1vw, 1.7rem);
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem);
  font-weight: 640;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
.chooser__kicker {
  margin: 0.55rem 0 0;
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: 1.45;
  max-width: 52ch;
}
/* Kanttekeningen bij de uitkomst: nul, één of twee blokjes onder elkaar. */
.chooser__notes {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.1rem;
}
.chooser__notes p {
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent-2) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-deep) 35%, transparent);
  color: var(--ink);
  font-size: var(--fs-small);
  line-height: 1.5;
  max-width: 62ch;
}
.chooser__list {
  margin: clamp(1.2rem, 0.9rem + 1vw, 1.6rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
  max-width: 62ch;
}
.chooser__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: 1.45;
}
.chooser__list svg { flex: none; width: 20px; height: 20px; margin-top: 0.2em; color: var(--accent-deep); }
.chooser__list a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.chooser__list a:hover { color: var(--ink); }
.chooser__first {
  margin: clamp(1.2rem, 0.9rem + 1vw, 1.6rem) 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: var(--fs-body);
  max-width: 62ch;
}
.chooser__first b { color: var(--ink); font-weight: 600; }
.chooser__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.4rem;
}
.chooser__restart {
  display: inline-block;
  margin-top: 1.1rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-faint);
  font: inherit;
  font-size: var(--fs-small);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.chooser__restart:hover { color: var(--ink); }
.chooser__restart:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ============================================================
   Statische routes (zonder JS)
   ============================================================ */
html.has-js .routes { display: none; }
.routes__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 2.4rem 0 0;
  padding: 0;
  list-style: none;
}
.route {
  padding: 1.6rem 1.5rem 1.7rem;
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.route__phase {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.route__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.55rem);
  font-weight: 640;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.route p:not(.route__phase) { margin: 0; font-size: var(--fs-small); color: var(--ink-soft); flex: 1 1 auto; }
.route .btn { align-self: flex-start; margin-top: 0.6rem; }

/* ============================================================
   De ladder-scene: dezelfde gepinde scene als op de partnership-pagina,
   maar met drie fases in plaats van zes, dus korter scrollen.
   ============================================================ */
.journey-scene.is-pinned .journey-scroller { height: 400vh; }
/* De kop dook onder de vaste navigatiebalk; die ruimte zit sinds de
   kolomopbouw in de stage-padding in pages.css, dus hier is niets meer nodig. */

/* ============================================================
   Vergelijking: twee fases op één podium
   ============================================================
   De compositie van een Apple-productvergelijking in ons eigen materiaal:
   één glazen podium, daarin de twee fases als kolom met een opname als
   productshot, naam, doorlooptijd en chevronlink, en daaronder per rij een
   groot cijfer met een korte toelichting. Alles gecentreerd per kolom.
   Op de telefoon (onderaan, max-width 720) kiest een schakelaar welke van
   de twee kolommen je ziet. */
#vergelijk .section__head {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}
#vergelijk .section__head .lead {
  max-width: 50ch;
  margin-inline: auto;
}
/* "in-company" brak op het streepje aan het regeleinde. */
.nb { white-space: nowrap; }

.cmp {
  --cmp-pad: clamp(1.4rem, 1rem + 1.8vw, 2.75rem);
  --cmp-gap: clamp(1.25rem, 0.75rem + 2vw, 3rem);
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  padding: var(--cmp-pad);
  border-radius: var(--r-xl);
}
/* .glass legt een gloed (::after, z-index 1) over zijn inhoud. */
.cmp > * {
  position: relative;
  z-index: 3;
}
.cmp__switch { display: none; }

/* ---------- de twee kolommen ---------- */
.cmp__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cmp-gap);
}
.cmp__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cmp__shot {
  position: relative;
  width: 100%;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: 0 0 0 1px var(--line);
}
.cmp__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
/* Fasechip op de opname: vast licht-op-donker, want hij ligt op een foto. */
.cmp__phase {
  position: absolute;
  left: clamp(0.75rem, 0.5rem + 0.8vw, 1.1rem);
  bottom: clamp(0.75rem, 0.5rem + 0.8vw, 1.1rem);
  padding: 0.4em 0.85em;
  border-radius: var(--r-pill);
  background: rgba(8, 12, 20, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  font-size: var(--fs-small);
  font-weight: 560;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #fff;
}
.cmp__name {
  margin: clamp(1.25rem, 1rem + 1vw, 1.75rem) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.05rem + 1.5vw, 2.15rem);
  font-weight: 640;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--ink);
  text-wrap: balance;
}
.cmp__span {
  margin: 0.45rem 0 0;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  font-weight: 440;
  color: var(--ink-soft);
}
/* De chevronlink van de Apple-hero (hero-ap.css laadt hier niet). */
.cmp__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin-top: 0.85rem;
  color: var(--accent-deep);
  font-size: clamp(0.98rem, 0.94rem + 0.25vw, 1.1rem);
  font-weight: 500;
  text-decoration: none;
}
.cmp__link:hover,
.cmp__link:focus-visible { text-decoration: underline; }
.cmp__link .chev {
  font-size: 1.3em;
  line-height: 1;
  transform: translateY(-0.06em);
}

/* ---------- de rijen: groot cijfer, korte toelichting ---------- */
.cmp__rows { margin-top: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.cmp__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cmp-gap);
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.25rem) 0;
  border-top: 1px solid var(--line);
}
.cmp__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cmp__fig {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.9rem);
  font-weight: 640;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
  text-wrap: balance;
}
.cmp__cap {
  margin-top: 0.5rem;
  max-width: 26em;
  font-size: clamp(0.92rem, 0.88rem + 0.22vw, 1.02rem);
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: balance;
}
.cmp__foot {
  margin: 0;
  padding-top: clamp(1.4rem, 1rem + 1.4vw, 2.25rem);
  border-top: 1px solid var(--line);
  max-width: none;
  text-align: center;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-faint);
  text-wrap: balance;
}

/* ============================================================
   Mobiel
   ============================================================ */
@media (max-width: 640px) {
  /* Bij het afbreken kwam het scheidingsstreepje aan het begin van de tweede
     regel te staan. Daar is de tussenruimte genoeg. */
  .kh-facts { gap: 0.35rem 1.25rem; }
  .kh-facts li + li::before { display: none; }
}

@media (max-width: 720px) {
  .chooser { border-radius: var(--r-lg); }
  .chooser__opts { grid-template-columns: 1fr; gap: 0.6rem; }
  .chooser__q { max-width: none; }
  .chooser__actions .btn { width: 100%; justify-content: center; }
  .chooser__top { flex-wrap: wrap; row-gap: 0.5rem; }
  .routes__list { grid-template-columns: 1fr; }

  /* Vergelijking: één kolom tegelijk. De schakelaar (iOS-segment) bovenin
     kiest de fase en blijft plakken tijdens het scrollen; daarvoor moet het
     glas hier zijn overflow loslaten (de rand en gloed zitten al binnen de
     ronding, dus dat kan). Zonder JS ontbreekt data-cmp-active en staan de
     twee kolommen gewoon onder elkaar. */
  .cmp {
    overflow: visible;
    padding: clamp(1rem, 0.6rem + 2vw, 1.4rem);
    border-radius: var(--r-lg);
  }
  .cmp[data-cmp-active] .cmp__switch {
    position: sticky;
    top: 5rem;
    z-index: 5;
    display: flex;
    margin-bottom: 1.1rem;
    padding: 4px;
    border-radius: var(--r-pill);
    background: var(--glass-fill-strong);
    border: 1px solid var(--line);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
  }
  .cmp__tab {
    flex: 1 1 0;
    position: relative;
    z-index: 1;
    padding: 0.7rem 0.5rem;
    border-radius: var(--r-pill);
    font-size: 0.9rem;
    font-weight: 560;
    letter-spacing: -0.01em;
    color: var(--ink-soft);
    transition: color var(--dur-1) var(--ease-out);
  }
  .cmp__tab.is-on { color: var(--ink); }
  .cmp__thumb {
    position: absolute;
    inset: 4px auto 4px 4px;
    width: calc(50% - 4px);
    border-radius: var(--r-pill);
    background: var(--bg-3);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px -4px rgba(0, 0, 0, 0.2);
    transition: translate 0.32s var(--ease-out);
  }
  .cmp[data-cmp-active="1"] .cmp__thumb { translate: 100% 0; }
  .cmp[data-cmp-active="0"] [data-cmp-side="1"],
  .cmp[data-cmp-active="1"] [data-cmp-side="0"] { display: none; }

  .cmp__cols,
  .cmp__row { grid-template-columns: 1fr; }
  .cmp__shot { aspect-ratio: 16 / 10; }
  .cmp__rows { margin-top: 1.5rem; }
  .cmp__row { padding: 1.35rem 0; }
  .cmp__cap { max-width: none; }
}

/* ============================================================
   Minder beweging
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .chooser__dot,
  .chooser__opt,
  .chooser__mark,
  .chooser__mark::after,
  .chooser__back { transition: none; }
  .chooser__opt:hover { transform: none; }
  .chooser__step.is-enter,
  .chooser__result.is-enter { animation: none; }
  .chooser__stop { transition: none; }
  .chooser__steps { transition: none; }
}