/* Tutorials use the site's Public Sans/IBM Plex Mono, neutral surfaces and indigo accent. */
.tutorials-hero { display: block; padding-bottom: var(--s7); }
.tutorials-hero h1 { margin-top: var(--s3); }
.tutorials-summary { margin-top: var(--s4); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-2); }
.tutorials-summary span { color: var(--rule-strong); padding: 0 8px; }
.tutorials-price { margin-top: var(--s3); color: var(--ink-2); font-size: var(--fs-sm); }
.tutorials-price a { color: var(--accent); font-weight: 700; text-underline-offset: 3px; }
.tutorials-steps { max-width: var(--wrap); margin: 0 auto; }
.tutorials-step, .tutorials-step + .tutorials-step { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); align-items: start; gap: clamp(24px,5vw,72px); border-top: 1px solid var(--rule); padding-block: var(--s7); }
.tutorials-number { color: var(--accent); font: 500 var(--fs-label)/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.tutorials-number span { padding: 0 8px; color: var(--rule-strong); }
.tutorials-copy h2 { font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -.02em; margin-top: var(--s3); }
.tutorials-copy > p:not(.tutorials-number) { margin-top: var(--s4); line-height: 1.65; }
.tutorials-copy h3 { font-size: var(--fs-xs); margin-top: var(--s6); color: var(--ink); }
.tutorials-copy ol { margin-top: var(--s3); padding-left: 1.3rem; color: var(--ink-2); display: grid; gap: var(--s2); font-size: var(--fs-sm); line-height: 1.55; }
.tutorials-copy li { padding-left: 4px; }
.tutorials-watch { display: inline-block; margin-top: var(--s5); font-size: var(--fs-sm); font-weight: 600; color: var(--accent); text-underline-offset: 3px; }
.tutorials-watch:hover { color: var(--accent-deep); }
.tutorials-player { width: 100%; aspect-ratio: 16/9; border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; background: var(--ink); }
.tutorials-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.tutorials-finish { border-top: 1px solid var(--rule); padding-top: var(--s7) !important; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s6); }
.tutorials-finish h2 { margin-top: var(--s3); font-size: var(--fs-h2); letter-spacing: -.02em; }
.tutorials-finish p:not(.eyebrow) { margin-top: var(--s3); line-height: 1.65; max-width: 65ch; }
.tutorials-finish-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
@media(max-width:779px){.tutorials-step,.tutorials-step + .tutorials-step{grid-template-columns:1fr;gap:var(--s5);padding-block:var(--s6)}.tutorials-hero{padding-bottom:var(--s6)}.tutorials-finish-actions{width:100%}}
@media(max-width:479px){.tutorials-finish-actions{flex-direction:column}.tutorials-finish-actions a{width:100%;text-align:center}}