/* VPNEQ — tutorial (quickstart) page styles: hero strip, step flow, url mock, check list */

.tut-hero{
  background:linear-gradient(180deg,var(--hero-top) 0%,var(--hero-bot) 100%);
  border-bottom:1px solid var(--border-soft);
  overflow-x:clip;max-width:100%;
}
.tut-hero .wrap{padding-top:56px;padding-bottom:56px}
.tut-hero h1{
  margin-top:18px;font-weight:900;letter-spacing:-.03em;line-height:1.12;
  font-size:clamp(34px,4.6vw,56px);max-width:20ch;
}
.tut-hero .lead{margin-top:18px;font-size:18.5px;line-height:1.65;color:var(--text-muted);max-width:62ch}

.tut-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:24px}
.tut-actions .btn{flex-shrink:0;white-space:nowrap}

.tut-facts{margin-top:26px}
.tut-facts .chip{font-weight:500;color:var(--text-muted)}

/* ---------- step flow ---------- */
.tut-flow{counter-reset:tut}
.tut-step{
  counter-increment:tut;
  padding-top:46px;margin-top:46px;border-top:1px solid var(--border-soft);
}
.tut-step:first-child{border-top:0;margin-top:0;padding-top:0}
.tut-step > h2{font-size:clamp(22px,2.6vw,30px);font-weight:900;letter-spacing:-.025em}
.tut-step > h2::before{
  content:counter(tut);
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;margin-right:12px;vertical-align:middle;
  border-radius:50%;background:var(--bg-panel2);border:1px solid var(--border);
  color:var(--accent-dark);font-family:var(--font-mono);font-size:13.5px;font-weight:700;
}
.tut-step p{margin:14px 0 0;font-size:16px;line-height:1.75;color:var(--text)}
.tut-step .tut-actions{margin-top:22px}

/* ---------- subscription url mock ---------- */
.tut-url{
  margin:18px 0 0;padding:13px 15px;overflow:hidden;
  background:var(--bg-panel2);border:1px solid var(--border);border-radius:var(--r-sm);
}
.tut-url code{
  display:block;background:transparent;border:0;padding:0;
  font-size:12.5px;color:var(--text);
  overflow-wrap:anywhere;word-break:break-all;
}

/* ---------- verification checklist ---------- */
.tut-check{display:flex;flex-direction:column;gap:11px;margin:18px 0 0}
.tut-check li{display:flex;align-items:flex-start;gap:10px;font-size:15.5px;line-height:1.65;min-width:0}
.tut-check .ck{
  width:19px;height:19px;border-radius:50%;background:var(--accent);color:var(--text);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:3px;
}
.tut-check .ck svg{width:11px;height:11px}

/* ---------- next step block ---------- */
.tut-next{
  margin-top:56px;padding:26px;
  border:1px solid var(--border);border-radius:var(--r-md);
  background:linear-gradient(180deg,var(--bg-panel) 0%,var(--bg-panel2) 100%);
  box-shadow:var(--shadow-card),inset 0 1px 0 var(--paper-line);
}
.tut-next > h2{font-size:21px;font-weight:900;letter-spacing:-.02em}
.tut-next > p{margin-top:12px;font-size:14.5px;line-height:1.7;color:var(--text-muted);max-width:62ch}
.tut-next-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.tut-next-links .btn{flex-shrink:0;white-space:nowrap}

@media (max-width:768px){
  .tut-hero .wrap{padding-top:40px;padding-bottom:40px}
  .tut-hero h1{font-size:clamp(28px,7.6vw,40px)}
  .tut-hero .lead{font-size:17px}
  .tut-step{padding-top:34px;margin-top:34px}
  .tut-step > h2::before{width:26px;height:26px;margin-right:10px;font-size:12.5px}
  .tut-next{padding:20px}
}