/* Rendered Voidex journey; four readable HTML headings remain independent of art. */
.home-redesigned .home-proof { display: grid; align-content: center; min-block-size: 100svh; padding: 0; }
.home-answer-roadmap { position: relative; inline-size: 100%; margin: 0; view-timeline-name: --answer-roadmap; view-timeline-axis: block; }
.roadmap-render { position: relative; inline-size: 100%; aspect-ratio: 2; isolation: isolate; content-visibility: auto; contain-intrinsic-size: auto none auto 50vw; }
.roadmap-render::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("/assets/home-20261015-r1/home-roadmap-crystals-desktop.svg?v=1") center / 100% 100% no-repeat; mix-blend-mode: multiply; }
.roadmap-render::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("/assets/home-20261015-r1/home-roadmap-lights-desktop.svg?v=8") center / 100% 100% no-repeat; opacity: .9; }
.roadmap-render[data-magic-paused]::after { background-image: none; }
/* Use the sprite's own alpha contour, including its pixel edges and pointed tips.
   Slots include a small coverage margin over the original gems in 1774 × 887 art. */
.roadmap-crystal { position: absolute; pointer-events: none; background-repeat: no-repeat; image-rendering: pixelated; background-image: url("/assets/home-20261015-r1/voidex-optimized/home-roadmap-central-gem-v4-pixel.webp"); background-size: 116% 114.28571%; background-position: 50% 58.33333%; }
.roadmap-crystal--gpt { inset-inline-start: 58.51184%; inset-block-start: 55.12965%; inline-size: 6.48253%; block-size: 16.45998%; }
.roadmap-crystal--lectures { inset-inline-start: 85.4566%; inset-block-start: 33.93461%; inline-size: 2.70575%; block-size: 7.77903%; }
.home-redesigned .roadmap-screen-title { position: absolute; z-index: 2; inset-inline-start: clamp(32px, 6vw, 104px); inset-block-start: 6%; font-size: clamp(38px, 4vw, 64px); text-shadow: 0 3px 18px #090512; }
.home-redesigned .home-answer-roadmap .roadmap-screen-title em { color: inherit; }
.roadmap-art { display: block; inline-size: 100%; aspect-ratio: 2; }
.roadmap-art img { display: block; inline-size: 100%; block-size: auto; image-rendering: pixelated; mask-image: linear-gradient(180deg, transparent, #000 10%, #000 92%, transparent); }
.roadmap-stages { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.roadmap-stage { position: absolute; inline-size: 23%; min-inline-size: 0; text-align: center; transform: translate(-50%, -50%); }
.roadmap-stage--question { inset-inline-start: 15%; inset-block-start: 83%; }
.roadmap-stage--database { inset-inline-start: 38.5%; inset-block-start: 56%; }
.roadmap-stage--gpt { inset-inline-start: 62%; inset-block-start: 86%; }
.roadmap-stage--lectures { inset-inline-start: 86.5%; inset-block-start: 61%; }
.home-answer-roadmap h3 { margin: 0; padding: 6px 8px; color: #f3e8ff; font-size: clamp(20px, 2.2vw, 29px); line-height: 1.3; letter-spacing: -.025em; text-shadow: 0 2px 6px #090512, 0 0 24px #090512, 0 0 40px #090512; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes roadmap-stage-reveal { from { transform: translateY(8px); } to { transform: translateY(0); } }
    .roadmap-stage h3 { animation: roadmap-stage-reveal auto linear both; animation-timeline: --answer-roadmap; animation-range: cover 10% cover 30%; }
    .roadmap-stage:nth-child(2) h3 { animation-range: cover 25% cover 45%; }
    .roadmap-stage:nth-child(3) h3 { animation-range: cover 40% cover 60%; }
    .roadmap-stage:nth-child(4) h3 { animation-range: cover 55% cover 75%; }
  }
}
@media (max-width: 700px) {
  .home-redesigned .home-proof { min-block-size: 0; padding-block: 32px 0; }
  .home-redesigned .roadmap-screen-title { position: static; padding-inline: 20px; margin-block-end: 28px; font-size: clamp(36px, 9vw, 46px); }
  .roadmap-art { aspect-ratio: 1011 / 1556; }
  .roadmap-render { aspect-ratio: 1011 / 1556; contain-intrinsic-size: auto none auto 153.907vw; }
  .roadmap-render::before { background-image: url("/assets/home-20261015-r1/home-roadmap-crystals-mobile.svg?v=1"); }
  .roadmap-render::after { background-image: url("/assets/home-20261015-r1/home-roadmap-lights-mobile.svg?v=8"); }
  /* Independent slots measured in the 1011 × 1556 portrait illustration. */
  .roadmap-crystal--gpt { inset-inline-start: 27.99209%; inset-block-start: 52.05656%; inline-size: 7.71513%; block-size: 9.89717%; }
  .roadmap-crystal--lectures { inset-inline-start: 60.23739%; inset-block-start: 76.02828%; inline-size: 6.52819%; block-size: 7.32648%; }
  .roadmap-stage { inline-size: 40%; }
  .roadmap-stage--question { inset-inline-start: 68%; inset-block-start: 14%; }
  .roadmap-stage--database { inset-inline-start: 25%; inset-block-start: 36%; }
  .roadmap-stage--gpt { inset-inline-start: 70%; inset-block-start: 57.5%; }
  .roadmap-stage--lectures { inset-inline-start: 25%; inset-block-start: 82.5%; }
  .home-answer-roadmap h3 { font-size: clamp(20px, 4.5vw, 27px); padding-inline: 4px; }
}
@media (prefers-reduced-motion: reduce) { .roadmap-stage h3 { animation: none; opacity: 1; transform: none; } .roadmap-render::before, .roadmap-render::after { display: none; } }
