/* ==========================================================================
   VPNCQ — streaming page layer
   Page head rhythm, support-table marks, error-code cards, numbered steps,
   link cards. Every colour / radius / shadow comes from :root tokens.
   ========================================================================== */

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

.page-head{
  display:grid;
  justify-items:start;
  gap:12px;
  max-width:78ch;
  padding-top:clamp(24px, 3.4vw, 44px);
  padding-bottom:clamp(18px, 2.6vw, 30px);
}

.page-head h1{margin:0;}

.page-head .lead{max-width:64ch;}

.page-head .hero-cta{margin-top:4px;}

.pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
  margin:0;
  padding:0;
  max-width:100%;
}

.pill-row > li{min-width:0;max-width:100%;}

.pill-row .fact-pill{overflow:hidden;text-overflow:ellipsis;}

/* ---- section rhythm (lighter than .sec, hairline separated) ---- */

.doc-sec{
  padding-top:clamp(28px, 4vw, 52px);
  padding-bottom:clamp(28px, 4vw, 52px);
  border-top:var(--hairline-soft);
}

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

.doc-sec .sec-head{margin-bottom:clamp(14px, 2vw, 22px);}

.doc-sec .prose{max-width:76ch;}

.doc-sec .prose h3{
  margin-top:var(--sp-5);
  font-size:17px;
  font-weight:800;
}

.doc-sec .prose h3:first-child{margin-top:0;}

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

.doc-sec .table-note{margin-top:10px;}

/* ---- tables ---- */

.table-scroll table.unlock-table{min-width:700px;}

.table-scroll table.line-table{min-width:620px;}

.cell-yes,
.cell-part{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-weight:700;
  white-space:nowrap;
}

.cell-yes{color:var(--success);}

.cell-part{color:var(--warn);}

.cell-yes svg,
.cell-part svg{width:12px;height:12px;flex:none;}

.table-notes{
  list-style:none;
  margin:12px 0 0;
  padding:0;
  display:grid;
  gap:6px;
  font-size:12.5px;
  line-height:1.72;
  color:var(--text-muted);
}

.table-notes li{
  position:relative;
  min-width:0;
  padding-left:14px;
}

.table-notes li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:color-mix(in srgb, var(--accent) 62%, transparent);
}

/* ---- error code cards ---- */

.errcode-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--sp-4);
  margin-top:var(--sp-3);
}

.errcode-card{
  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);
}

.errcode-top{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  min-width:0;
}

.errcode-code{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  min-height:24px;
  padding:0 9px;
  border-radius:var(--r-xs);
  background:color-mix(in srgb, var(--bg-panel-2) 66%, var(--bg-panel));
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.errcode-plat{
  font-size:12px;
  font-weight:700;
  color:var(--text-muted);
  white-space:nowrap;
}

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

.errcode-body{
  margin:6px 0 0;
  font-size:13.5px;
  line-height:1.72;
  color:var(--text-muted);
}

/* ---- numbered step list ---- */

.step-list{
  list-style:none;
  margin:var(--sp-4) 0 0;
  padding:0;
  display:grid;
  gap:10px;
  counter-reset:step;
}

.step-list li{
  position:relative;
  min-width:0;
  padding:12px 16px 12px 46px;
  background:color-mix(in srgb, var(--bg-panel-2) 42%, var(--bg-panel));
  border:var(--hairline-soft);
  border-radius:var(--r-sm);
  font-size:14px;
  line-height:1.72;
  color:var(--text-muted);
  counter-increment:step;
}

.step-list li::before{
  content:counter(step);
  position:absolute;
  left:14px;
  top:13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--accent);
  color:var(--bg-panel);
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:700;
  line-height:1;
}

.step-list strong{color:var(--text);font-weight:700;}

/* ---- next-step link cards ---- */

.next-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--sp-4);
}

.next-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  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);
  color:var(--text);
  text-decoration:none;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.next-card:hover{
  color:var(--text);
  transform:translateY(-2px);
  box-shadow:var(--inset-glow), var(--shadow-lift);
}

.next-card-h{
  font-size:16px;
  font-weight:800;
  line-height:1.4;
  letter-spacing:-.012em;
  color:var(--text);
}

.next-card-note{
  font-size:13px;
  line-height:1.68;
  color:var(--text-muted);
}

.next-card-more{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:auto;
  padding-top:4px;
  font-size:13px;
  font-weight:700;
  color:var(--accent-dark);
}

.next-card-more svg{width:14px;height:14px;flex:none;}

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

/* ---- responsive ---- */

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

@media (max-width:768px){
  .next-grid{grid-template-columns:minmax(0, 1fr);}
}

@media (max-width:640px){
  .page-head{padding-top:clamp(16px, 4vw, 26px);}
  .table-scroll table.unlock-table{min-width:600px;}
  .table-scroll table.line-table{min-width:540px;}
  .errcode-card{padding:16px;}
  .step-list li{padding:12px 14px 12px 42px;}
}