/* ============================================================================
   VPNJM · help (FAQ) page
   Page-scoped rhythm for the four FAQ chapters and the ticket note.
   Everything else comes from base.css / components.css
   (.toc-tabs / .faq-list / .callout / .chip / .promo-block).
   ========================================================================== */

.help-facts{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:18px;
  min-width:0;
}

.help-body{
  position:relative;
  z-index:2;
  display:block;
  min-width:0;
  padding-top:22px;
}

.help-sec{
  padding-top:44px;
  min-width:0;
}
.help-sec:first-of-type{padding-top:34px}

.help-sec-head{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:74ch;
  margin-bottom:16px;
  min-width:0;
}
.help-sec-k{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--text-muted);
}
.help-sec-head h2{
  font-size:clamp(24px,2.6vw,32px);
  line-height:1.16;
}
.help-sec-intro{
  font-size:14px;
  line-height:1.72;
  color:var(--text-muted);
}

.help-sec .callout{margin-bottom:14px}

.help-foot{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:46px;
  min-width:0;
}
.help-foot .callout{margin:0}
.help-foot-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:8px;
  font-size:13px;
  line-height:1.6;
}
.help-foot-list li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  min-width:0;
}
.help-foot-list li::before{
  content:"";
  width:5px;
  height:5px;
  margin-top:8px;
  border-radius:50%;
  background:rgb(var(--accent-rgb)/.55);
  flex:none;
}

@media (max-width:900px){
  .help-body{padding-top:18px}
}

@media (max-width:640px){
  .help-facts{margin-top:14px}
  .help-sec{padding-top:34px}
  .help-sec:first-of-type{padding-top:26px}
  .help-sec-head h2{font-size:clamp(21px,5.6vw,26px)}
  .help-sec-intro{font-size:13.5px}
  .help-foot{margin-top:34px}
}