/* ==========================================================================
   VPNDX — tutorial.css
   Tutorial page only: hero band, numbered step cards, action rows, notes.
   All colours / radii / shadows come from the :root tokens in base.css.
   ========================================================================== */

/* ------------------------------------------------------------ page hero */
.tut-hero{
  position:relative;
  overflow-x:clip;
  max-width:100%;
  padding-top:56px;
  padding-bottom:36px;
}
.tut-hero .lede{max-width:44em}
.tut-facts{margin:0 0 24px}
.tut-cta{margin:0}

/* ------------------------------------------------------------ step list */
.tut-steps{display:grid;gap:20px}
.tut-step{
  position:relative;
  background:var(--panel);
  border-radius:var(--r);
  box-shadow:var(--shadow-soft);
  padding:28px 32px;
  min-width:0;
}
.tut-step::before{
  content:"";
  position:absolute;
  top:0;
  left:32px;
  width:72px;
  height:3px;
  border-radius:0 0 2px 2px;
  background:linear-gradient(90deg, var(--blue), var(--accent));
}
.tut-step__head{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin:0 0 16px;
}
.tut-step__no{
  flex:none;
  font:700 13px/1 var(--font-mono);
  letter-spacing:.18em;
  color:color-mix(in srgb, var(--accent) 42%, transparent);
}
.tut-step__head h2{margin:0;font-size:clamp(22px, 2vw, 28px)}
.tut-step__body{max-width:70em}
.tut-step__body p{font-size:16px;line-height:1.75}
.tut-step__body h3{margin:26px 0 10px;font-size:18px}
.tut-step__body pre{
  background:var(--terminal);
  color:var(--terminal-text);
  border-radius:var(--r);
  padding:14px 18px;
  margin:0 0 18px;
  font:500 13px/1.8 var(--font-mono);
  overflow-x:auto;
  max-width:100%;
}
.tut-step__body pre code{color:inherit;font-size:inherit}
.tut-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:22px 0 0;
}
.tut-note{
  margin:16px 0 0;
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
  max-width:66em;
}
.tut-list{display:grid;gap:10px;margin:0 0 18px;max-width:66em}
.tut-list > li{
  position:relative;
  padding-left:20px;
  font-size:15px;
  line-height:1.72;
}
.tut-list > li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.62em;
  width:6px;
  height:6px;
  border-radius:2px;
  background:var(--accent);
}
.tut-list strong{color:var(--text);font-weight:600}

/* ------------------------------------------------------------ responsive */
@media (max-width:768px){
  .tut-hero{padding-top:36px;padding-bottom:26px}
  .tut-step{padding:22px 18px}
  .tut-step::before{left:18px}
  .tut-step__head{gap:10px}
}