/* ==========================================================================
   VPNCW · components.css
   首屏装置 / 卖点拼盘 / 套餐卡 / 线路表 / 平台卡 / 文章卡 / tab / toc /
   FAQ / callout / 文末推广块 / 悬浮 CTA / 预览页示例排版
   颜色一律引用 base.css 的 :root 令牌。
   ========================================================================== */

/* ---------- 1. 首屏骨架 ---------- */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  overflow-x:clip;
  max-width:100%;
  padding-top:48px;
  padding-bottom:56px;
  min-height:calc(100vh - 152px);
  min-height:calc(100svh - 152px);
  background:linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 52%, var(--bg-bottom) 100%);
}
.hero-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.hero-bg::before{
  content:"";
  position:absolute;
  inset:-12% -6% auto -6%;
  height:124%;
  background:
    radial-gradient(46% 42% at 76% 20%, var(--accent-a22), transparent 72%),
    radial-gradient(38% 34% at 8% 4%, rgba(201,169,107,.20), transparent 74%);
}
.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(72% 64% at 72% 30%, #000 0%, transparent 76%);
  mask-image:radial-gradient(72% 64% at 72% 30%, #000 0%, transparent 76%);
  opacity:.5;
}
.hero-inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.88fr);
  gap:52px;
  align-items:center;
}

/* ---------- 2. 文案列 ---------- */
.hero-copy{
  position:relative;
  z-index:2;
  min-width:0;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:28px;
  padding-inline:13px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:rgba(255,252,245,.72);
  font-size:11.5px;
  letter-spacing:.02em;
  color:var(--text-muted);
  white-space:nowrap;
  max-width:100%;
}
.eyebrow-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent-soft);
  box-shadow:0 0 0 3px var(--accent-a14);
  flex:0 0 auto;
}

.hero-title{
  margin-top:22px;
  margin-bottom:0;
  font-family:var(--font-display);
  font-size:64px;
  font-weight:500;
  line-height:1.06;
  letter-spacing:-.03em;
  color:var(--text);
}
.title-brand{ display:block; }
.title-line{ display:block; }
.accent-underline{
  position:relative;
  display:inline-block;
}
.accent-underline::after{
  content:"";
  position:absolute;
  left:.02em;
  right:.02em;
  bottom:.02em;
  height:.085em;
  border-radius:2px;
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent-soft) 100%);
  opacity:.9;
}

.hero-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:24px;
}

.hero-lede{
  margin-top:22px;
  max-width:30em;
  font-size:16px;
  line-height:1.62;
  color:var(--text-muted);
}
.hero-lede strong{
  font-weight:500;
  color:var(--text);
}

.trust-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 16px;
  margin-top:20px;
  font-size:12.5px;
  color:var(--text-muted);
}
.trust-row li{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.trust-row li::before{
  content:"";
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--accent-soft);
  opacity:.75;
  flex:0 0 auto;
}

/* 单色标识墙：平台行 + 热门线路行 */
.walls{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.wall{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  min-height:22px;
}
.wall-label{
  flex:0 0 auto;
  min-width:52px;
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.14em;
  color:var(--text-muted);
  opacity:.78;
  white-space:nowrap;
}
.wall-list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 18px;
  min-width:0;
}
.wall-list li{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--text);
  white-space:nowrap;
}
.pi{
  width:16px;
  height:16px;
  color:var(--text);
  flex:0 0 auto;
}
.pi svg{ width:100%; height:100%; }
.flag{
  width:18px;
  height:18px;
  flex:0 0 auto;
  display:block;
}
.flag svg{ width:100%; height:100%; }

.fl-white{ fill:var(--flag-white); }
.fl-red{ fill:var(--flag-red); }
.fl-blue{ fill:var(--flag-blue); }
.fl-ring{ fill:none; stroke:var(--border); stroke-width:1; }

