/* "See it in 60 seconds" step-through (partials/demo-walkthrough.ejs, task 740).
   Without .is-enhanced (no JS) every step is listed. With it, one story and
   one step show at a time. */
.dw { padding: 4.5rem 0; background: var(--hp-cream); }
.dw__label { display: block; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hp-accent-ink); margin-bottom: .75rem; }
.dw__heading { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; color: var(--hp-navy); margin: 0 0 1rem; line-height: 1.2; }
.dw__intro { font-size: 1.0625rem; color: var(--hp-text-muted); max-width: 680px; line-height: 1.7; margin: 0 0 2rem; }

.dw__tabs { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; }
.dw__tab { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; text-align: left; font: inherit; font-weight: 700; font-size: .9375rem; color: var(--hp-navy); background: #fff; border: 2px solid var(--hp-border); border-radius: var(--hp-radius); padding: .75rem 1rem; cursor: pointer; }
.dw__tab[aria-selected="true"] { border-color: var(--hp-accent); }
.dw__tab:focus-visible, .dw__btn:focus-visible { outline: 3px solid var(--hp-accent-ink); outline-offset: 2px; }
.dw__tab-label { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hp-accent-ink); }

.dw__story + .dw__story { margin-top: 3rem; }
.dw__story-title { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 800; color: var(--hp-navy); margin: 0 0 1.25rem; }
.dw__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
@media (max-width: 768px) { .dw__steps { grid-template-columns: 1fr; } }
.dw__step { margin: 0; }
.dw__frame { margin: 0 0 1rem; border-radius: var(--hp-radius); overflow: hidden; background: #0c1426; box-shadow: 0 10px 24px rgba(12,20,38,.15); line-height: 0; }
.dw__frame img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.dw__step-num { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hp-accent-ink); margin: 0 0 .25rem; }
.dw__step-heading { font-size: 1.125rem; font-weight: 800; color: var(--hp-navy); margin: 0 0 .375rem; }
.dw__step-text { font-size: 1rem; color: var(--hp-text); line-height: 1.65; margin: 0; max-width: 62ch; }

.dw__video { margin: 0 0 1rem; }
.dw__video video { display: block; width: 100%; height: auto; border-radius: var(--hp-radius); background: #000; }
.dw__script summary { cursor: pointer; font-weight: 700; color: var(--hp-navy); }
.dw__script ol { margin: .75rem 0 0; padding-left: 1.25rem; line-height: 1.65; }

/* Enhanced: one story, one step */
.dw.is-enhanced .dw__story[hidden] { display: none; }
.dw.is-enhanced .dw__story + .dw__story { margin-top: 0; }
.dw.is-enhanced .dw__story-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dw.is-enhanced .dw__steps { display: block; max-width: 880px; }
.dw.is-enhanced .dw__step { display: none; }
.dw.is-enhanced .dw__step.is-current { display: block; }
.dw.is-enhanced .dw__caption { min-height: 7.5rem; }

.dw__controls { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; max-width: 880px; }
.dw__btn { font: inherit; font-weight: 700; font-size: 1rem; min-width: 2.75rem; height: 2.75rem; padding: 0 .9rem; border-radius: 999px; border: 2px solid var(--hp-border); background: #fff; color: var(--hp-navy); cursor: pointer; }
.dw__btn--play { min-width: 5.5rem; background: var(--hp-accent-ink); border-color: var(--hp-accent-ink); color: #fff; }
.dw__btn--play:hover { background: var(--hp-accent-ink-hover); }
.dw__progress { flex: 1; height: 4px; border-radius: 999px; background: var(--hp-border); overflow: hidden; margin-left: .5rem; }
.dw__progress-fill { display: block; height: 100%; width: 0; background: var(--hp-accent); }
.dw__progress-fill.is-running { animation: dw-fill var(--dw-seconds, 7s) linear forwards; }
.dw__progress-fill.is-paused { animation-play-state: paused; }
@keyframes dw-fill { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .dw__progress { display: none; } }
.dw__tabs[hidden], .dw__controls[hidden] { display: none; }
.dw__btn[data-dw-prev], .dw__btn[data-dw-next] { font-size: 1.375rem; line-height: 1; }
@media (min-width: 900px) {
  .dw.is-enhanced .dw__steps, .dw__controls { max-width: none; }
  .dw.is-enhanced .dw__step.is-current { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
  .dw.is-enhanced .dw__frame { margin: 0; }
  .dw.is-enhanced .dw__caption { min-height: 0; }
}