/* ================================================================================
 * 言店长官网「详细功能介绍」页专属样式(features.html 四档功能卡全景)
 * 卡片骨架全部复用 style.css 的 .feature-组/.feature-grid/.feature-card 家族
 * 与末段入场动效规则,本文件只补四块:
 *   ①页头(单页标题区,比首页 hero 紧凑;顶部偏移由 .section 的 100px padding 提供)
 *   ②定制档金色调变体(镜像 feature-card-特色 的蓝色调做法;金深 #B45309 对齐年卡身份色)
 *   ③收尾 CTA(看完功能给价格/下载两个转化出口)
 *   ④embed 嵌入态(软件内 iframe 用 ?embed=1 打开本页:隐藏导航/页脚/CTA,压缩页头)
 * 内容口径:本页是功能文案的唯一真相源(软件账号页详情页将嵌本页,改这里全端生效)
 * ================================================================================ */

/* ============ 页头(单页标题区) ============ */
.features-页头 {
  padding: 0 0 26px;
  text-align: center;
}
.features-页头 h1 {
  font-size: 44px; font-weight: 600; letter-spacing: -0.5px; color: var(--文字主);
}
.features-页头 p {
  margin-top: 12px; font-size: 19px; color: var(--文字次);
}

/* ============ 定制档金色调(镜像特色档蓝:渐变底 + 图标衬底 + 徽标衬底) ============ */
.feature-card-定制 {
  background: #fcf7ea;
}
.feature-icon-定制 {
  background: rgba(180, 83, 9, 0.12); color: var(--金深);
}
.feature-徽标-定制 {
  background: rgba(245, 158, 11, 0.14); color: var(--金深);
}

/* ============ 收尾 CTA(居中两个按钮 + 价格口径脚注,与 llms.txt 关键事实同源) ============ */
.features-cta {
  margin-top: 72px; text-align: center;
}
.features-cta p {
  margin-top: 14px; font-size: 13px; color: var(--文字淡);
}

/* ============ embed 嵌入态(?embed=1 时软件内 iframe 干净嵌入,只留内容本体) ============
       判定脚本在 features.html 的 <head>(首帧生效不闪),此处只管隐藏;
       不依赖 JS:embed 类加不上时什么都不隐藏,页面完整可看 */
html.embed .nav,
html.embed .footer,
html.embed .features-cta { display: none; }
html.embed .features-页头 { padding: 0 0 6px; }
html.embed .features-页头 h1 { font-size: 28px; }
html.embed .features-页头 p { font-size: 15px; margin-top: 8px; }
/* 嵌入态内容铺满(2026-09-19 用户指瑕疵:官网 1024px 居中容器在软件宽右栏里两侧留白,
   显"悬浮容器"不像原生页面)。放开 .container 限宽让卡片网格吃满 iframe 宽,只留呼吸边距;
   竖向同步收紧——软件视口矮,100px 段落留白太浪费。浏览器直开官网仍是 1024 居中不动。 */
html.embed .container { max-width: none; padding: 0 32px; }
html.embed .section { padding: 64px 0; }

/* ============ 响应式(页头专属中间档,对齐 docs.css/news.css 分栏目 900px 断点) ============ */
@media (max-width: 900px) {
  .features-页头 { padding: 0 0 18px; }
  .features-页头 h1 { font-size: 32px; }
  .features-页头 p { font-size: 16px; }
  html.embed .features-页头 h1 { font-size: 22px; }
}

/* ============ 滚动条苹果化(2026-09-19,用户指瑕疵:嵌入软件 iframe 后原生滚动条太宽;
   教程页嵌 docs.html 犯过同款错误已修,此处照搬 docs.css 修法) ============ */
/* FastWork renderer/css/公共视觉.css 全局规则同款照抄;只写 ::-webkit-scrollbar,
   禁加 scrollbar-width:thin(Chromium 下会反杀伪元素触发原生滚动条,软件侧同教训) */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #d4d4d8;
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a1a1aa;
}

::-webkit-scrollbar-corner {
  background: transparent;
}