/* 三个站共用的版式，叠在 tokens.css、components.css 之后加载。
   页头、页脚、按钮、卡片用 components.css 的 cz- 组件；这里只补宣传页自己的版式。
   只引用变量，不写死颜色、字体。 */
:root {
  /* 本站版式尺寸（非品牌规范，cn 品牌站自用） */
  --cn-icon-size: 56px;
  --cn-qr-size: 140px;
  --cn-shot-width: 260px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cz-bg);
  color: var(--cz-text);
  font-family: var(--cz-font-sans);
  font-size: var(--cz-fs-md);
  line-height: var(--cz-lh-body);
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--cz-accent-ink); text-underline-offset: .18em; }
:focus-visible { outline: 2px solid var(--cz-focus); outline-offset: 2px; border-radius: 4px; }

/* 页头里的字标链接 */
.cz-header a:has(> .cz-wordmark) { display: block; color: var(--cz-text); }

/* 标题：衬线，跟随 --cz-font-heading */
h1, h2 {
  font-family: var(--cz-font-heading);
  font-weight: var(--cz-heading-weight);
  line-height: var(--cz-lh-tight);
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--cz-fs-2xl); margin-bottom: var(--cz-space-4); }
h2 { font-size: var(--cz-fs-xl); margin-bottom: var(--cz-space-5); }
@media (min-width: 768px) {
  h1 { font-size: var(--cz-fs-3xl); }
  h2 { font-size: var(--cz-fs-2xl); }
}
h3 { font-size: var(--cz-fs-lg); font-weight: 600; line-height: var(--cz-lh-tight); margin: 0 0 var(--cz-space-2); }
p { margin: 0 0 var(--cz-space-3); }

/* 区块 */
section { padding: var(--cz-space-7) 0; }
section + section { border-top: var(--cz-border-width) solid var(--cz-border); }
.lead { font-size: var(--cz-fs-lg); color: var(--cz-text-2); max-width: var(--cz-reading-max); }
.muted { color: var(--cz-muted); }
.small { font-size: var(--cz-fs-sm); }
.byline { font-size: var(--cz-fs-xs); color: var(--cz-muted); margin-top: var(--cz-space-2); }
.actions { display: flex; flex-wrap: wrap; gap: var(--cz-space-3); margin-top: var(--cz-space-5); }

/* 卡片网格 */
.grid { display: grid; gap: var(--cz-space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cz-card p:last-child { margin-bottom: 0; }
.cz-card ul { padding-left: var(--cz-space-5); margin: var(--cz-space-2) 0 var(--cz-space-3); color: var(--cz-text-2); }

/* 首屏产品图标 */
.icon {
  width: var(--cn-icon-size);
  height: var(--cn-icon-size);
  border-radius: var(--cz-radius-lg);
  margin-bottom: var(--cz-space-5);
}

/* 矩阵页产品卡里的小程序码 */
.qr {
  width: var(--cn-qr-size);
  border-radius: var(--cz-radius-sm); /* 图片自带白底，深色模式下照样扫得出 */
  margin: var(--cz-space-2) 0;
}

/* 产品截图 */
.shot-figure { margin: 0 auto; max-width: var(--cn-shot-width); width: 100%; }
.shot-figure img {
  width: 100%;
  border-radius: var(--cz-radius-lg);
  border: var(--cz-border-width) solid var(--cz-border);
  background: var(--cz-surface);
}
.shot-figure figcaption { margin-top: var(--cz-space-2); text-align: center; }

/* 常见问题 */
details { border-bottom: var(--cz-border-width) solid var(--cz-border); padding: var(--cz-space-3) 0; }
summary { cursor: pointer; font-weight: 600; }
details p { margin: var(--cz-space-2) 0 0; color: var(--cz-text-2); }