/* ==========================================================================
   VPNPX . contact.css
   page: service.html (联系与支持)
   只做本页的版式黏合;颜色 / 圆角 / 阴影一律取自 base.css 的 :root 令牌
   ========================================================================== */

/* ---------------------------------------------------------------- page head */
.contact-head{
  padding-top:44px;
  padding-bottom:52px;
}

.contact-head-grid{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,0.88fr);
  gap:44px;
  align-items:center;
}

.contact-head-copy{min-width:0;}
.contact-head-aside{min-width:0;}
.contact-title{margin:0 0 16px;}

/* 页首右侧:渠道入口一览窗口 */
.contact-channel-list{
  list-style:none;
  margin:0;
  padding:6px 14px 12px;
  display:flex;
  flex-direction:column;
}
.contact-channel-list li{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  margin:0;
  padding:11px 4px;
  border-bottom:1px dashed var(--border-soft);
}
.contact-channel-list li:last-child{
  border-bottom:0;
  padding-bottom:4px;
}
.contact-channel-main{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.contact-channel-name{
  font-size:13px;
  font-weight:700;
  color:var(--text);
}
.contact-channel-note{
  font-size:11.5px;
  line-height:1.5;
  color:var(--text-muted);
}

/* --------------------------------------------------------------- card grid */
.contact-grid{
  display:grid;
  gap:18px;
  min-width:0;
}
.contact-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}

.contact-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
  padding:24px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border-soft);
  background:var(--surface);
  box-shadow:0 20px 44px -34px var(--accent-a35);
}
.contact-card h3{margin:0;}
.contact-card p{
  margin:0;
  font-size:14.5px;
  line-height:1.78;
  color:var(--text-muted);
}
.contact-card .btn{
  margin-top:auto;
  width:100%;
  flex-shrink:0;
  white-space:nowrap;
}

/* ------------------------------------------------------------ 步骤 / 列表 */
.contact-steps{
  list-style:none;
  counter-reset:cstep;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.contact-steps li{
  counter-increment:cstep;
  position:relative;
  margin:0;
  padding-left:34px;
  font-size:14.5px;
  line-height:1.75;
  color:var(--text-muted);
}
.contact-steps li::before{
  content:counter(cstep);
  position:absolute;
  left:0;
  top:2px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:7px;
  background:var(--accent-a10);
  color:var(--accent-dark);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
}

.contact-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.contact-list li{
  position:relative;
  margin:0;
  padding-left:20px;
  font-size:14px;
  line-height:1.72;
  color:var(--text-muted);
}
.contact-list li::before{
  content:"";
  position:absolute;
  left:3px;
  top:9px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
}
.contact-list--warn li::before{background:var(--pink);}

/* ------------------------------------------------------------- 收尾小条 */
.contact-after-table{margin:18px 0 0;}

.contact-close{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 20px;
  margin-top:20px;
  padding:20px 22px;
  border-radius:var(--radius-md);
  border:1px solid var(--border-soft);
  background:var(--bg-panel);
}
.contact-close p{
  margin:0;
  flex:1 1 260px;
  min-width:0;
  font-size:14.5px;
  line-height:1.72;
  color:var(--text-muted);
}
.contact-close .btn{
  flex-shrink:0;
  white-space:nowrap;
}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1024px){
  .contact-head-grid{grid-template-columns:minmax(0,1fr);gap:30px;}
  .contact-head{padding-top:32px;padding-bottom:40px;}
}
@media (max-width:768px){
  .contact-grid--2{grid-template-columns:minmax(0,1fr);}
  .contact-card{padding:20px;}
  .contact-close{padding:18px;}
  .contact-close .btn{width:100%;}
}