.tutorial-hero{
  padding-top:clamp(72px,9vw,118px);
  padding-bottom:clamp(56px,7vw,92px);
  text-align:center
}
.tutorial-hero-copy{
  display:grid;
  justify-items:center;
  gap:22px
}
.tutorial-hero-copy .eyebrow{
  margin-bottom:0
}
.tutorial-hero-copy .lead{
  max-width:720px
}
.tutorial-hero-copy .button-row{
  justify-content:center
}
.tutorial-facts{
  display:flex;
  max-width:100%;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:4px
}
.tutorial-facts span{
  display:inline-flex;
  max-width:100%;
  align-items:center;
  padding:6px 12px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-pill);
  background:var(--color-surface);
  color:var(--color-ink-muted);
  font-size:12px
}
.tutorial-intro{
  padding-top:0;
  padding-bottom:var(--section-space)
}
.tutorial-intro .callout{
  margin-bottom:24px
}
.tutorial-toc{
  margin-bottom:40px
}
.tutorial-before{
  display:grid;
  grid-template-columns:minmax(180px,.55fr) minmax(0,1.45fr);
  gap:clamp(28px,5vw,58px)
}
.tutorial-before h2{
  font-size:clamp(25px,3vw,34px)
}
.tutorial-before-copy{
  min-width:0;
  color:var(--color-ink-muted)
}
.tutorial-before-copy p+p{
  margin-top:16px
}
.tutorial-before-copy a{
  color:var(--color-brand-deep);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px
}
.tutorial-step{
  min-width:0
}
.tutorial-step-head{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:24px;
  align-items:start;
  margin-bottom:40px
}
.tutorial-step-number{
  display:grid;
  width:72px;
  height:72px;
  place-items:center;
  border:1px solid var(--color-brand);
  border-radius:var(--radius-lg);
  background:var(--color-brand-soft);
  color:var(--color-brand-deep);
  font-family:var(--font-mono);
  font-size:18px;
  font-weight:700;
  box-shadow:var(--shadow-lift)
}
.tutorial-step-head .eyebrow{
  margin-bottom:8px
}
.tutorial-step-head .lead{
  margin-top:14px
}
.tutorial-step-body{
  padding:clamp(24px,5vw,52px);
  border:1px solid var(--color-line);
  border-radius:var(--radius-section);
  background:var(--color-surface);
  box-shadow:var(--shadow-panel)
}
.tutorial-ui{
  margin-top:28px;
  margin-bottom:28px;
  padding:8px 20px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  background:var(--color-surface-soft)
}
.tutorial-ui-row{
  display:grid;
  grid-template-columns:30px minmax(0,1fr) minmax(140px,.8fr);
  gap:12px;
  align-items:center;
  padding:13px 0
}
.tutorial-ui-row+.tutorial-ui-row{
  border-top:1px solid var(--color-line)
}
.tutorial-ui-key{
  display:grid;
  width:24px;
  height:24px;
  place-items:center;
  border-radius:var(--radius-pill);
  background:var(--color-brand);
  color:var(--color-surface);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700
}
.tutorial-mode-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:28px;
  margin-bottom:28px
}
.tutorial-mode-item{
  min-width:0;
  padding:20px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-surface-soft)
}
.tutorial-mode-item strong{
  display:block;
  margin-bottom:8px;
  color:var(--color-brand-deep)
}
.tutorial-mode-item p{
  color:var(--color-ink-muted);
  font-size:14px
}
.tutorial-checklist{
  margin-top:30px;
  margin-bottom:30px;
  padding:clamp(20px,4vw,32px);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  background:var(--color-surface-soft)
}
.tutorial-checklist h3{
  margin-top:0
}
.tutorial-checklist ol{
  display:grid;
  gap:14px;
  margin-top:20px;
  padding-left:1.4em
}
.tutorial-checklist li::marker{
  color:var(--color-brand-deep);
  font-family:var(--font-mono);
  font-weight:700
}
.tutorial-result{
  margin-top:32px;
  margin-bottom:32px;
  background:var(--color-success-soft)
}
.tutorial-result h3{
  margin-top:14px
}
.tutorial-result ul{
  display:grid;
  gap:10px;
  margin-top:20px;
  padding-left:1.4em
}
.tutorial-result li::marker{
  color:var(--color-success)
}
.tutorial-next{
  padding-top:0;
  padding-bottom:var(--section-space)
}
.tutorial-next .download-guide{
  margin-top:0
}
.tutorial-next .button-row{
  flex-shrink:0
}
@media(max-width:768px){
  .tutorial-before{
    grid-template-columns:1fr
  }
  .tutorial-step-head{
    grid-template-columns:52px minmax(0,1fr);
    gap:16px
  }
  .tutorial-step-number{
    width:52px;
    height:52px;
    border-radius:var(--radius-md);
    font-size:14px
  }
  .tutorial-mode-grid{
    grid-template-columns:1fr
  }
}
@media(max-width:640px){
  .tutorial-hero{
    padding-top:56px;
    padding-bottom:48px
  }
  .tutorial-hero-copy{
    gap:18px
  }
  .tutorial-facts{
    justify-content:flex-start
  }
  .tutorial-step-head{
    grid-template-columns:1fr
  }
  .tutorial-step-number{
    width:46px;
    height:46px
  }
  .tutorial-step-body{
    padding:22px;
    border-radius:var(--radius-lg)
  }
  .tutorial-ui{
    padding:6px 14px
  }
  .tutorial-ui-row{
    grid-template-columns:28px minmax(0,1fr)
  }
  .tutorial-ui-row .muted{
    grid-column:2
  }
  .tutorial-next .button-row{
    width:100%
  }
}