/* tutorial template */
.tut{max-width:1080px;margin:0 auto;padding:clamp(36px,5vw,72px) 20px 0;color:#4f4940;font:16px/1.7 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",sans-serif}
.tut-head{max-width:760px}
.info-kicker a{color:inherit;text-decoration:none}.info-kicker a:hover{color:#2f2b26}
.tut-title{margin:0;font:700 clamp(30px,4.2vw,50px)/1.08 "Syne",sans-serif;text-transform:uppercase;letter-spacing:.015em;color:#5a534a}
.tut-sub{margin:10px 0 0;font:400 clamp(18px,1.8vw,22px)/1.35 "Archivo Expanded",sans-serif;font-stretch:125%;color:#857c70}
.tut-video{margin:clamp(24px,3.5vw,40px) 0 0;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#e9e4da;box-shadow:0 18px 50px -30px rgba(47,43,38,.45)}
.tut-video iframe{width:100%;height:100%;border:0;display:block}
.tut-play{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}
.tut-play img{width:100%;height:100%;object-fit:cover;display:block}
.tut-play-icon{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:rgba(47,43,38,.82);transition:transform .2s,background .2s}
.tut-play-icon::after{content:"";position:absolute;left:31px;top:24px;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent #fff}
.tut-play:hover .tut-play-icon{transform:scale(1.06);background:#2f2b26}
.tut-play:focus-visible{outline:3px solid #2f2b26;outline-offset:3px}
.tut-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(32px,5vw,72px);margin-top:clamp(32px,4vw,52px)}
.tut-lead{margin:0 0 28px;font-size:18px;color:#5a534a}
.tut-h{margin:0 0 16px;font:500 21px/1.3 "Archivo Expanded",sans-serif;font-stretch:125%;color:#5a534a}
.tut-steps{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.tut-steps li{display:flex;gap:16px;align-items:flex-start}
.tut-num{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid rgba(47,43,38,.35);display:grid;place-items:center;font:600 13px/1 -apple-system,sans-serif;color:#5a534a;margin-top:2px}
.tut-steps h3{margin:0;font:600 16px/1.4 -apple-system,BlinkMacSystemFont,"Inter",sans-serif;color:#2f2b26}
.tut-steps p{margin:2px 0 0;color:#6b645a}
.tut-outro{margin:28px 0 0;padding:16px 18px;border-left:2px solid #c9a24a;background:#f1ece2;border-radius:0 8px 8px 0;color:#5a534a}
.tut-cta{margin-top:40px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:22px 24px;border:1px solid rgba(47,43,38,.16);border-radius:16px;background:#f9f7f2}
.tut-cta>div{flex:1;min-width:200px}.tut-cta p{margin:0;color:#6b645a;font-size:14.5px}.tut-cta .tut-cta-h{color:#2f2b26;font-weight:600;font-size:16px}
.tut-cta-guy{width:40px;height:42px;color:#5a534a}.tut-cta-guy svg{width:100%;height:100%;display:block}
.tut-more{position:sticky;top:24px;align-self:start}
.tut-more ul{list-style:none;margin:10px 0 0;padding:0;border-left:1px solid rgba(47,43,38,.15);max-height:70vh;overflow:auto;scrollbar-width:thin}
.tut-more li a{display:block;padding:6px 0 6px 12px;color:#7a7266;text-decoration:none;font-size:13.5px;line-height:1.35}
.tut-more li a:hover{color:#2f2b26}
@media (max-width:860px){.tut-grid{grid-template-columns:1fr}.tut-more{position:static}.tut-more ul{max-height:none}}
.tut-more .nav-h{margin:0;font:500 11px/1 -apple-system,BlinkMacSystemFont,"Inter",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8f877b}