/* DeviceMesh 公开产品页。全部限定在 .dm-site，避免影响其它前台页面。 */
.dm-site{ --dm-line: color-mix(in srgb, var(--wc-primary) 34%, var(--wc-border)); }
.dm-site .btn{ min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.dm-site a:focus-visible,
.dm-site button:focus-visible,
.dm-site summary:focus-visible{ outline: 3px solid var(--wc-primary-2); outline-offset: 3px; }
.dm-site .dm-brand{ display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; color: #fff; font-weight: 700; }
.dm-site .dm-brand img{ width: 42px; height: 42px; }
.dm-site .dm-hero-copy{ max-width: 680px; }
.dm-site .dm-hero-note{ margin: 16px 0 0; color: var(--wc-dark-mute); font-size: 14px; }
.dm-site .dm-topology{ position: relative; min-height: 330px; }
.dm-site .dm-node{ position: absolute; z-index: 2; width: 128px; padding: 16px 12px; border: 1px solid rgba(148,163,184,.25); border-radius: 16px; background: rgba(15,23,42,.76); text-align: center; box-shadow: 0 16px 42px rgba(0,0,0,.18); }
.dm-site .dm-node i{ display: block; margin-bottom: 8px; color: #22d3ee; font-size: 30px; }
.dm-site .dm-node strong{ display: block; color: #fff; font-size: 14px; }
.dm-site .dm-node small{ color: var(--wc-dark-mute); }
.dm-site .dm-node-a{ left: 0; top: 28px; }
.dm-site .dm-node-b{ right: 0; top: 28px; }
.dm-site .dm-node-c{ left: 50%; bottom: 8px; transform: translateX(-50%); }
.dm-site .dm-p2p-line{ position: absolute; left: 108px; right: 108px; top: 88px; height: 2px; background: linear-gradient(90deg, #2563eb, #22d3ee); }
.dm-site .dm-p2p-line span{ position: absolute; left: 50%; top: -14px; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: #0f172a; color: #a5f3fc; font-size: 12px; }
.dm-site .dm-relay-line{ position: absolute; left: 50%; top: 112px; bottom: 80px; width: 2px; background: repeating-linear-gradient(to bottom, rgba(148,163,184,.55) 0 6px, transparent 6px 12px); }
.dm-site .dm-relay-label{ position: absolute; left: 50%; top: 158px; transform: translateX(-50%); padding: 6px 10px; border: 1px solid rgba(148,163,184,.22); border-radius: 999px; background: #111a2e; color: var(--wc-dark-mute); font-size: 12px; white-space: nowrap; }
.dm-site .dm-steps{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: dm-step; }
.dm-site .dm-step{ position: relative; padding: 24px; border: 1px solid var(--wc-border); border-radius: var(--wc-radius); background: var(--wc-surface); box-shadow: var(--wc-shadow); }
.dm-site .dm-step-num{ display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 18px; border-radius: 10px; background: var(--wc-primary-soft); color: var(--wc-primary); font-weight: 750; }
.dm-site .dm-step h3{ margin: 0 0 9px; font-size: 17px; }
.dm-site .dm-step p{ margin: 0; color: var(--wc-text-soft); font-size: 14px; line-height: 1.7; }
.dm-site .dm-free-layout{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr); gap: 40px; align-items: center; }
.dm-site .dm-free-card{ margin: 0; box-shadow: var(--wc-shadow-lg); border-color: var(--dm-line); }
.dm-site .dm-free-card .plan-price{ margin: 14px 0; }
.dm-site .dm-free-actions{ display: grid; gap: 10px; margin-top: 20px; }
.dm-site .dm-free-note{ margin: 18px 0 0; color: var(--wc-text-soft); font-size: 14px; line-height: 1.7; }
.dm-site .dm-product{ margin-bottom: 24px; padding: 24px; border: 1px solid var(--wc-border); border-radius: var(--wc-radius); background: var(--wc-surface); box-shadow: var(--wc-shadow); }
.dm-site .dm-product-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.dm-site .dm-product-head h3{ margin: 0 0 5px; font-size: 19px; }
.dm-site .dm-product-head p{ margin: 0; color: var(--wc-text-soft); font-size: 14px; }
.dm-site .dm-platforms{ display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.dm-site .dm-platform{ display: flex; flex-direction: column; min-width: 0; padding: 18px; border: 1px solid var(--wc-border); border-radius: var(--wc-radius-sm); background: var(--wc-bg-soft); }
.dm-site .dm-platform-title{ display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font-weight: 650; }
.dm-site .dm-platform-title i{ color: var(--wc-primary); font-size: 22px; }
.dm-site .dm-platform-meta{ margin-bottom: 14px; color: var(--wc-text-soft); font-size: 13px; line-height: 1.65; }
.dm-site .dm-platform .btn{ width: 100%; margin-top: auto; }
.dm-site .dm-hash{ margin: 0 0 14px; color: var(--wc-text-soft); font-size: 12px; }
.dm-site .dm-hash summary{ min-height: 32px; cursor: pointer; color: var(--wc-primary); }
.dm-site .dm-hash code{ display: block; margin-top: 7px; overflow-wrap: anywhere; color: var(--wc-text-soft); font-family: var(--wc-mono); }
.dm-site .dm-download-note{ margin: 20px 0 0; color: var(--wc-text-soft); font-size: 13px; line-height: 1.7; }
.dm-site .dm-faq{ max-width: 860px; }
.dm-site .dm-faq details{ border-bottom: 1px solid var(--wc-border); }
.dm-site .dm-faq summary{ display: flex; align-items: center; min-height: 52px; cursor: pointer; font-weight: 650; }
.dm-site .dm-faq details p{ margin: 0 0 20px; color: var(--wc-text-soft); line-height: 1.75; }
.dm-site .dm-final{ padding: 58px 0; background: var(--wc-dark); color: var(--wc-dark-text); }
.dm-site .dm-final-inner{ display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.dm-site .dm-final h2{ margin: 0 0 10px; color: #fff; font-size: clamp(23px, 3vw, 32px); }
.dm-site .dm-final p{ margin: 0; color: var(--wc-dark-mute); }
.dm-site .dm-final-actions{ display: flex; flex-wrap: wrap; gap: 10px; flex-shrink: 0; }
.dm-site .dm-empty{ padding: 24px; border: 1px dashed var(--wc-border); border-radius: var(--wc-radius); color: var(--wc-text-soft); }

@media (max-width: 991.98px){
    .dm-site .dm-steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dm-site .dm-free-layout{ grid-template-columns: 1fr; gap: 26px; }
    .dm-site .dm-final-inner{ align-items: flex-start; flex-direction: column; }
}
@media (max-width: 575.98px){
    .dm-site .dm-steps{ grid-template-columns: 1fr; }
    .dm-site .dm-product{ padding: 18px; }
    .dm-site .dm-product-head{ flex-direction: column; }
    .dm-site .dm-platforms{ grid-template-columns: 1fr; }
    .dm-site .dm-final-actions,
    .dm-site .dm-final-actions .btn{ width: 100%; }
}