/* ---------- 3. 首屏装置：连续波线路台 ---------- */
.hero-visual{
  position:relative;
  z-index:1;
  min-width:0;
}
.stage{
  position:relative;
  padding-top:44px;
  padding-bottom:36px;
}
.stage-grid{
  position:absolute;
  inset:6px -34px 2px -30px;
  pointer-events:none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:50px 50px;
  -webkit-mask-image:radial-gradient(80% 76% at 58% 48%, #000 32%, transparent 82%);
  mask-image:radial-gradient(80% 76% at 58% 48%, #000 32%, transparent 82%);
  opacity:.85;
}
.grid-cell{
  position:absolute;
  border:1px solid var(--border);
  background:rgba(255,252,245,.44);
  border-radius:2px;
}
.cell-a{ top:6%; left:2%; width:24%; height:20%; }
.cell-b{ top:30%; right:-2%; width:18%; height:26%; }
.cell-c{ bottom:9%; left:7%; width:26%; height:16%; }
.grid-block{
  position:absolute;
  right:-38px;
  bottom:-16px;
  width:170px;
  height:170px;
  border-radius:var(--r-xs);
  background:linear-gradient(155deg, var(--accent) 0%, var(--accent-dark) 100%);
  box-shadow:var(--shadow-block);
  animation:blockDrift 6s ease-in-out infinite;
}

.client-window{
  position:relative;
  z-index:2;
  border:1px solid var(--border);
  border-radius:var(--r-win);
  background:var(--bg-panel);
  box-shadow:var(--shadow-window);
  overflow:hidden;
}
.win-bar{
  display:flex;
  align-items:center;
  gap:10px;
  height:38px;
  padding-inline:14px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, var(--bg-panel-hi) 0%, var(--bg-panel) 100%);
}
.win-dots{ display:flex; gap:5px; }
.win-dots i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--bg-panel-2);
  border:1px solid var(--border);
}
.win-title{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.16em;
  color:var(--text-muted);
  white-space:nowrap;
}
.win-chip{
  margin-left:auto;
  width:9px;
  height:9px;
  border-radius:2px;
  background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-a14);
  flex:0 0 auto;
}

.wave-panel{
  position:relative;
  padding:12px 16px 8px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(239,230,212,.38) 0%, rgba(255,252,245,0) 100%);
}
.wave-svg{
  width:100%;
  height:auto;
  display:block;
}
.wave-axis{
  stroke:var(--border);
  stroke-width:1;
  stroke-dasharray:3 5;
  opacity:.9;
}
.wave-line{
  fill:none;
  stroke:var(--accent);
  stroke-width:1.6;
  stroke-linecap:round;
  opacity:.9;
}
.wave-dot{
  fill:var(--accent-soft);
  filter:drop-shadow(0 0 4px var(--accent-a40));
  animation:waveTravel 7s linear infinite;
}

.route{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  height:38px;
  padding-inline:16px;
  border-bottom:1px solid rgba(224,212,190,.7);
}
.route:last-child{ border-bottom:0; }
.route.is-active{
  background:linear-gradient(90deg, var(--accent-a14) 0%, var(--accent-a06) 100%);
}
.route.is-active::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:2px;
  background:var(--accent);
}
.route-name{
  font-size:12.5px;
  color:var(--text);
  white-space:nowrap;
}
.route.is-active .route-name{ font-weight:500; }
.route-chip{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.06em;
  padding:2px 6px;
  border-radius:var(--r-xs);
  background:var(--bg-panel-2);
  color:var(--text-muted);
  white-space:nowrap;
  flex:0 0 auto;
}
.route.is-active .route-chip{
  background:var(--accent-a14);
  color:var(--accent-dark);
}

.status-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px 12px;
  padding:11px 16px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:rgba(239,230,212,.28);
}
.status-text{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:11.5px;
  color:var(--text);
  white-space:nowrap;
}
.status-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 3px var(--success-a16);
  animation:breathe 2.8s ease-in-out infinite;
  flex:0 0 auto;
}
.proto-chips{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}
.proto{
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.04em;
  padding:2px 6px;
  border:1px solid var(--border);
  border-radius:var(--r-xs);
  background:var(--bg-panel);
  color:var(--text-muted);
  white-space:nowrap;
}

