/* ============================================================
   Clash官网 · clashlatest.com
   home.css —— 首页专属样式
   平台图标 / 平台适用说明列表 / 快速上手 / 信任背书 / 问答精选 / 更多链接
   ============================================================ */

/* ---------- 平台入口:图标与名称组 ---------- */
.os-id{
  display:flex;align-items:center;gap:11px;
  position:relative;z-index:3;min-width:0;
}
.os-ico{
  width:34px;height:34px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--c-panel2);
  border-radius:var(--radius-tile);
  box-shadow:var(--shadow-tile);
}
.os-ico svg{width:18px;height:18px;display:block;}
.os-ico .oi{
  fill:none;stroke:var(--c-muted);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
}
.os-cell:hover .os-ico .oi{stroke:var(--c-accent);}

/* ---------- 平台适用说明(航线备注) ---------- */
.lane-list{
  list-style:none;padding:0;
  margin-top:28px;
  border-top:1px solid var(--c-border);
}
.lane-list li{
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:18px;align-items:baseline;
  padding-top:13px;padding-bottom:13px;
  border-bottom:1px solid var(--c-border);
}
.lane-list li > *{min-width:0;}
.lane-os{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
  color:var(--c-text);
}
.lane-note{
  font-size:13px;line-height:1.85;color:var(--c-muted);
}
@media (max-width:560px){
  .lane-list li{grid-template-columns:minmax(0,1fr);gap:6px;}
}

/* ---------- "更多"行链接 ---------- */
.more-row{margin-top:28px;}
.more-link{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;
  color:var(--c-accent);
  border-bottom:1px solid var(--c-accent-dark);
  padding-bottom:2px;
  transition:color .15s ease,border-color .15s ease;
}
.more-link:hover{color:var(--c-text);border-bottom-color:var(--c-text);}

/* ---------- 快速上手三步 ---------- */
.qs-steps{margin-top:34px;max-width:820px;}
.qs-steps > li > p{
  color:var(--c-muted);font-size:14px;line-height:1.9;margin-top:8px;
}

/* ---------- 信任背书区 ---------- */
.trust-grid{
  margin-top:34px;
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);
  gap:40px;align-items:start;
}
.trust-grid > *{min-width:0;}
.trust-copy p{
  font-size:14px;line-height:1.95;color:var(--c-muted);
  margin-bottom:1.1em;
}
.trust-copy p:last-child{margin-bottom:0;}
.trust-copy strong{color:var(--c-text);font-weight:600;}
.trust-copy a{
  color:var(--c-accent);
  border-bottom:1px solid var(--c-accent-dark);
}
.trust-copy a:hover{color:var(--c-text);border-bottom-color:var(--c-text);}

.trust-side{
  background:var(--c-bg);
  border:1px solid var(--c-border);
  border-radius:var(--radius-panel);
  box-shadow:var(--shadow-tile);
  padding:20px;
}
.trust-side-h{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
  color:var(--c-muted);margin-bottom:12px;
}
.trust-facts{
  list-style:none;padding:0;margin-top:18px;
}
.trust-facts li{
  display:flex;align-items:baseline;gap:14px;
  padding-top:10px;padding-bottom:10px;
  border-bottom:1px solid var(--c-border);
  min-width:0;
}
.trust-facts li:last-child{border-bottom:0;padding-bottom:0;}
.fact-k{
  flex-shrink:0;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  color:var(--c-accent);
}
.fact-v{font-size:13px;line-height:1.7;color:var(--c-muted);min-width:0;}

@media (max-width:920px){
  .trust-grid{grid-template-columns:minmax(0,1fr);gap:28px;}
}

/* ---------- 常见问题精选 ---------- */
.qa-list{
  list-style:none;padding:0;
  margin-top:30px;
  border-top:1px solid var(--c-border);
  max-width:860px;
}
.qa-row{
  padding-top:18px;padding-bottom:18px;
  border-bottom:1px solid var(--c-border);
}
.qa-q{
  display:flex;align-items:baseline;gap:10px;
  font-size:15px;font-weight:600;color:var(--c-text);line-height:1.6;
}
.qa-q::before{
  content:"Q";
  font-family:var(--font-mono);font-size:12px;
  color:var(--c-accent);flex-shrink:0;
}
.qa-a{
  margin-top:8px;
  font-size:13px;line-height:1.9;color:var(--c-muted);
  padding-left:22px;
}
.qa-a a{
  color:var(--c-accent);
  border-bottom:1px solid var(--c-accent-dark);
}
.qa-a a:hover{color:var(--c-text);border-bottom-color:var(--c-text);}