/* Tutorial pages: a film, then numbered steps with their own clips. */
.tutorial-shell { max-width: 1400px; margin: auto; padding: 170px var(--gutter) 70px; }
.tutorial-hero h1 { font: normal clamp(56px, 7vw, 108px)/.96 var(--serif); letter-spacing: -.035em; margin: 22px 0; }
.tutorial-shell em { color: var(--gold-hi); font-weight: normal; }
.tutorial-hero .features-lede { max-width: 640px; margin-bottom: 44px; }
.tutorial-film, .step-clip { display: block; width: 100%; height: auto; background: #000; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 24px 90px #0008; }
.tutorial-film { aspect-ratio: 16 / 9; overflow: hidden; }
.tutorial-film iframe { display: block; width: 100%; height: 100%; border: 0; }
.tutorial-note a { color: var(--gold); }
.tutorial-note { margin: 14px 0 0; font-size: 12px; color: var(--muted); }
.tutorial-steps { list-style: none; margin: 90px 0 0; padding: 0; }
.tutorial-step { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.6fr); gap: 5vw; align-items: start; padding: 60px 0; border-top: 1px solid var(--line); scroll-margin-top: 110px; }
.tutorial-step h2 { font: normal clamp(30px, 3vw, 42px)/1.1 var(--serif); letter-spacing: -.02em; margin: 14px 0 20px; }
.step-copy p:not(.overline) { margin: 0 0 14px; font-size: 14px; line-height: 1.75; color: var(--muted); }
.step-copy b, .tutorial-more b { color: var(--ivory); font-weight: 500; }
.tutorial-shell kbd { font: 12px ui-monospace, "JetBrains Mono", Menlo, monospace; color: var(--ivory); padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; background: #ffffff0d; }
.tutorial-shell code { font: 12px ui-monospace, "JetBrains Mono", Menlo, monospace; color: var(--ivory); }
.tutorial-more { padding: 70px 0 20px; border-top: 1px solid var(--line); }
.tutorial-more h2 { font: normal clamp(34px, 3.3vw, 48px)/1.08 var(--serif); margin: 14px 0 34px; }
.tutorial-links { margin-top: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; font-size: 13px; color: var(--muted); }
.tutorial-links a:not(.nav-cta) { color: var(--ivory); border-bottom: 1px solid var(--gold); padding-bottom: 3px; }
@media (max-width: 900px) {
  .tutorial-shell { padding-top: 130px; }
  .tutorial-step { grid-template-columns: 1fr; gap: 22px; padding: 44px 0; }
}
.film-play { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.film-play img { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-play-icon { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%;
  background: rgba(10, 10, 20, 0.72); box-shadow: inset 0 0 0 1.5px var(--gold); transition: transform 0.2s var(--ease); }
.film-play-icon::after { content: ""; position: absolute; left: 37px; top: 30px; border-left: 26px solid var(--gold-hi);
  border-top: 16px solid transparent; border-bottom: 16px solid transparent; }
.film-play:hover .film-play-icon, .film-play:focus-visible .film-play-icon { transform: scale(1.08); }
.film-play-note { position: absolute; right: 14px; bottom: 12px; font-size: 11px; color: var(--muted); background: rgba(10,10,20,.7); padding: 4px 8px; border-radius: 6px; }