/* 首页首屏沿用 base.css 的舞台与窗口卡。装置侧卡以装置容器为定位参照。 */
.zn-visual { position:relative; max-width:100%; overflow:visible }
.zn-visual .zn-zones { top:0 }
.zn-visual .zn-acct { top:110px }
.zn-flags svg { overflow:hidden; border-radius:var(--r-xs) }
.zn-copy-btn:hover { color:var(--c-accent-dark); border-color:var(--c-accent) }

.feature-shell .section-heading p { color:var(--c-on-ink-muted) }
.feature-list details { min-width:0 }
.feature-list summary { justify-content:space-between; color:var(--c-on-ink) }
.feature-list summary::after { content:"+"; color:var(--c-on-ink-muted); font-size:19px }
.feature-list details[open] summary::after { content:"−" }
.feature-list details p { margin-bottom:0; line-height:1.8 }
.home-feature-terms { display:flex; flex-wrap:wrap; gap:8px; padding:0 0 22px 24px; color:var(--c-on-ink-muted); font:500 11px/1.5 var(--font-mono) }
.home-feature-terms li { padding:5px 8px; border:1px solid var(--c-on-ink-line); border-radius:var(--r-xs) }
.feature-detail { z-index:0; position:sticky; top:28px; min-width:0 }
.feature-detail h3 { margin:18px 0 }
.feature-detail p { line-height:1.85 }
.feature-detail .eyebrow { color:var(--c-accent-dark) }

.home-route-layout { display:grid; grid-template-columns:minmax(240px,1fr) minmax(0,1.85fr); gap:26px; align-items:start }
.home-route-note { padding:28px; min-width:0 }
.home-route-note h3 { margin:16px 0 }
.home-route-note p { color:var(--c-muted); font-size:15px; line-height:1.85 }
.home-route-note p:last-child { margin-bottom:0 }
.home-route-data { min-width:0 }
.home-text-link { display:inline-flex; align-items:center; min-height:44px; margin-top:16px; color:var(--c-accent-dark); font-size:15px; font-weight:700; text-decoration:none }
.home-text-link:hover { text-decoration:underline; text-underline-offset:4px }
.home-status { margin-top:56px; padding:28px; border:1px solid var(--c-border); border-radius:var(--r-lg); background:var(--c-panel); box-shadow:var(--sh-soft) }
.home-status h3 { font-size:22px }
.home-status > p { margin:10px 0 18px; color:var(--c-muted); font-size:14px }
.home-status #server-status:empty { display:none }
.home-status #server-status { position:relative; max-width:100%; overflow:hidden; margin:0 }
.server-status { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
.srv-row { display:flex; align-items:center; gap:10px; min-width:0; padding:12px; border:1px solid var(--c-border); border-radius:var(--r-md); background:var(--c-bg); font-size:13px }
.srv-dot { width:8px; height:8px; flex:none; border-radius:var(--r-pill); background:var(--c-success); box-shadow:0 0 0 3px var(--a-accent-10); animation:srv-pulse 2.8s ease-in-out infinite }
.srv-flag { display:inline-flex; align-items:center; width:24px; height:18px; flex:none; overflow:hidden; border-radius:var(--r-xs) }
.srv-flag svg,.srv-flag img { width:100%; height:100%; object-fit:cover }
.srv-name { min-width:0; overflow-wrap:anywhere; font-weight:650 }
.srv-type { max-width:100%; overflow:hidden; padding:3px 6px; border:1px solid var(--c-border); border-radius:var(--r-xs); color:var(--c-muted); font:500 11px/1.4 var(--font-mono) }
.srv-ms,.srv-bw { margin-left:auto; color:var(--c-accent-dark); font:600 11px/1.5 var(--font-mono); white-space:nowrap }
.srv-bw { margin-left:0; color:var(--c-muted) }
@keyframes srv-pulse { 50% { opacity:.55 } }

.home-clients,.home-reading { background:var(--c-panel-2) }
.home-clients__hint { margin:24px 0 0; color:var(--c-muted); font-size:14px }
.home-clients__hint a { color:var(--c-accent-dark); font-weight:650 }
.home-plan-fit { min-height:126px; color:var(--c-muted); font-size:14px; line-height:1.8 }
.home-pack-note { display:flex; justify-content:space-between; align-items:center; gap:28px; margin-top:24px; padding:28px; border:1px solid var(--c-border); border-radius:var(--r-lg); background:var(--c-panel); box-shadow:var(--sh-soft) }
.home-pack-note > div { max-width:840px }
.home-pack-note h3 { margin:12px 0 }
.home-pack-note p { margin:0; color:var(--c-muted); font-size:15px }
.home-pack-note .home-text-link { flex:none; margin:0 }
.home-method { background:var(--c-ink); color:var(--c-on-ink) }
.home-method h2,.home-method h3 { color:var(--c-on-ink) }
.home-method .section-heading p { color:var(--c-on-ink-muted) }
.home-method-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px }
.home-method-grid > div { min-width:0; padding:24px 0; border-top:1px solid var(--c-on-ink-line) }
.home-method-grid .zn-mono { color:var(--c-accent-2); font-size:12px; letter-spacing:.12em }
.home-method-grid h3 { margin:20px 0 12px }
.home-method-grid p { color:var(--c-on-ink-muted); font-size:15px; line-height:1.85 }
.home-reading .article-grid { grid-template-columns:repeat(4,minmax(0,1fr)) }
.home-reading .article-card h3 { font-size:18px }
@media (max-width:1100px) {
  .home-reading .article-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:900px) {
  .zn-visual .zn-zones,.zn-visual .zn-acct { display:none }
  .home-route-layout { grid-template-columns:1fr }
  .home-route-note { max-width:none }
}
@media (max-width:640px) {
  .zn-visual { max-width:100%; overflow-x:clip }
  .feature-list details p { padding-right:8px }
  .feature-list summary { font-size:12px }
  .server-status { grid-template-columns:1fr }
  .srv-row { flex-wrap:wrap }
  .home-status { padding:18px }
  .home-plan-fit { min-height:0 }
  .home-pack-note { flex-direction:column; align-items:flex-start }
  .home-method-grid,.home-reading .article-grid { grid-template-columns:1fr }
  .home-method-grid > div { padding-bottom:8px }
}
@media (prefers-reduced-motion:reduce) {
  .srv-dot { animation:none }
}