/* Steps-on-the-left, phone-on-the-right layout for the phone demo (phone-demo.js).
   Loaded in <head> so the step cards never jump when the animation starts.
   Works for any card list: the first child of .vd-layout is the list, cards carry data-vd-step. */
.vd-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;align-items:center;margin-top:42px}
.vd-chapter .vd-layout > :first-child{grid-template-columns:1fr;gap:14px;margin-top:0}
.vd-chapter [data-vd-step]{min-height:0;padding:20px 22px;border-width:3px;border-radius:22px;transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,background .3s,opacity .3s}
.vd-chapter .step-card{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:start}
.vd-chapter .step-card .step-num{grid-row:span 2;width:46px;height:46px;border-width:3px;border-radius:15px}
.vd-chapter .step-card h3{margin:2px 0 6px}
.vd-chapter [data-vd-step].vd-on{transform:translateX(8px);box-shadow:-8px 0 0 var(--vd-accent,#F87171);background:#fff}
.vd-chapter [data-vd-step].vd-done{opacity:.75}
@media (max-width:960px){.vd-layout{grid-template-columns:1fr;gap:24px}.vd-chapter [data-vd-step].vd-on{transform:none;box-shadow:0 0 0 3px var(--vd-accent,#F87171)}}