.fact-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1px;
  background:var(--border);
  border-bottom:1px solid var(--border);
}
.fact{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:10px 12px 12px;
  background:var(--bg-panel);
  min-width:0;
}
.fact-label{
  font-family:var(--font-mono);
  font-size:8.5px;
  letter-spacing:.14em;
  color:var(--text-muted);
  opacity:.82;
  white-space:nowrap;
}
.fact-value{
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--text);
  white-space:nowrap;
}
.fact-value .unit{
  font-size:10px;
  font-weight:400;
  color:var(--text-muted);
  margin-left:1px;
}
.fact-note{
  font-size:9.5px;
  color:var(--text-muted);
  line-height:1.4;
}

.win-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:6px 10px;
  padding:9px 16px;
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.05em;
  color:var(--text-muted);
  background:rgba(239,230,212,.22);
}

/* 窗口外的漂浮件 */
.float-pill{
  position:absolute;
  z-index:4;
  top:0;
  left:10px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:28px;
  padding-inline:13px;
  border-radius:var(--r-pill);
  background:var(--ink);
  color:var(--on-ink);
  font-size:11.5px;
  letter-spacing:.02em;
  white-space:nowrap;
  box-shadow:var(--shadow-pill);
}
.pill-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 3px var(--success-a22);
  animation:breathe 2.8s ease-in-out infinite;
  flex:0 0 auto;
}
.float-pill::after{
  content:"";
  position:absolute;
  left:100%;
  top:50%;
  width:34px;
  height:1px;
  background:var(--accent);
  opacity:.55;
}
.float-pill::before{
  content:"";
  position:absolute;
  left:calc(100% + 34px);
  top:50%;
  width:1px;
  height:46px;
  background:linear-gradient(180deg, var(--accent) 0%, var(--accent-a10) 100%);
  opacity:.75;
}

.float-card{
  position:absolute;
  z-index:4;
  left:-16px;
  bottom:6px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding-inline:14px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-panel);
  font-size:11.5px;
  color:var(--text);
  white-space:nowrap;
  box-shadow:var(--shadow-float);
}
.fc-icon{
  display:grid;
  place-items:center;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--accent-a14);
  color:var(--accent);
  flex:0 0 auto;
}
.fc-icon svg{ width:10px; height:10px; }

/* ---------- 4. 首屏下方事实条 ---------- */
.stats-strip{
  border-top:1px solid var(--border);
  background:var(--bg-bottom);
  padding-top:22px;
  padding-bottom:22px;
}
.stats-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding-inline:var(--gutter);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px 24px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-muted);
  text-align:center;
}
.stats-item b{
  font-weight:500;
  color:var(--text);
}
.stats-sep{
  width:1px;
  height:14px;
  background:var(--border);
  flex:0 0 auto;
}

/* ---------- 5. 章节头 ---------- */
.sec-head{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:44em;
  margin-bottom:36px;
}
.sec-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.18em;
  color:var(--text-muted);
  text-transform:uppercase;
}
.sec-kicker::before{
  content:"";
  width:18px;
  height:1px;
  background:var(--accent);
  flex:0 0 auto;
}
.sec-title{
  font-size:clamp(28px,3.4vw,42px);
  line-height:1.12;
  letter-spacing:-.025em;
}
.sec-lede{
  font-size:16px;
  line-height:1.65;
  color:var(--text-muted);
  max-width:40em;
}
.sec-head--split{
  flex-direction:row;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px 32px;
  max-width:none;
}

