/* ==========================================================================
   VPNFL — contact.css
   客服页专属:渠道卡网格 / 自查卡 / 勾选清单 / 横向缓滚带
   只补充页面级布局,颜色与圆角一律引用设计令牌
   ========================================================================== */

/* 渠道卡与自查卡共用网格 */
.support-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:20px;
  align-items:stretch;
}

.support-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}
.support-card h3{font-size:18px}
.support-card p{font-size:14.5px;color:var(--muted)}
.support-card .card-cta{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.support-card .card-cta .note{
  font-size:12.5px;
  color:var(--muted);
}
.support-card .support-note{margin-top:2px}

/* 渠道适用场景短清单 */
.channel-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:14px;
  color:var(--muted);
}
.channel-list li{position:relative;padding-left:18px}
.channel-list li::before{
  content:"";
  position:absolute;
  left:3px;
  top:.66em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent);
  opacity:.55;
}

/* 勾选式信息清单 */
.check-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.check-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14.5px;
  color:var(--muted);
}
.check-list svg{
  width:16px;
  height:16px;
  color:var(--accent);
  flex:none;
  margin-top:4px;
}
.check-list b{color:var(--text);font-weight:600}

/* 两栏对照(请附上 / 请不要附上) */
.split-2{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:22px;
  align-items:start;
}

/* 响应节奏提示 */
.support-callout{margin-top:24px}

/* 横向缓滚带(装饰,内容与正文静态信息等价) */
.ticker{
  overflow:hidden;
  max-width:100%;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--bg-panel);
}
.ticker-track{
  display:flex;
  width:max-content;
  will-change:transform;
}
.ticker-unit{
  display:flex;
  align-items:center;
  gap:34px;
  padding:14px 17px;
  white-space:nowrap;
  font-size:13.5px;
  color:var(--muted);
}
.ticker-unit span{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

@media (prefers-reduced-motion:reduce){
  .ticker-track{transform:none}
}

@media (max-width:640px){
  .support-card{gap:12px}
  .split-2{gap:18px}
  .ticker-unit{gap:24px;font-size:13px}
}