/* ─────────────────────────────────────────────────────────────
   geo-shell.css — 独立版内容页的「站点化外壳」
   适用：capability / cases / faq / howto-5min / howto-batch / howto-mqtt
   这些页面自带一套内联样式（紫色/红色 hero、黄色提示条、橙色 CTA），
   且没有站点导航与页脚。本文件把它们统一到站点设计语言：
   蓝渐变 hero、白卡片、语义化提示条、统一标题层级与区块留白。
   加载顺序：site.css → 页面内联 <style> → 本文件（覆盖生效）。
   ───────────────────────────────────────────────────────────── */

/* 固定导航占位（navbar 高 80 / 64px） */
body { padding-top: 80px; }
@media (max-width: 767px) { body { padding-top: 64px; } }

.wrap { max-width: 1200px; padding: 32px 24px 64px; }

/* Hero：统一为站点蓝渐变，与 cloud-printer / cloud-print-box 一致 */
.hero {
  background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 55%, #0ea5e9 100%);
  border-radius: 20px;
  padding: 44px 40px;
  margin-bottom: 32px;
}
.hero h1 { font-size: clamp(26px, 3.2vw, 40px); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; margin-bottom: 12px; }
.hero .answer { font-size: 15.5px; line-height: 1.9; opacity: .92; }
@media (max-width: 640px) {
  .hero { padding: 32px 24px; border-radius: 16px; }
}

/* 标题层级：去掉左侧竖线装饰，改为站点式粗体深色标题 */
h2 {
  color: #0f172a;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 44px 0 16px;
  padding-left: 0;
  border-left: 0;
}
h3 { color: #1f2937; }

/* 卡片容器 */
.section, .tree {
  background: #fff;
  border: 1px solid #eef1f5;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  padding: 28px;
  margin: 20px 0;
}

/* 语义提示条（保留 .box-r / .box-g / .box-blue 的语义，只换配色） */
.box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #94a3b8;
  color: #334155;
  border-radius: 12px;
}
.box-blue { background: #eff6ff; border-color: #bfdbfe; border-left-color: #1d4ed8; color: #1e3a8a; }
.box-g    { background: #f0fdf4; border-color: #bbf7d0; border-left-color: #16a34a; color: #14532d; }
.box-r    { background: #fef2f2; border-color: #fecaca; border-left-color: #dc2626; color: #7f1d1d; }

/* 底部 CTA：统一为站点蓝渐变块 */
.cta {
  background: linear-gradient(135deg, #1d4ed8, #0ea5e9 60%, #0f172a);
  color: #fff;
  border-radius: 16px;
  padding: 24px 28px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 10px 26px rgba(29, 78, 216, .18);
}
.cta a, .cta b, .cta strong { color: #fff; }

/* 表格品牌色统一（原 #1e3a8a 深藏青） */
.compare-table th { background: #1d4ed8; }

/* KPI 卡：原为红/绿/紫混排，收敛到同一蓝色系家族 */
.kpi-blue   { background: linear-gradient(135deg, #0f172a, #1d4ed8); }
.kpi-red    { background: linear-gradient(135deg, #1d4ed8, #0ea5e9); }
.kpi-green  { background: linear-gradient(135deg, #0e7490, #0ea5e9); }
.kpi-purple { background: linear-gradient(135deg, #312e81, #4338ca); }

/* 决策树 / 步骤块（部分 howto 页仍在用） */
.tree .level { background: #f8fafc; border-left-color: #1d4ed8; border-radius: 10px; }
.tree .leaf  { background: #fff; border: 1px solid #eef1f5; border-left: 3px solid #0ea5e9; border-radius: 10px; }
.tree .split > div { background: #f8fafc; border: 1px solid #eef1f5; border-left: 3px solid #94a3b8; border-radius: 10px; }

/* 窄屏表格横向滚动（这些页面没有 .table-scroll 包裹） */
@media (max-width: 767px) {
  .wrap table { display: block; overflow-x: auto; max-width: 100%; }
}