/* ---------- 6. 卖点非对称拼盘 ---------- */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:16px;
}
.feature-card{
  position:relative;
  grid-column:span 5;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:22px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  min-width:0;
}
.feature-card--wide{ grid-column:span 7; }
.feature-card--band{ grid-column:1 / -1; }
.feature-card--strip{
  grid-column:1 / -1;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 18px;
  padding-top:16px;
  padding-bottom:16px;
}
.feature-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:var(--r-xs);
  background:var(--accent);
  color:var(--on-ink);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  flex:0 0 auto;
}
.feature-title{
  font-size:19px;
  line-height:1.3;
  letter-spacing:-.012em;
  font-weight:500;
}
.feature-body{
  font-size:14px;
  line-height:1.7;
  color:var(--text-muted);
}
.feature-meta{
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid var(--border);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 14px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.06em;
  color:var(--text-muted);
}
.feature-meta b{
  font-size:14px;
  font-weight:500;
  color:var(--text);
  letter-spacing:-.01em;
}

/* ---------- 7. 表格 / 线路表 ---------- */
.table-scroll{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-panel);
}
.table-scroll table{
  width:100%;
  border-collapse:collapse;
  min-width:620px;
}
.table-scroll th,
.data-table th{
  padding:10px 14px;
  text-align:left;
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.12em;
  color:var(--text);
  background:var(--bg-panel-2);
  border-bottom:1px solid var(--border);
  white-space:nowrap;
  word-break:keep-all;
}
.table-scroll td,
.data-table td{
  padding:11px 14px;
  font-size:13.5px;
  color:var(--text);
  border-bottom:1px solid var(--border);
  word-break:keep-all;
  vertical-align:middle;
}
.table-scroll tr:last-child td,
.data-table tr:last-child td{ border-bottom:0; }
.table-scroll tbody tr:hover{ background:var(--accent-a06); }
.table-scroll .cell-mono{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-muted);
  white-space:nowrap;
}
.table-scroll .cell-country{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.table-scroll .cell-country .flag{ width:16px; height:16px; }

.data-table{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-panel);
}
.data-table td{ font-size:14px; }

/* 正文里裸表格的兜底（写手可能直接输出 table） */
.prose > .data-table{
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  min-width:0;
}

/* 线路分组小标题 */
.line-group{
  margin-top:28px;
}
.line-group-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--text-muted);
}
.line-group-head::after{
  content:"";
  flex:1 1 60px;
  height:1px;
  background:var(--border);
}

/* ---------- 8. 套餐卡 ---------- */
.plan-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}
.plan-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:24px 22px 22px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  min-width:0;
}
.plan-card.is-featured{
  border-color:var(--accent);
  box-shadow:0 22px 44px -26px var(--accent-a40), inset 0 1px 0 var(--white-a90);
}
.plan-card.is-current{
  background:var(--bg-panel-hi);
  border-color:var(--accent);
}
.plan-badge{
  position:absolute;
  top:-11px;
  left:22px;
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding-inline:9px;
  border-radius:var(--r-xs);
  background:var(--accent);
  color:var(--on-ink);
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.1em;
  white-space:nowrap;
}
.plan-name{
  font-size:14px;
  font-weight:500;
  letter-spacing:.01em;
  color:var(--text);
}
.plan-price{
  display:flex;
  align-items:baseline;
  gap:4px;
  font-family:var(--font-mono);
  font-size:36px;
  font-weight:500;
  letter-spacing:-.02em;
  color:var(--text);
  line-height:1.1;
}
.plan-price .cur{ font-size:18px; }
.plan-price .per{
  font-family:var(--font-body);
  font-size:12.5px;
  font-weight:400;
  color:var(--text-muted);
}
.plan-flow{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding-top:12px;
  border-top:1px solid var(--border);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--text-muted);
}
.plan-flow b{
  font-size:17px;
  font-weight:500;
  color:var(--text);
  letter-spacing:-.01em;
}
.plan-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:13px;
  color:var(--text-muted);
}
.plan-list li{
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.plan-list li::before{
  content:"";
  flex:0 0 auto;
  width:5px;
  height:5px;
  margin-top:8px;
  border-radius:50%;
  background:var(--accent-soft);
}
.plan-foot{ margin-top:auto; padding-top:6px; }

/* 价格一览表（纯 HTML，JS 只做显隐） */
.price-table{
  width:100%;
  border-collapse:collapse;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
}
.price-table th{
  padding:10px 14px;
  text-align:left;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.12em;
  color:var(--text);
  background:var(--bg-panel-2);
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.price-table td{
  padding:11px 14px;
  font-size:13.5px;
  border-bottom:1px solid var(--border);
  word-break:keep-all;
}
.price-table tr:last-child td{ border-bottom:0; }
.price-table .price-cell{
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:500;
  white-space:nowrap;
}

/* ---------- 9. 平台卡 ---------- */
.platform-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:12px;
}
.platform-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding:16px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
  min-width:0;
  transition:transform .18s ease, border-color .18s ease;
}
.platform-card:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
}
.platform-icon{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:var(--r-sm);
  background:var(--accent-a10);
  color:var(--accent-dark);
  flex:0 0 auto;
}
.platform-icon svg{ width:18px; height:18px; }
.platform-name{
  font-size:13.5px;
  font-weight:500;
  color:var(--text);
  white-space:nowrap;
}
.platform-note{
  font-size:11.5px;
  color:var(--text-muted);
  line-height:1.5;
}
.platform-card .btn{ margin-top:auto; }

