/* ==========================================================================
   VPNDX — help.css
   Help-center page only: hero band, category heads, support block.
   All colours / radii / shadows come from the :root tokens in base.css.
   ========================================================================== */

.help-hero{
  position:relative;
  overflow-x:clip;
  max-width:100%;
  padding-top:56px;
  padding-bottom:16px;
}
.help-hero__inner{position:relative;z-index:1;max-width:60em}
.help-hero .lede{margin-bottom:24px}
.help-deco{
  position:absolute;
  top:-40px;
  right:-6%;
  width:min(520px, 62%);
  height:300px;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 58% 42%,
    color-mix(in srgb, var(--blue) 15%, transparent) 0%,
    transparent 72%);
}

/* ------------------------------------------------------------- doc body */
.help-doc{padding-top:12px;padding-bottom:8px}

.help-cat{padding-top:56px;padding-bottom:8px}
.help-cat__head{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:16px;
  align-items:start;
  margin-bottom:14px;
}
.help-cat__ico{
  width:44px;
  height:44px;
  border-radius:var(--r-sm);
  background:var(--candy-blue);
  color:var(--accent-dark);
  display:flex;
  align-items:center;
  justify-content:center;
}
.help-cat__ico svg{width:20px;height:20px}
.help-cat__head h2{margin:0 0 8px}
.help-cat__note{
  margin:0;
  font-size:15px;
  line-height:1.7;
  color:var(--muted);
  max-width:56em;
}

/* --------------------------------------------------------- support block */
.help-ask{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:16px;
  align-items:start;
  padding-top:64px;
  padding-bottom:8px;
}
.help-ask > *{min-width:0}
.help-ask h2{font-size:clamp(22px, 2vw, 28px);margin:0 0 12px}
.help-ask .card p:last-of-type{margin-bottom:20px}
.help-ask .btn-row{margin-top:4px}
.help-facts{display:grid;gap:10px;margin:14px 0 0}
.help-facts li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:14px;
  line-height:1.55;
  color:var(--text);
}
.help-facts li::before{
  content:"";
  width:6px;
  height:6px;
  flex:none;
  margin-top:7px;
  border-radius:50%;
  background:var(--accent);
}

/* ---------------------------------------------------------- responsive */
@media (max-width:960px){
  .help-ask{grid-template-columns:1fr}
  .help-cat{padding-top:44px}
}
@media (max-width:768px){
  .help-hero{padding-top:36px}
  .help-deco{display:none}
  .help-cat__head{grid-template-columns:36px minmax(0,1fr);gap:12px}
  .help-cat__ico{width:36px;height:36px}
  .help-cat__ico svg{width:18px;height:18px}
  .help-ask{padding-top:48px}
}