/* Scoped walkthrough layout; approved global styles remain unchanged. */
#how-it-works .how-layout {
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  grid-template-areas: "intro video" "features video";
  row-gap: 0;
}
#how-it-works .how-copy { grid-area: intro; }
#how-it-works .experience-parts { grid-area: features; }
.walkthrough-preview { grid-area: video; width: min(100%, 320px); margin: 20px auto 0; }
.walkthrough-play { display: block; position: relative; overflow: hidden; border-radius: 28px; border: 8px solid rgba(255,255,255,.14); box-shadow: var(--shadow); }
.walkthrough-play img { width: 100%; height: auto; }
.walkthrough-play-label { display: block; padding: 16px 8px; background: var(--paper); color: var(--navy); text-align: center; font-size: 15px; font-weight: 700; }
.walkthrough-play-label > span { display: block; margin-bottom: 7px; font-size: 28px; color: var(--blue); }
.walkthrough-play-label small { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; }
.walkthrough-play:focus-visible { outline: 3px solid var(--sky); outline-offset: 5px; }
#walkthrough-dialog { width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 20px; border: 1px solid var(--line); border-radius: 24px; background: var(--paper); color: var(--navy); overflow: auto; text-align: center; }
#walkthrough-dialog::backdrop { background: rgba(30,46,59,.8); }
#walkthrough-title { margin: 0 44px 16px; font-family: var(--serif); font-size: 26px; }
.walkthrough-close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--mist); color: var(--navy); font-size: 28px; cursor: pointer; }
#walkthrough-dialog video { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100dvh - 160px); margin: auto; border-radius: 12px; background: #000; }
#walkthrough-dialog p { margin: 10px 0 0; font-size: 13px; }
#walkthrough-dialog p a { text-decoration: underline; }
@media (max-width: 860px) {
  #how-it-works .how-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "video" "features"; }
  .walkthrough-preview { width: min(100%, 260px); margin-top: 26px; }
}
@media (max-width: 600px) {
  .walkthrough-preview { width: min(100%, 230px); }
}