/* ---------- 10. 文章卡 ---------- */
.post-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}
.post-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:20px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  min-width:0;
  transition:transform .18s ease, border-color .18s ease;
}
.post-card:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
}
.post-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.08em;
  color:var(--text-muted);
}
.post-title{
  font-size:17px;
  line-height:1.36;
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--text);
}
.post-excerpt{
  font-size:13px;
  line-height:1.65;
  color:var(--text-muted);
}
.post-more{
  margin-top:auto;
  padding-top:8px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.08em;
  color:var(--accent-dark);
}

/* ---------- 11. 徽章 / 标签 / 胶囊 ---------- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:22px;
  max-width:100%;
  padding-inline:8px;
  border-radius:var(--r-xs);
  background:var(--bg-panel-2);
  color:var(--text-muted);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.08em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.badge--accent{
  background:var(--accent-a14);
  color:var(--accent-dark);
}
.badge--success{
  background:var(--success-a16);
  color:var(--accent-dark);
}
.badge--warn{
  background:var(--warn-a12);
  color:var(--warn);
}

.tag{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  max-width:100%;
  padding-inline:9px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg-panel);
  font-size:11.5px;
  color:var(--text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tag.is-active{
  border-color:var(--accent);
  background:var(--accent-a10);
  color:var(--accent-dark);
}

.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  min-width:0;
}

/* ---------- 12. tab 切换 ---------- */
.tabs{
  display:flex;
  flex-direction:column;
  gap:20px;
  min-width:0;
}
.tab-list{
  display:flex;
  align-items:center;
  gap:4px;
  border-bottom:1px solid var(--border);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
}
.tab{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding-inline:14px;
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  font-family:var(--font-body);
  font-size:14px;
  color:var(--text-muted);
  white-space:nowrap;
  cursor:pointer;
  transition:color .16s ease, border-color .16s ease;
}
.tab:hover{ color:var(--text); }
.tab[aria-selected="true"]{
  color:var(--text);
  font-weight:500;
  border-bottom-color:var(--accent);
}
.tab-panel{ min-width:0; }
.tab-panel[hidden]{ display:none; }

