@import url('/demo/fonts/fonts.css');
/* The existing Journey Card, colours, typography and motion remain canonical. */
#brand-intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: #2D2D28;
  transition: opacity 620ms ease;
}
#brand-intro img {
  display: block;
  width: min(55vw, 240px);
  height: auto;
  filter: invert(1);
  opacity: .72;
  animation: md-arrive 600ms ease both;
}
#brand-intro.is-finished { opacity: 0; pointer-events: none; }
.demo-starting .journey-shell { opacity: 0; }
html[data-demo="marlies"] .journey-shell { transition: opacity 620ms ease; }
html[data-demo="marlies"] .detail-beschrijving { max-width: 48ch; }
html[data-demo="marlies"] #detail-image { object-fit: contain; background: #fff; filter: none; }
/* The context rows now contain product names rather than numeric IDs. */
html[data-demo="marlies"] .context-feit {
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 5px 14px;
}
html[data-demo="marlies"] .context-feit strong { grid-row: 1 / span 2; }
html[data-demo="marlies"] .context-feit b { font-size: 18px; overflow-wrap: break-word; }
html[data-demo="marlies"] .context-feit span { grid-column: 2; overflow-wrap: break-word; }
.demo-startup-error {
  position: fixed; inset: 0; z-index: 101; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 28px; text-align: center; background: #2D2D28; color: #eee;
}
.demo-startup-error button {
  padding: 12px 24px; border: 1px solid #888; border-radius: 5px;
  background: transparent; color: inherit; font: inherit; cursor: pointer;
}
@keyframes md-arrive { from { opacity: 0; transform: translateY(3px); } to { opacity: .72; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  #brand-intro, html[data-demo="marlies"] .journey-shell { transition: none; }
  html[data-demo="marlies"] .journey-flip { transition: none; }
  #brand-intro img { animation: none; }
}

/* Path remains the existing translucent overlay, with real retained moments. */
html[data-demo="marlies"] .is-path .ghost-body { display: flex; flex-direction: column; }
html[data-demo="marlies"] .is-path #overlay-facts { flex: 1; min-height: 0; max-height: none; margin-top: 0; }
.md-path-moment {
  flex-shrink: 0; width: 100%; min-height: 138px; padding: 10px 0;
  display: grid; grid-template-columns: 80px minmax(0,1fr) 24px;
  align-items: center; gap: 18px; text-align: left;
  border: 0; border-bottom: 1.5px dashed var(--ghost-dash);
  border-radius: 0; background: transparent; color: var(--ghost-ink); font: inherit;
}
button.md-path-moment { cursor: pointer; }
button.md-path-moment:hover { background: rgba(255,255,255,.08); }
button.md-path-moment:focus-visible { outline: 2px solid var(--ghost-ink); outline-offset: -3px; }
.md-path-moment img { width: 80px; height: 120px; object-fit: cover; border-radius: 7px; }
.md-path-text { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.md-path-text strong { font-size: 21px; line-height: 1.25; font-weight: 600; overflow-wrap: break-word; }
.md-path-label { font-size: 17px; font-weight: 600; }
.md-path-context { font-size: 16px; line-height: 1.35; opacity: .8; }
.md-path-return { font-size: 30px; }
.md-path-moment[aria-current="step"] { grid-template-columns: 80px minmax(0,1fr); }