/* ==========================================================================
   VPNCQ — tutorial layer (quickstart)
   Page-specific structures only. Every colour / radius / shadow value comes
   from the :root tokens in base.css; nothing here redefines shared components.
   ========================================================================== */

/* ==========================================================================
   1. Page header — copy left, prep card right
   ========================================================================== */

.qs-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr);
  gap:clamp(20px, 3vw, 44px);
  align-items:start;
  padding-top:clamp(20px, 3vw, 40px);
  padding-bottom:clamp(24px, 4vw, 52px);
  overflow-x:clip;
}

.qs-glow{
  position:absolute;
  left:0;
  right:0;
  top:-40px;
  height:min(420px, 62vw);
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(520px 230px at 92% 0%, color-mix(in srgb, var(--mint) 20%, transparent), transparent 70%),
    radial-gradient(420px 200px at 4% -8%, color-mix(in srgb, var(--bg-panel) 92%, transparent), transparent 76%);
}

.qs-hero-copy{
  position:relative;
  z-index:2;
  min-width:0;
}

.qs-title{margin:12px 0 0;}

.qs-title .line{display:block;}

.qs-lead{
  margin:18px 0 0;
  max-width:34em;
  font-size:15.5px;
  line-height:1.76;
  color:var(--text-muted);
}

.qs-lead strong{
  font-weight:700;
  color:var(--text);
  background:linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--mint) 50%, transparent) 62%);
  padding:0 2px;
}

.qs-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:24px;
}

.qs-facts{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* ---- prep card ---- */

.qs-prep{
  position:relative;
  z-index:2;
  min-width:0;
  padding:22px;
  background:var(--bg-panel);
  border:var(--hairline);
  border-radius:var(--r-lg);
  box-shadow:var(--inset-glow), var(--shadow-soft);
  overflow:hidden;
}

.qs-prep::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:var(--grad-mint);
}

.qs-prep-h{
  margin:0 0 14px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--text-muted);
}

.qs-prep-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px;
}

.qs-prep-item{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  gap:10px;
  align-items:start;
  min-width:0;
}

.qs-prep-ic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--mint) 24%, var(--bg-panel));
  color:var(--accent-dark);
  flex:none;
}

.qs-prep-ic svg{width:15px;height:15px;}

.qs-prep-name{
  margin:0;
  font-size:13.5px;
  font-weight:700;
  line-height:1.4;
  color:var(--text);
}

.qs-prep-note{
  margin:3px 0 0;
  font-size:12.5px;
  line-height:1.62;
  color:var(--text-muted);
}

.qs-prep-foot{
  margin:16px 0 0;
  padding-top:14px;
  border-top:var(--hairline-soft);
  font-size:12.5px;
  line-height:1.62;
  color:var(--text-muted);
}

/* ==========================================================================
   2. Article column and step blocks
   ========================================================================== */

.qs-article{max-width:1040px;}

.qs-article .toc-tabs{margin-bottom:clamp(18px, 3vw, 28px);}

.qs-step{padding-top:clamp(28px, 4vw, 48px);}

.qs-step:first-of-type{padding-top:clamp(20px, 3vw, 32px);}

.qs-step-head{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  gap:14px;
  align-items:start;
}

.qs-step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  flex:none;
  border-radius:var(--r-md);
  background:color-mix(in srgb, var(--mint) 74%, var(--bg-panel));
  color:var(--espresso);
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:700;
  letter-spacing:-.02em;
  box-shadow:var(--inset-glow);
}

.qs-step-main{
  min-width:0;
  display:grid;
  gap:6px;
}

.qs-step-title{margin:0;}

.qs-step-note{
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:var(--text-muted);
}

.qs-prose{
  max-width:72ch;
  margin-top:14px;
}

.qs-step .qs-cta{margin-top:18px;}

/* ==========================================================================
   3. Plan rows (facts only, mono figures)
   ========================================================================== */

.qs-planline{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  display:grid;
  gap:8px;
  max-width:520px;
}

.qs-planline li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:46px;
  padding:0 14px;
  background:var(--bg-panel);
  border:var(--hairline-soft);
  border-radius:var(--r-sm);
  box-shadow:var(--inset-glow);
}

.qs-planline-name{
  font-size:13.5px;
  font-weight:600;
  color:var(--text);
  min-width:0;
}

.qs-planline-price{
  font-family:var(--font-mono);
  font-size:16px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--text);
  white-space:nowrap;
  flex:none;
}

.qs-planline-price span{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:0;
  color:var(--text-muted);
}

/* ==========================================================================
   4. Platform label + per-platform client cards
   ========================================================================== */

.qs-label{
  margin:24px 0 0;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--text-muted);
}

.qs-client-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  margin-top:12px;
}

.qs-client{
  min-width:0;
  padding:18px;
  background:var(--bg-panel);
  border:var(--hairline);
  border-radius:var(--r-md);
  box-shadow:var(--inset-glow), var(--shadow-soft);
}

.qs-client-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.qs-client-ic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--mint) 22%, var(--bg-panel));
  color:var(--accent-dark);
  flex:none;
}

.qs-client-ic svg{width:16px;height:16px;}

.qs-client-name{
  margin:0;
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.3;
  color:var(--text);
}

.qs-client p{
  margin:0;
  font-size:13.5px;
  line-height:1.7;
  color:var(--text-muted);
}

.qs-client p + p{margin-top:8px;}

.qs-client strong{
  font-weight:700;
  color:var(--text);
}

/* ==========================================================================
   5. Verification checklist
   ========================================================================== */

.qs-check{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  display:grid;
  gap:8px;
  max-width:72ch;
}

.qs-check li{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  gap:9px;
  align-items:start;
  font-size:14px;
  line-height:1.65;
  color:var(--text);
}

.qs-check svg{
  width:15px;
  height:15px;
  margin-top:3px;
  color:var(--accent);
  flex:none;
}

/* ==========================================================================
   6. Next-step link list
   ========================================================================== */

.qs-next{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  display:grid;
  gap:10px;
}

.qs-next a{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:12px;
  align-items:center;
  padding:14px 16px;
  background:var(--bg-panel);
  border:var(--hairline);
  border-radius:var(--r-md);
  box-shadow:var(--inset-glow);
  color:var(--text);
  text-decoration:none;
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.qs-next a:hover{
  color:var(--text);
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--accent) 40%, var(--border));
}

.qs-next-body{min-width:0;}

.qs-next-t{
  display:block;
  font-size:14.5px;
  font-weight:700;
  line-height:1.4;
}

.qs-next-d{
  display:block;
  margin-top:3px;
  font-size:12.5px;
  line-height:1.6;
  color:var(--text-muted);
}

.qs-next-arrow{
  width:16px;
  height:16px;
  color:var(--accent);
  flex:none;
}

/* ==========================================================================
   7. Responsive
   ========================================================================== */

@media (max-width:900px){
  .qs-hero{grid-template-columns:minmax(0, 1fr);}
  .qs-client-grid{grid-template-columns:minmax(0, 1fr);}
}

@media (max-width:640px){
  .qs-step-head{gap:10px;}
  .qs-step-num{
    width:34px;
    height:34px;
    font-size:13px;
    border-radius:var(--r-sm);
  }
  .qs-prep{padding:18px;}
  .qs-cta .btn{flex:1 1 100%;}
  .qs-planline li{padding:0 12px;}
}