/* ---------- 13. 长页目录条 ---------- */
.toc-tabs{
  position:sticky;
  top:0;
  z-index:15;
  display:flex;
  align-items:center;
  gap:4px;
  max-width:100%;
  padding-top:8px;
  padding-bottom:8px;
  border-bottom:1px solid var(--border);
  background:var(--bg);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.toc-tabs a{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding-inline:12px;
  border-radius:var(--r-pill);
  font-size:12.5px;
  color:var(--text-muted);
  white-space:nowrap;
  flex:0 0 auto;
  transition:background-color .16s ease, color .16s ease;
}
.toc-tabs a:hover{ background:var(--bg-panel-2); color:var(--text); }
.toc-tabs a.is-current{
  background:var(--accent-a14);
  color:var(--accent-dark);
  font-weight:500;
}

/* 锚点落点避开吸顶目录条 */
body:has(.toc-tabs) section[id]{
  scroll-margin-top:calc(var(--header-h) + 76px);
}

/* ---------- 14. FAQ 折叠 ---------- */
.faq{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
.faq-item{
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-panel);
  box-shadow:inset 0 1px 0 var(--white-a90);
  overflow:hidden;
}
.faq-item summary{
  position:relative;
  display:flex;
  align-items:center;
  min-height:48px;
  padding:12px 46px 12px 16px;
  font-size:14.5px;
  font-weight:500;
  color:var(--text);
  cursor:pointer;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"";
  position:absolute;
  right:18px;
  top:50%;
  width:9px;
  height:9px;
  border-right:1.6px solid var(--text-muted);
  border-bottom:1.6px solid var(--text-muted);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .18s ease;
}
.faq-item[open] summary::after{
  transform:translateY(-30%) rotate(-135deg);
}
.faq-item[open] summary{ border-bottom:1px solid var(--border); }
.faq-a{
  padding:14px 16px 16px;
  font-size:14px;
  line-height:1.72;
  color:var(--text-muted);
}
.faq-a p + p{ margin-top:10px; }
.faq-a a{ color:var(--accent-dark); text-decoration:underline; text-underline-offset:3px; }

/* ---------- 15. callout / 引用 ---------- */
.callout{
  display:flex;
  gap:12px;
  padding:16px 18px;
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:var(--r-md);
  background:var(--bg-panel-2);
  font-size:14px;
  line-height:1.7;
  color:var(--text);
  min-width:0;
}
.callout-icon{
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin-top:2px;
  color:var(--accent);
}
.callout-icon svg{ width:100%; height:100%; }
.callout strong{ font-weight:500; }
.callout--warn{
  border-left-color:var(--warn);
  background:var(--warn-a12);
}
.callout--warn .callout-icon{ color:var(--warn); }
.callout--error{
  border-left-color:var(--error);
  background:var(--error-a10);
}
.callout--error .callout-icon{ color:var(--error); }

blockquote{
  padding:14px 18px;
  border-left:3px solid var(--accent-soft);
  background:var(--bg-panel);
  border-radius:0 var(--r-md) var(--r-md) 0;
  font-size:15px;
  line-height:1.7;
  color:var(--text-muted);
}

/* ---------- 16. 正文排版 ---------- */
.prose{
  max-width:72ch;
  min-width:0;
  font-size:16px;
  line-height:1.78;
  color:var(--text);
}
.prose > * + *{ margin-top:16px; }
.prose h2{
  margin-top:40px;
  font-size:clamp(24px,2.6vw,30px);
  line-height:1.24;
}
.prose h3{
  margin-top:28px;
  font-size:19px;
}
.prose ul,
.prose ol{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-left:22px;
  list-style:disc;
}
.prose ol{ list-style:decimal; }
.prose li{ min-width:0; }
.prose a{
  color:var(--accent-dark);
  text-decoration:underline;
  text-underline-offset:3px;
}
/* 正文里的实心按钮要夺回自己的前景色,否则被上面的 .prose a 染成深绿压深底 */
.prose a.btn-solid{ color:var(--on-ink); text-decoration:none; }
/* 备用:正文内的强调按钮(当前无使用)
.prose<|place_holder_mm_span_0442|> a.btn-accent{
  color:var(--on-ink);
  text-decoration:none;
}*/
.prose strong{ font-weight:500; }
.prose img{ border-radius:var(--r-md); border:1px solid var(--border); }
.prose > .table-scroll,
.prose > .callout,
.prose > pre{ margin-top:20px; }

/* ---------- 17. 帮助中心分节 ---------- */
.help-section{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-top:32px;
  margin-top:32px;
  border-top:1px solid var(--border);
  min-width:0;
}
.help-section:first-of-type{
  padding-top:0;
  margin-top:0;
  border-top:0;
}
.help-section h2{
  font-size:clamp(22px,2.4vw,26px);
}

/* ---------- 18. 文末推广块 ---------- */
.promo-block{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px 28px;
  padding:26px 24px;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:linear-gradient(135deg, var(--bg-panel) 0%, var(--bg-panel-2) 100%);
  box-shadow:var(--shadow-card);
  min-width:0;
}
.promo-copy{ min-width:0; flex:1 1 260px; }
.promo-brand{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--text-muted);
  margin-bottom:8px;
}
.promo-title{
  font-size:20px;
  line-height:1.35;
  font-weight:500;
  letter-spacing:-.012em;
  color:var(--text);
}
.promo-desc{
  margin-top:6px;
  font-size:13.5px;
  line-height:1.65;
  color:var(--text-muted);
}
.promo-block .btn{
  flex-shrink:0;
  white-space:nowrap;
}

