.tutorial-hero{
  padding-bottom:clamp(34px,5vw,58px);
}

.tutorial-hero .hero-copy{
  max-width:720px;
}

.path-strip{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  max-width:760px;
  margin:34px auto 0;
  padding:14px 18px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-pill);
  background:var(--color-page);
  box-shadow:var(--shadow-card);
}

.path-strip span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:3px 11px;
  border-radius:var(--radius-pill);
  background:var(--color-panel);
  color:var(--color-ink);
  font-family:var(--font-mono);
  font-size:.76rem;
  font-weight:700;
  white-space:nowrap;
}

.path-strip i{
  color:var(--color-brand);
  font-style:normal;
  font-weight:800;
}

.tutorial-main{
  padding-top:32px;
  padding-bottom:var(--section-space);
}

.tutorial-reading{
  width:100%;
  max-width:var(--reading-width);
  margin-inline:auto;
}

.tutorial-reading > .callout{
  margin-bottom:clamp(46px,7vw,76px);
}

.guide-intro,
.step-section{
  scroll-margin-top:var(--toc-offset);
}

.guide-intro{
  padding-top:clamp(36px,5vw,58px);
  padding-bottom:clamp(36px,5vw,58px);
}

.guide-intro + .step-section,
.step-section + .step-section,
.step-section + .guide-intro{
  border-top:1px solid var(--color-line);
}

.guide-intro h2,
.step-section h2{
  margin-bottom:22px;
}

.guide-intro p,
.step-section > p,
.platform-note p,
.handoff p{
  color:var(--color-muted);
}

.guide-intro p:last-child,
.step-section > p:last-child,
.platform-note p:last-child,
.handoff p:last-child{
  margin-bottom:0;
}

.step-label{
  display:inline-flex;
  align-items:center;
  min-height:27px;
  margin-bottom:12px;
  padding:3px 10px;
  border:1px solid var(--color-brand);
  border-radius:var(--radius-pill);
  background:var(--color-brand-soft);
  color:var(--color-brand-deep);
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:800;
}

.step-section{
  padding-top:clamp(54px,8vw,86px);
  padding-bottom:clamp(54px,8vw,86px);
}

.step-heading{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:18px;
  margin-bottom:18px;
}

.step-heading h2{
  margin-bottom:0;
}

.step-heading .step-label{
  margin-bottom:9px;
}

.step-number{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  background:var(--color-panel);
  color:var(--color-brand-deep);
  font-family:var(--font-display);
  font-size:1.1rem;
  font-weight:800;
  flex-shrink:0;
}

.guide-actions,
.end-links{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px 22px;
  margin-top:28px;
}

.text-link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--color-brand-deep);
  font-weight:700;
}

.text-link:hover{
  text-decoration:underline;
  text-underline-offset:4px;
}

.platform-notes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:30px;
}

.platform-note{
  min-width:0;
  padding:24px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-page);
  box-shadow:var(--shadow-card);
}

.platform-note h3{
  margin:16px 0 12px;
  font-size:1.2rem;
}

.platform-note .badge{
  max-width:100%;
  overflow:hidden;
}

.handoff{
  margin-top:22px;
  padding:22px 24px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-panel);
}

.handoff strong{
  display:block;
  margin-bottom:6px;
}

.check-list{
  display:grid;
  gap:12px;
  margin:30px 0 0;
  padding:22px 24px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-panel);
  list-style:none;
}

.check-list li{
  position:relative;
  padding-left:27px;
  color:var(--color-muted);
}

.check-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:var(--color-success);
  font-weight:800;
}

.check-list strong{
  color:var(--color-ink);
}

.end-links{
  margin-top:34px;
}

@media (max-width:768px){
  .path-strip{
    border-radius:var(--radius-md);
  }

  .platform-notes{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  .tutorial-main{
    padding-top:22px;
  }

  .path-strip{
    gap:7px;
    padding:12px;
  }

  .path-strip span{
    padding-inline:8px;
    font-size:.7rem;
  }

  .step-heading{
    gap:12px;
  }

  .step-number{
    width:40px;
    height:40px;
  }

  .platform-note,
  .handoff,
  .check-list{
    padding:20px;
  }

  .guide-actions,
  .end-links{
    align-items:stretch;
    flex-direction:column;
  }

  .guide-actions .btn,
  .guide-actions .text-link,
  .end-links .btn,
  .end-links .text-link{
    width:100%;
    justify-content:center;
  }
}

@media (max-width:390px){
  .path-strip i{
    display:none;
  }

  .path-strip span{
    flex:1 1 auto;
    justify-content:center;
  }

  .step-heading{
    grid-template-columns:1fr;
  }
}