/* =========================================================================
   VPNLW — help.css
   Page-scoped layout for the help centre: hero fact chips, apricot corner
   wash, two-column category blocks (rail + FAQ list), support hand-off.
   All values come from base.css tokens.
   ========================================================================= */

/* ------------------------------------------------------------- hero block */
.help-hero{
  position:relative;
  padding-top:44px;
  padding-bottom:6px;
  overflow-x:clip;
}

.help-decor{
  position:absolute;
  top:-70px;
  right:-6%;
  width:min(520px,78vw);
  height:300px;
  background:radial-gradient(50% 50% at 50% 50%,var(--apricot-55) 0%,transparent 72%);
  z-index:0;
}

.help-hero .wrap{position:relative;z-index:1}
.help-hero h1{margin:0}
.help-hero .lede{max-width:66ch}

.help-cta{
  justify-content:flex-start;
  margin-top:22px;
}

.help-facts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
  min-width:0;
}
.help-facts li{
  display:inline-flex;
  align-items:center;
  gap:4px;
  max-width:100%;
  min-height:30px;
  padding:4px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--bg-panel);
  box-shadow:0 1px 0 var(--w-90) inset;
  font-size:12px;
  color:var(--text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.help-facts li b{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--accent);
}

/* -------------------------------------------------------- category blocks */
.help-body{margin-top:6px}

.help-sec{
  display:grid;
  grid-template-columns:minmax(0,258px) minmax(0,1fr);
  gap:18px 34px;
  align-items:start;
  padding-top:34px;
  margin-top:34px;
  border-top:1px solid var(--line);
}
.help-sec:first-of-type{
  padding-top:0;
  margin-top:0;
  border-top:0;
}

.help-rail{min-width:0}
.help-rail h2{
  margin:0;
  font-size:clamp(1.3rem,2.3vw,1.7rem);
  line-height:1.25;
}
.help-rail-note{
  margin-top:10px;
  font-size:13px;
  line-height:1.72;
  color:var(--text-muted);
}
.help-count{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--accent);
}
.help-count::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent-30);
  flex:none;
}

.help-list{min-width:0}
.help-list .faq-item summary{
  font-size:14px;
  line-height:1.5;
}
.help-list .faq-a{
  font-size:13.5px;
  line-height:1.78;
}
.help-list .faq-a a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:2px;
}
.help-list .faq-a code{
  font-size:.9em;
  padding:1px 5px;
  border-radius:4px;
  background:var(--accent-06);
  border:1px solid var(--accent-08);
  color:var(--accent);
}

/* ------------------------------------------------------- support hand-off */
.help-ask{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px 28px;
  background:linear-gradient(135deg,var(--bg-panel) 0%,var(--apricot-30) 100%);
}
.help-ask-copy{
  min-width:0;
  max-width:62ch;
}
.help-ask-copy h2{
  margin:0;
  font-size:clamp(1.25rem,2.2vw,1.6rem);
}
.help-ask-copy p{
  margin-top:10px;
  font-size:13.5px;
  line-height:1.75;
  color:var(--text-muted);
}
.help-ask-copy p a{
  color:var(--accent);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px;
}
.help-ask-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* ---------------------------------------------------------- breakpoints */
@media (max-width:900px){
  .help-sec{
    grid-template-columns:minmax(0,1fr);
    gap:12px;
    padding-top:26px;
    margin-top:26px;
  }
  .help-rail-note{max-width:64ch}
  .help-decor{display:none}
  .help-ask{align-items:flex-start}
}

@media (max-width:640px){
  .help-hero{padding-top:30px}
  .help-facts li{font-size:11.5px;padding:4px 10px}
  .help-facts li b{font-size:11.5px}
  .help-list .faq-item summary{font-size:13.5px}
  .help-list .faq-a{font-size:13px}
}