/* ---------- 19. 悬浮 CTA ---------- */
.float-cta{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:50;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:44px;
  padding-inline:18px;
  border-radius:var(--r-sm);
  background:var(--accent);
  color:var(--on-ink);
  font-size:13px;
  font-weight:500;
  white-space:nowrap;
  box-shadow:0 16px 32px -16px rgba(18,58,40,.75), inset 0 1px 0 var(--white-a16);
  transition:transform .18s ease, background-color .18s ease;
}
.float-cta:hover{
  transform:translateY(-2px);
  background:var(--accent-dark);
}
.float-cta svg{ width:14px; height:14px; flex:0 0 auto; }

/* 页尾避让垫块：不压正文段尾与页脚法律链 */
body:has(.float-cta)::after{
  content:"";
  display:block;
  height:calc(88px + env(safe-area-inset-bottom, 0px));
}

/* ---------- 20. 预览页示例排版（design-preview 专用） ---------- */
.swatch-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:10px;
}
.swatch{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-panel);
  min-width:0;
}
.swatch-dot{
  width:34px;
  height:34px;
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  flex:0 0 auto;
}
.swatch-meta{ min-width:0; }
.swatch-var{
  display:block;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text);
  overflow-wrap:anywhere;
}
.swatch-val{
  display:block;
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--text-muted);
}

.type-stack{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.type-row{
  display:grid;
  grid-template-columns:118px minmax(0,1fr);
  gap:16px;
  align-items:baseline;
  padding-bottom:12px;
  border-bottom:1px dashed var(--border);
  min-width:0;
}
.type-label{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.12em;
  color:var(--text-muted);
  white-space:nowrap;
}
.type-sample{ min-width:0; }

.demo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:16px;
  min-width:0;
}
.demo-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}
.demo-col{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}
.spec-note{
  font-size:12.5px;
  line-height:1.6;
  color:var(--text-muted);
}
.preview-section{
  padding-top:56px;
  padding-bottom:56px;
  border-top:1px solid var(--border);
}
.preview-head{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:28px;
  max-width:44em;
}
.preview-head h2{
  font-size:clamp(24px,3vw,32px);
}

