/* ============================================================
   落地页专属版面（2026-09-13）

   只写这一页独有的东西。配色、字号阶梯、间距阶梯全部来自 styles.css 的
   :root——落地页最容易被做成"一张很有设计感的、跟产品长得不像的卡"，
   共用一套 token 是唯一能防住这件事的办法。

   styles.css 里 body 是 `height:100vh; display:flex`（应用是一屏不滚的），
   落地页要滚，所以先把这两条改回来。
   ============================================================ */
body.landing {
  height: auto;
  min-height: 100vh;
  display: block;
  background: var(--panel-bg);
}
body.landing header { position: sticky; top: 0; z-index: 10; }

/* 顶栏和 CTA 上的按钮是 <a> 不是 <button>——它们是导航，不是动作。
   组件层那串按钮规则按容器挂，够不到这里，所以观感属性自己写全。 */
.btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border: 1px solid var(--accent-fill);
  border-radius: var(--radius-sm);
  background: var(--accent-fill);
  color: #fff;
  font-size: var(--fs-5);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-link:hover { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); }
.btn-link.secondary {
  background: #fff;
  color: var(--text);
  border-color: var(--border);
}
.btn-link.secondary:hover { background: var(--bg-tint); color: var(--accent); border-color: var(--border); }
.btn-link.big { padding: 10px 20px; font-size: var(--fs-4); }
.btn-link:focus-visible { outline: none; box-shadow: var(--ring); }

/* styles.css 里的三栏布局是挂在**元素选择器** `main` 上的（`display:grid` +
   三列模板），落地页的 <main> 会原封不动地吃到它——第一版就是这么翻的车：
   hero、三点、"为什么编不出来"被摊成了并排的三栏。这里要连 display 和 flex
   一起覆盖掉，只改 max-width 是不够的。 */
main.landing-main {
  display: block;
  flex: none;
  min-height: 0;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
  gap: 0;
}

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-7);
  align-items: center;
  padding-block: var(--sp-7) var(--sp-6);
}
.hero h2 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-1);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero p { margin: 0 0 var(--sp-5); color: var(--muted); font-size: var(--fs-4); line-height: 1.8; max-width: 40ch; }
.cta-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.cta-note { margin: var(--sp-3) 0 0; font-size: var(--fs-6); color: var(--muted-soft); }

/* 配图位。真截图补上之前先放一个示意框——空着会让右半边看起来像没加载完。 */
.shot {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.shot-cols { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 6px; height: 140px; }
.shot-col {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px; display: flex; flex-direction: column; gap: 5px;
}
.shot-col-cap {
  font-size: var(--fs-7); color: var(--muted); margin-bottom: 2px;
}
/* 骨架线。只是"这里有内容"的示意，不冒充任何具体文字 */
.shot-col > i { height: 4px; border-radius: 2px; background: var(--border); }
.shot-col > i.short { width: 55%; }
.shot-col > i.tall { height: 10px; width: 70%; background: var(--border-soft); }
.shot-col.is-main > i { background: var(--border-soft); }
.shot-cap { text-align: center; font-size: var(--fs-7); color: var(--muted-soft); }

/* ---------- 三点 ---------- */
/* 类名还叫 .three 是历史遗留（原来真的是三点）。2026-09-13 改成两点：
   三段式是 AI 写作最好认的特征之一，而这三条本来也不并列——"录档案"是前置
   动作，"重排"和"报缺口"是同一次生成的两面。 */
.three {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--border);
}
.three > div { padding: var(--sp-5) var(--sp-4); border-left: 1px solid var(--border-soft); }
.three > div:first-child { border-left: none; padding-left: 0; }
.three-n { font-size: var(--fs-6); letter-spacing: 0.1em; color: var(--accent); margin-bottom: var(--sp-2); }
.three h3 { margin: 0 0 6px; font-size: var(--fs-3); font-weight: 600; }
.three p { margin: 0; font-size: var(--fs-5); color: var(--muted); line-height: 1.8; }

/* ---------- 为什么编不出来 ---------- */
/* 这一节是整个产品唯一真正的差异点，所以它不跟上面三点长一样：给一层底色
   和一条重音左边线，让它在页面上是"另一种东西"。 */
.why {
  margin-block: var(--sp-6);
  padding: var(--sp-5);
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.why h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-3); font-weight: 600; }
.why p { margin: 0; font-size: var(--fs-4); color: var(--muted); line-height: 1.85; max-width: 62ch; }

.landing-foot {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
  padding-block: var(--sp-5) var(--sp-6);
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-6);
  color: var(--muted-soft);
}

/* 备案号。**跟旁边那行站名同一个灰度、同一个字号**——它是法规要求挂的东西，
   不是想让人点的东西，做得比正文还显眼只会抢走注意力。但它必须**看起来
   就是个链接**（悬停变色、有下划线），因为规定要求的是"可点击并跳转到
   工信部"，一段看不出能点的灰字，人和检查的人都不会去点。 */
.landing-foot .beian {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.landing-foot .beian:hover,
.landing-foot .beian:focus-visible {
  color: var(--muted);
  border-bottom-color: currentColor;
}
.landing-foot .beian:focus-visible { outline: none; box-shadow: var(--ring); }

/* 公安备案号前面那枚警徽（2026-09-23）。

   原图 36×40，比正文高——直接放会把页脚那一行撑高。所以按**行高**约束，
   宽度交给 aspect-ratio 自己算，不写死 px：字号以后改了它自己跟着变。

   `vertical-align` 那个负值是肉眼对齐：baseline 对齐会让图标看起来偏高，
   因为它的视觉重心比文字低。 */
.landing-foot .beian-badge {
  height: 1.35em;
  width: auto;
  vertical-align: -0.35em;
  margin-right: 0.3em;
}

@media screen and (max-width: 760px) {
  main.landing-main { padding-inline: var(--sp-4); }
  .hero { grid-template-columns: 1fr; gap: var(--sp-5); padding-block: var(--sp-6) var(--sp-5); }
  .hero h2 { font-size: var(--fs-2); }
  .three { grid-template-columns: 1fr; }
  .three > div { border-left: none; border-top: 1px solid var(--border-soft); padding-inline: 0; }
  .three > div:first-child { border-top: none; }
  .cta-row .btn-link { flex: 1 1 auto; }
}