.how-to { scroll-margin-top: 96px; }
.how-to-teaser, .how-to-guide { display:flex; align-items:center; justify-content:space-between; gap:32px; }
.how-to-teaser .section-title, .how-to-guide .section-title { margin-bottom:12px; }
.how-to-teaser .section-copy, .how-to-guide .section-copy { max-width:650px; margin:0; }
.how-to-teaser > .btn, .how-to-guide > .btn { flex-shrink:0; }
.how-to-hero { padding-bottom:38px; }
.how-to-hero .how-to-meta { margin-top:22px; }
.how-to-video { padding-bottom:clamp(54px, 7vw, 84px); }
.how-to-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:30px; }
.how-to-heading .section-title { margin-bottom:12px; }
.how-to-heading .section-copy { max-width:650px; margin:0; }
.how-to-meta { color:var(--text-secondary); font:400 12px/1.6 var(--font-mono); white-space:nowrap; }
.how-to-layout { display:grid; grid-template-columns:minmax(0, 2fr) minmax(280px, 1fr); gap:24px; align-items:start; }
.how-to-player { margin:0; min-width:0; }
.how-to-player video { display:block; width:100%; height:auto; aspect-ratio:8/5; background:#14161a; border:1px solid var(--border-default); border-radius:14px; }
.how-to-player video:focus-visible, .how-to-chapters button:focus-visible { outline:3px solid var(--primary); outline-offset:4px; }
.how-to-caption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; margin-top:14px; color:var(--text-secondary); font-size:12px; }
.how-to-chapters { border:1px solid var(--border-default); border-radius:14px; background:var(--surface); overflow:hidden; }
.how-to-chapters summary { padding:15px 18px; cursor:pointer; font:600 16px/1.4 var(--font-display); }
.how-to-chapters ol { margin:0; padding:0 8px 8px; list-style:none; }
.how-to-chapters button { width:100%; border:0; background:transparent; text-align:left; cursor:pointer; display:flex; align-items:center; gap:14px; padding:10px; border-radius:7px; color:var(--text-secondary); font-size:13px; line-height:1.4; text-decoration:none; }
.how-to-chapters button:hover { background:var(--surface-2); color:var(--text-primary); }
.how-to-chapters button[aria-current="true"] { background:var(--secondary-soft); color:var(--primary); }
.how-to-chapters time { flex:0 0 46px; font:400 11px/1.4 var(--font-mono); color:var(--primary); }
.how-to-status:empty { display:none; }
.how-to-status { color:var(--text-secondary); font-size:13px; margin-top:10px; }
@media (max-width:800px) {
  .how-to-teaser, .how-to-guide { align-items:flex-start; flex-direction:column; gap:22px; }
  .how-to-heading { display:block; }
  .how-to-meta { margin-top:16px; }
  .how-to-layout { grid-template-columns:1fr; gap:20px; }
  .how-to-chapters ol { display:grid; grid-template-columns:1fr 1fr; }
}
@media (max-width:520px) {
  .how-to-chapters ol { grid-template-columns:1fr; }
  .how-to-player video { border-radius:10px; }
}