/* ---------- 21. 动效 ---------- */
@keyframes waveTravel{
  0%{ transform:translate(0px,0px); }
  6.25%{ transform:translate(25px,-8.5px); }
  12.5%{ transform:translate(50px,-12px); }
  18.75%{ transform:translate(75px,-8.5px); }
  25%{ transform:translate(100px,0px); }
  31.25%{ transform:translate(125px,8.5px); }
  37.5%{ transform:translate(150px,12px); }
  43.75%{ transform:translate(175px,8.5px); }
  50%{ transform:translate(200px,0px); }
  56.25%{ transform:translate(225px,-8.5px); }
  62.5%{ transform:translate(250px,-12px); }
  68.75%{ transform:translate(275px,-8.5px); }
  75%{ transform:translate(300px,0px); }
  81.25%{ transform:translate(325px,8.5px); }
  87.5%{ transform:translate(350px,12px); }
  93.75%{ transform:translate(375px,8.5px); }
  100%{ transform:translate(400px,0px); }
}
@keyframes breathe{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(.62); opacity:.5; }
}
@keyframes blockDrift{
  0%,100%{ transform:translate3d(0,0,0); }
  50%{ transform:translate3d(-7px,-9px,0); }
}

/* ---------- 22. 响应式 ---------- */
@media (max-width:1180px){
  .hero-title{ font-size:56px; }
  .hero-inner{ gap:40px; }
  .plan-grid{ gap:14px; }
}

@media (max-width:1040px){
  .hero-inner{
    grid-template-columns:minmax(0,1fr);
    gap:44px;
  }
  .hero-visual{
    max-width:540px;
    width:100%;
    margin:0 auto;
  }
  .hero-title{ font-size:52px; }
  .hero{
    min-height:0;
    padding-top:44px;
    padding-bottom:52px;
  }
  .plan-grid{ grid-template-columns:minmax(0,1fr); }
  .platform-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .post-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .feature-card,
  .feature-card--wide{ grid-column:1 / -1; }
}

@media (max-width:768px){
  .hero-title{
    font-size:36px;
    letter-spacing:-.02em;
    line-height:1.12;
  }
  .hero-cta .btn{ flex:1 1 auto; }
  .stage{ padding-top:34px; padding-bottom:28px; }
  .stage-grid{ inset:6px -14px 2px -12px; }
  .grid-block{
    width:112px;
    height:112px;
    right:-14px;
    bottom:-10px;
  }
  .float-card{
    left:0;
    bottom:-4px;
    min-height:32px;
    font-size:10.5px;
  }
  .float-pill{ left:0; font-size:10.5px; }
  .float-pill::after{ width:18px; }
  .float-pill::before{ left:calc(100% + 18px); height:34px; }
  .post-grid{ grid-template-columns:minmax(0,1fr); }
  .platform-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .stats-sep{ display:none; }
  .promo-block{ padding:20px 18px; }
  .promo-block .btn{ width:100%; }
  .float-cta{
    right:14px;
    bottom:14px;
    min-height:40px;
    padding-inline:14px;
    font-size:12px;
  }
  .type-row{ grid-template-columns:minmax(0,1fr); gap:6px; }
  .feature-card{ padding:18px; }
}

@media (max-width:640px){
  .fact-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .fact{ padding:8px 9px 10px; }
  .fact-value{ font-size:12.5px; }
  .fact-note{ display:none; }
  .win-title{ font-size:9px; letter-spacing:.1em; }
  .route{ padding-inline:12px; }
  .status-bar{ padding:9px 12px; }
  .win-foot{ padding:8px 12px; font-size:9px; }
  .wall{ gap:8px 10px; }
  .wall-label{ min-width:46px; }
  .wall-list{ gap:8px 14px; }
  .platform-grid{ grid-template-columns:minmax(0,1fr); }
  .plan-price{ font-size:30px; }
  .toc-tabs a{ font-size:12px; padding-inline:10px; }
  .float-cta span{ display:inline; }
}

@media (prefers-reduced-motion:reduce){
  .wave-dot,
  .status-dot,
  .pill-dot,
  .grid-block{
    animation:none !important;
  }
  .platform-card:hover,
  .post-card:hover,
  .float-cta:hover,
  .btn-solid:hover{
    transform:none;
  }
}