/* ==========================================================================
   VPNCQ — deep guide page (reference.html)
   Page-specific layout only. Tokens, buttons, tables, callouts, FAQ and the
   promo block all come from base.css / components.css.
   ========================================================================== */

/* ---- page head ---------------------------------------------------------- */

.doc-hero{
  padding-top:clamp(26px, 3.6vw, 52px);
  padding-bottom:clamp(14px, 2.2vw, 26px);
}

.doc-hero h1{margin-top:var(--sp-3);}

.doc-hero .lead{
  margin-top:var(--sp-4);
  max-width:66ch;
}

.doc-meta{
  margin-top:var(--sp-3);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.01em;
  color:var(--text-muted);
}

.doc-facts{
  list-style:none;
  margin:var(--sp-4) 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* ---- article shell: hosts the sticky toc and every section ------------- */

.doc{
  max-width:var(--wrap-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
  padding-bottom:clamp(28px, 4vw, 52px);
}

.doc > .toc-tabs{margin-bottom:var(--sp-6);}

.doc-body{
  max-width:78ch;
  min-width:0;
  font-size:15.5px;
  line-height:1.78;
  color:var(--text);
}

.doc-sec{
  padding-top:clamp(30px, 4.2vw, 56px);
  border-top:var(--hairline-soft);
}

.doc-sec:first-of-type{
  padding-top:0;
  border-top:0;
}

.doc-sec > h2{margin:0 0 var(--sp-4);}

.doc-sec h3{margin:var(--sp-5) 0 var(--sp-3);}

.doc-sec p{margin:0;}

.doc-sec p + p{margin-top:var(--sp-4);}

.doc-sec ul,
.doc-sec ol{
  margin:var(--sp-4) 0 0;
  padding-left:1.3em;
}

.doc-sec li + li{margin-top:6px;}

.doc-sec a{text-decoration:underline;text-underline-offset:3px;}

.doc-sec .table-scroll{margin-top:var(--sp-4);}

.doc-sec .callout{margin-top:var(--sp-5);}

.doc-sec .faq-list{margin-top:var(--sp-4);}

/* ---- inline code block -------------------------------------------------- */

.doc-code{
  margin:var(--sp-4) 0 0;
  max-width:100%;
  overflow-x:auto;
  padding:14px 16px;
  border:var(--hairline-soft);
  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--bg-panel-2) 52%, var(--bg-panel));
  font-family:var(--font-mono);
  font-size:12.5px;
  line-height:1.72;
  color:var(--text);
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}

.doc-code code{
  font-family:inherit;
  white-space:pre;
  overflow-wrap:normal;
}

/* ---- hairline rows (title + one line of explanation) -------------------- */

.doc-rows{
  list-style:none;
  margin:var(--sp-4) 0 0;
  padding:0;
  display:grid;
  gap:0;
}

.doc-row{
  padding:14px 0;
  border-top:var(--hairline-soft);
}

.doc-row:first-child{
  border-top:0;
  padding-top:0;
}

.doc-row-h{
  margin:0;
  font-size:15.5px;
  font-weight:800;
  line-height:1.45;
  letter-spacing:-.01em;
  color:var(--text);
}

.doc-row-p{
  margin:4px 0 0;
  font-size:14px;
  line-height:1.7;
  color:var(--text-muted);
}

/* ---- check list --------------------------------------------------------- */

.doc-check{
  list-style:none;
  margin:var(--sp-4) 0 0;
  padding:0;
  display:grid;
  gap:9px;
}

.doc-check li{
  position:relative;
  padding-left:26px;
  font-size:14.5px;
  line-height:1.7;
}

.doc-check li::before{
  content:"";
  position:absolute;
  left:0;
  top:.42em;
  width:14px;
  height:14px;
  border-radius:var(--r-xs);
  border:1px solid color-mix(in srgb, var(--accent) 54%, var(--border));
  background:color-mix(in srgb, var(--mint) 24%, var(--bg-panel));
}

/* ---- closing ------------------------------------------------------------ */

.doc-foot{margin-top:clamp(32px, 4.5vw, 56px);}

@media (max-width:640px){
  .doc-body{font-size:15px;}
  .doc-sec > h2{margin-bottom:var(--sp-3);}
}