/* =========================================================
   Beacon · 关于我们页 Landing 结构样式（page-about）
   承载正文中的 .beacon-lp 落地页结构（hero / 特色网格 /
   服务对象 pills / 使命愿景），设计基线同 standard-page：
   父主题无衬线栈 400/500、hairline 卡片、4px 圆角、无投影、双模画布
   ========================================================= */

/* =========================================================
   0) 本地令牌（继承 standard-page 的 --bs-* 双模变量）
   ========================================================= */
.beacon-lp{
  --lp-border: var(--bc-semantic-color-border-default);
  --lp-text: var(--bs-text, rgba(0, 0, 0, .82));
  --lp-strong: var(--bc-semantic-color-text-primary);
  --lp-muted: var(--bc-semantic-color-text-secondary);
  --lp-accent: var(--bc-semantic-color-brand-accent);
}

/* =========================================================
   1) Hero：居中品牌区（logo + slogan + lead）
   ========================================================= */
.beacon-lp .beacon-hero{
  text-align: center;
  padding: 8px 0 32px;
  border-bottom: 1px solid var(--lp-border);
}
.beacon-lp .beacon-hero img{
  display: block;
  margin: 0 auto 22px;
  width: 228px;
  height: auto;
}
.beacon-lp .beacon-slogan{
  margin: 0 0 14px;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--lp-strong);
}
.beacon-lp .beacon-hero .beacon-text-block{
  max-width: 620px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.8;
  color: var(--lp-muted);
}
.beacon-lp .beacon-hero .beacon-text-block p{
  margin: 0 0 8px;
}

/* =========================================================
   2) 章节节奏（h2 主样式由 standard-page.css 提供）
   ========================================================= */
.beacon-lp .beacon-section + .beacon-section{
  margin-top: 40px;
}
.beacon-lp .beacon-container{
  padding-top: 32px;
}
.beacon-lp .beacon-text-block p{
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--lp-text);
}

/* =========================================================
   3) 特色网格：2 列 hairline 卡片（移动 1 列）
   ========================================================= */
.beacon-lp .feature-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}
.beacon-lp .feature-card{
  background: transparent;
  border: 1px solid var(--lp-border);
  border-radius: var(--bs-radius-sm, 4px);
  padding: 24px;
}
.beacon-lp .feature-card h3{
  margin: 0 0 10px;
  padding-left: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--lp-strong);
}
/* 覆盖 standard-page 的 h3 橙竖线（卡片内用 plain 标题） */
.beacon-lp .feature-card h3::before{
  display: none;
}
.beacon-lp .feature-card p{
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--lp-muted);
}

/* =========================================================
   4) 服务对象：badge-neutral pills（hairline 底 + ink 字）
   ========================================================= */
.beacon-lp .user-tags{
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.beacon-lp .user-tags .user-tag{
  background: var(--lp-border);
  color: var(--lp-strong);
  font-size: 14px;
  line-height: 1.5;
  padding: 6px 14px;
  border-radius: var(--bs-radius-sm, 4px);
}

/* =========================================================
   5) 使命 / 愿景：2 列 hairline 卡片（移动 1 列）
   ========================================================= */
.beacon-lp .mission-vision-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}
.beacon-lp .mv-box{
  border: 1px solid var(--lp-border);
  border-radius: var(--bs-radius-sm, 4px);
  padding: 24px;
}
.beacon-lp .mv-box h3{
  margin: 0 0 14px;
  padding-left: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--lp-strong);
}
.beacon-lp .mv-box h3::before{
  display: none;
}
.beacon-lp .mv-box p{
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--lp-text);
}
.beacon-lp .mv-box ul{
  margin: 0;
  padding-left: 1.2em;
}
.beacon-lp .mv-box li{
  margin: 6px 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--lp-text);
}
.beacon-lp .mv-box li::marker{
  color: var(--lp-accent);
}

/* =========================================================
   6) 响应式
   ========================================================= */
@media (max-width: 768px){
  .beacon-lp .beacon-slogan{
    font-size: 24px;
  }
  .beacon-lp .feature-grid,
  .beacon-lp .mission-vision-grid{
    grid-template-columns: 1fr;
  }
  .beacon-lp .feature-card,
  .beacon-lp .mv-box{
    padding: 20px;
  }
  .beacon-lp .beacon-section + .beacon-section{
    margin-top: 32px;
  }
}

/* =========================================================
   7) 暗色（令牌已随 standard-page 切换，此处仅兜底描边）
   ========================================================= */
html.io-black-mode .beacon-lp .feature-card,
html.io-black-mode .beacon-lp .mv-box{
  border-color: var(--lp-border);
}

html.io-black-mode .beacon-lp{
  --lp-border: var(--bc-surface-dark-soft);
  --lp-text: var(--bc-body-on-dark);
  --lp-strong: var(--bc-on-dark);
  --lp-muted: var(--bc-body-on-dark);
  --lp-accent: var(--bc-accent-orange);
}