/* =========================================================================
   ccrelay 用户中心样式（纯静态，零第三方依赖）
   分层：1. tokens  2. base  3. sections

   【token 同步约束】本文件 :root 里凡与 internal/adminui/assets/css/tokens.css
   同名的 token，必须与其**亮色段**逐值一致：改一处必须同步改另一处。官网与
   控制台是同一品牌的两个界面，衔接处（官网「进入控制台」）不允许出现纸底色 /
   圆角 / 动效时长的跳变。
   —— 官网只取用得到的子集：不引入 --danger / --ok / --warn（官网全站无红黄）、
      --scrim-* / --space-* / --text-disabled（官网无浮层遮罩、无禁用态控件）。
      少取可以，取了就必须同值。--accent-text 2026-07-31 已取入（见下方该 token）。
   —— 反向的例外只有一个：--ok-text 是**官网独有**、tokens.css 里没有的 token，
      不是那边漏加。理由写在下方该 token 处，两侧注释对得上。
   —— --terminal-* 是官网独有别名，取 tokens.css **暗色段**同名值：
      bg / border / text / text-secondary / accent / ok。官网整体仅亮色，
      终端卡片是局部反色，不做主题切换。
   —— 唯一有意保留的差异是 --shadow-sm / --shadow-lg（官网双层 / 后台单层，
      2026-07-30 已定论保留，不是漏改）；差在哪、为什么、什么情况下才该并回去，
      见下方该 token 处注释。除此之外出现任何不同值都是漂移，按上面的约束修掉。
   ========================================================================= */

/* ---------------------------------------------------------------------- */
/* 1. tokens                                                              */
/* ---------------------------------------------------------------------- */

:root {
  color-scheme: light;

  --bg: #FAF8F3;
  --bg-subtle: #F1EDE3;
  --surface: #FFFFFF;
  --text: #26231F;
  --text-secondary: #6E685F;
  --border: #E6E1D5;
  --accent: #C15F3C;
  --accent-hover: #A84F30;
  --accent-soft: #F7E8DF;
  --on-accent: #FFF9F2;

  /* 赭橙作「文字色」时的深色变体（与 tokens.css 亮色段同名同值，改一处必须同步）：
     --accent 对白底只有 4.23:1、对 --bg 3.98:1、对 --bg-subtle 3.61:1、对 --accent-soft
     3.53:1，全部低于 WCAG AA 小字的 4.5:1——而官网拿 accent 当文字色的地方几乎全是
     11–15px 的 kicker / eyebrow / 徽标 / 状态条。本 token 在这四种底上分别是
     6.13 / 5.77 / 5.24 / 5.13:1，色相与 --accent-hover 同族，只压暗一档不改观感。
     填充 / 描边 / 独立装饰图标只需 3:1（accent 最低那档 3.53 仍合格），继续用 --accent。 */
  --accent-text: #9C4A2A;

  /* 正向绿作「文字色」时的深色变体。**官网单边有、tokens.css 没有**，原因写清楚免得
     下一个人当成漏同步：后台亮色段的 --ok 是 #2E6B4F，对 surface / bg-subtle 分别
     6.30 / 5.39:1，本来就够用，不需要再配一个文字变体；官网这边压根没引入
     --ok / --danger / --warn 这组语义色（全站无红黄），正向绿一直是拿深色终端块的
     --terminal-string #7CBA98 顶替的，而它在纸白底上只有 2.25:1（对勾、有货状态、
     TUN 泳道全中招）。故官网只按用途补这一个文字色，值直接取后台 --ok 的 #2E6B4F
     —— 同品牌不另造第二个绿；将来官网若真要引入完整语义色组，把它并回 --ok 即可。
     实测：surface 6.30 / --bg 5.94 / --bg-subtle 5.39 / --accent-soft 5.27 /
     facet-tag 底 #EAF4EE 5.60 / icon-chip 底 #EEF6F1 5.73:1，官网出现过的浅底全过。
     （任务 PRD 建议的 #2F7A57 只有白底 5.20、--accent-soft 底 4.34:1，而 claude 页
     对比表「含」单元格恰好落在 --accent-soft 的推荐列上，故取更深的 #2E6B4F。） */
  --ok-text: #2E6B4F;

  /* 暖棕调分层阴影（替代灰阴影）：柔、暖、有层次。仅两档。

     【有意差异 · 已定论】--shadow-sm 与 --shadow-lg 是本文件相对 tokens.css 亮色段
     仅有的两个不同值的 token，2026-07-30 逐值对齐时已裁定**保留双层，不并回单层**。

     差在哪：tokens.css 单层（sm: 0 1px 2px …0.06；lg: 0 16px 40px -16px …0.16）；
             官网这里是双层——主投影之外多一层更近更淡的接触阴影。
     为什么：这不是遗忘导致的漂移，是两次独立的设计决策——后台 9f07c7a 收成单层，
             官网 87788cc「暖墨刊物」精修改成双层。两侧投影色同族 rgba(120, 72, 45)，
             官网→控制台的衔接处只有层次深浅差、不跳色相，够不上「像两个产品」。
     什么情况下才该并回去：只有当两边的阴影语言被重新统一（官网收回单层，或后台改用
             双层刊物阴影）时才动，且必须在同一次改动里改两侧。除此之外**不要单改
             任一侧**——单改一侧就把这条有意的差异变成真的漂移。 */
  --shadow-sm: 0 1px 2px rgba(120, 72, 45, 0.06), 0 1px 1px rgba(120, 72, 45, 0.04);
  --shadow-lg: 0 16px 36px -10px rgba(120, 72, 45, 0.16), 0 6px 14px rgba(120, 72, 45, 0.07);

  --radius-control: 10px;
  --radius-card: 14px;
  --radius-panel: 18px;
  --radius-full: 999px;

  --font-serif: Georgia, "Palatino Linotype", "Songti SC", STSong, SimSun, serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 360ms;

  /* 终端卡片局部 dark token 值，逐值取自 adminui tokens.css 暗色段：
     bg / border / text / text-secondary / accent / ok（同步约束见文件头）。 */
  --terminal-bg: #1A1715;
  --terminal-border: #393229;
  --terminal-text: #ECE7DF;
  --terminal-muted: #A49D91;
  --terminal-cmd: #E0805A;
  /* ⚠ 本 token 的定位是**深色终端块内的语法高亮色**（= tokens.css 暗色段 --ok），
     它只保证在 --terminal-bg 上可读（7.93:1）。**不要拿它当亮底的文字色或图标色**：
     在纸白底上只有 2.25:1，连非文本的 3:1 都过不去。2026-07-31 前散落在
     .plan-table .cell-yes / .price-points .icon-inline / .price-stock.is-in-stock /
     .tun-lane-path.is-proxy / .facet.is-ok / .guide-callout.is-success / .cover-item.is-in /
     .check-box:checked / .axis-final-dot 等十余处的亮底用法已全部改用 --ok-text；
     现存亮底用法应为零，新代码同理（.tk-str 与终端标题栏圆点在暗底，是唯一合法用法）。 */
  --terminal-string: #7CBA98;

  /* 示意图骨架用暖灰（介于 --border 与 --bg-subtle 之间） */
  --sketch-strong: #DCD6CA;
  --sketch-soft: #E7E2D6;
  --scrollbar-thumb: #D6D0C4;
}

/* ---------------------------------------------------------------------- */
/* 2. base                                                                */
/* ---------------------------------------------------------------------- */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

body {
  position: relative;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: clip;
}

/* 纸纹颗粒已移除：以干净纸面为准，不做噪点叠层（用户审美：克制不突兀）。 */
/* main 只保留 position: relative，**不得再给 z-index**（07-30）：z-index 会让
   main 成为层叠上下文，把内部 position: fixed 的教程页顶栏（.guide-progress
   z-index 101 / .guide-stepper-mini z-index 90，随 below-nav 移进 main）整体压到
   main 这一层——进度条会被 .site-nav(100) 盖住，步骤条滚到底部时会被
   .site-footer 的不透明底遮掉。去掉后两者回到根层叠上下文，层级关系与移动前一致。
   .site-footer 的 z-index: 1 保留：它高于 main 内 z-index: auto 的定位元素，
   又低于步骤条的 90，两边都对。 */
main { position: relative; }

.site-footer { position: relative; z-index: 1; }

/* Skip link：body 内第一个可聚焦元素，键盘一次 Tab 直达 <main id="main">。
   默认移出视口（fixed 定位，不占位、不影响任何页面布局），获得焦点才归位到
   左上角。纯 HTML/CSS——禁用 JS 一样可用。z-index 高于 .site-nav(100) 与教程页
   进度条(101)，聚焦态不会被固定顶栏盖住。 */
.skip-link {
  position: fixed;
  top: 8px;
  left: -9999px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

/* 用 :focus 而非 :focus-visible：skip link 只有键盘能到达，且必须在任何浏览器
   的启发式判定下都现身。焦点圈由全局 :focus-visible 规则补。 */
.skip-link:focus { left: 16px; }

::selection { background: var(--accent-soft); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-full);
  border: 3px solid var(--bg);
}

h1, h2, h3 { margin: 0; text-wrap: balance; }

a { color: inherit; }

.container { max-width: 1120px; margin: 0 auto; }
.container-narrow { max-width: 720px; }

.section { padding: 112px 24px; }

/* 段落氛围：从纯色升级为极低对比的暖渐变 wash，制造空气感（不脏不抢文字） */
/* rgba(193, 95, 60) = --accent 的数值展开。这里**不改 color-mix()**：不支持 color-mix
   的浏览器会把整条 background-image 判为无效并丢弃，公开营销页上直接掉一层底纹，
   而收益只是少一处字面量（07-30 已就此定论，本次逐处复核后维持）。降级有回落路径的
   位置（border-color 之类）才换 color-mix，见 shared.css 的 .contact-panel。
   改 --accent 时这两处要跟着改。 */
.section-alt {
  background-color: var(--bg-subtle);
  background-image: radial-gradient(120% 90% at 100% 0%, rgba(193, 95, 60, 0.05), rgba(193, 95, 60, 0) 60%),
    radial-gradient(100% 80% at 0% 100%, rgba(120, 72, 45, 0.04), rgba(120, 72, 45, 0) 55%);
}

/* 编辑式分区装饰：居中细 hairline + 菱形 ornament（点到为止，可选用） */
.section-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  color: var(--border);
}

.section-rule::before,
.section-rule::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border));
}

.section-rule::after { background: linear-gradient(90deg, var(--border), transparent); }

.section-rule i {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: var(--accent);
  opacity: 0.7;
}

/* 刊物 kicker：前置赭橙短 tick + 更小字号 + 更大字距。
   12px 小字用 --accent-text（--accent 在 .section-alt 的 --bg-subtle 底上只有 3.61:1，
   而 eyebrow 是全站最高频的标签样式）；前置 tick 一并压暗，整条标签保持单色。 */
.eyebrow {
  display: flex;
  align-items: center;
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: none;
  color: var(--accent-text);
}

.eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 24px;
  height: 1px;
  margin-right: 12px;
  background: var(--accent-text);
}

/* 居中标题区里的 kicker 同样居中（tick 仍在文字左侧） */
.section-head-center .eyebrow,
.hero .eyebrow { justify-content: center; }

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.section-head-center { text-align: center; }

/* 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

/* 极克制的暖渐变（顶部叠一层暖高光 rgba → accent）+ 精修暖阴影 */
.btn-primary {
  background-image: linear-gradient(180deg, rgba(255, 249, 242, 0.16), rgba(255, 249, 242, 0));
  background-color: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 1px 2px rgba(120, 72, 45, 0.18),
    inset 0 1px 0 rgba(255, 249, 242, 0.18);
}

.btn-primary:hover {
  background-color: var(--accent-hover);
  box-shadow: 0 2px 6px -2px rgba(120, 72, 45, 0.24),
    inset 0 1px 0 rgba(255, 249, 242, 0.2);
}

.btn-outline {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* hover 后文字落在 --accent-soft 底上：15px 文字走 --accent-text（5.13:1），
   描边是非文本，继续用 --accent（4.23:1，只需 3:1）。 */
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent-text);
  background: var(--accent-soft);
}

/* 文字链接：下划线滑入 */
.link-underline {
  position: relative;
  text-decoration: none;
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out);
}

.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-fast) var(--ease-out);
}

.link-underline:hover { color: var(--text); }

.link-underline:hover::after,
.link-underline:focus-visible::after { transform: scaleX(1); }

/* 入场动效：JS 加 .is-visible 一次性触发，错峰由内联 animation-delay 控制。
   隐藏态仅在 html.js 下生效，禁用 JS 时内容保持可见。 */
html.js [data-reveal]:not(.is-visible) { opacity: 0; }

[data-reveal].is-visible {
  animation: landing-rise var(--dur-base) var(--ease-out) backwards;
}

@keyframes landing-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes landing-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------------------------------------------------------------------- */
/* 3. sections                                                            */
/* ---------------------------------------------------------------------- */

/* 导航 */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* = --bg #FAF8F3 带透明度（毛玻璃底不能用 var()，要的是纸底色本身的半透明版）。
     改 --bg 必须同步改这里，否则顶栏会在纸面上透出一条不同色温的带；
     另一处同类副本是 guide.css 的 .guide-stepper-mini。 */
  background: rgba(250, 248, 243, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.site-nav.scrolled { border-bottom-color: var(--border); }

.nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  height: 64px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* 品牌位（07-31 起是 logo 图，不再是文字）。
   品牌规范出处：brand kit README「留白与最小尺寸」——
     · 横版 logo 显示宽度不低于 140px，低于该宽度改用双 C 图标；
     · 不得拉伸、压扁、旋转、加阴影或自行改色。
   落成 CSS 而不是靠人记：
     · 只写 width、height 一律 auto —— 浏览器按 SVG 内在比例算另一维，任何一维
       单独变化都不会失真，「不得拉伸/压扁」由此结构性成立（别改成同时写死两维）；
     · width 的 clamp 下限 150px > 规范的 140px 下限，留 10px 余量，所以横版永远
       合规；真正窄的屏幕由下面的断点整张换成双 C 图标，而不是把横版继续缩小。
   不加任何 filter / box-shadow / transform，规范禁止。 */
.brand {
  display: flex;
  align-items: center;
  color: var(--text);
  text-decoration: none;
}

.brand-logo {
  display: block;
  width: clamp(150px, 17vw, 176px);
  height: auto;
}

/* 双 C 图标：≤480px 才登场（见下方断点）。桌面隐藏但仍在 DOM 里，见 nav.gohtml
   里关于「两个 <img> 而非 <picture>」的取舍说明。 */
.brand-mark {
  display: none;
  width: 34px;
  height: auto;
}

/* ≤480：横版在这个宽度下会和 44px 汉堡挤在一起（360px 机型上占掉六成行宽），
   按品牌规范换成双 C 图标——规范要的是「宽度不够就换图标」，不是「把横版压小」。 */
@media (max-width: 480px) {
  .brand-logo { display: none; }
  .brand-mark { display: block; }
}

.nav-right { display: flex; align-items: center; gap: 32px; }

.nav-links { display: flex; align-items: center; gap: 24px; }

.nav-links a { font-size: 15px; }

.nav-cta { min-height: 36px; padding: 0 18px; }

/* ---------------------------------------------------------------------- */
/* 站点外壳：移动折叠导航 + 当前页高亮（唯一允许进 landing.css 的新增段）   */
/* checkbox-hack：零 JS、无 details 隐藏陷阱、单份导航不重复            */
/* ---------------------------------------------------------------------- */

/* ≥769：toggle checkbox 与汉堡 label 都从渲染与 Tab 序里彻底消失，nav 行常态横排。
   checkbox 此前只是 opacity: 0（仍在 Tab 序里）：桌面从头 Tab 会停在一个完全看不见
   的地方，按空格还会翻转它——展开规则在 ≤768 媒体查询里，于是 aria-expanded 变成
   true 而屏幕上什么都没发生。display: none 一次消灭这两件事：既没有幽灵停靠点，
   开关也不进无障碍树，桌面不会再对外声明一个根本不存在的展开态。
   （aria-* 现在挂在 checkbox 而不是 label 上，隐藏的必须是这一行。） */
.nav-toggle-input { display: none; }

.nav-toggle { display: none; }

.nav-actions { display: flex; align-items: center; gap: 12px; }

/* 语言切换器（07-31 双语站）：文字链而非按钮——它不是转化动作，与两个 nav-cta
   并列成第三个按钮会稀释「进入控制台」这个唯一主动作。热区按触控 44px 给足
   （min-height + 横向 padding），桌面视觉高度仍与 36px 的 nav-cta 对齐。
   13px 小字落在顶栏的 --bg 半透明底上，用 --text-secondary（AA 已核）。 */
.nav-lang {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-control);
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.nav-lang:hover { color: var(--text); background: var(--bg-subtle); }

/* 当前页高亮：常驻赭橙文字 + 常驻下划线（从 guide.css 迁入）。
   15px 文字：顶栏底是 --bg 的半透明版，--accent 只有 3.98:1，走 --accent-text。 */
.nav-links a.is-current { color: var(--accent-text); }

.nav-links a.is-current::after { transform: scaleX(1); }

@media (max-width: 768px) {
  /* 下拉面板的定位上下文：品牌左、汉堡右，面板绝对定位贴 nav-inner */
  .nav-inner { position: relative; }

  /* ≤768：checkbox 回到 Tab 序（原生 Space 开合，零 JS 可用），但移出视觉流——
     用户看到、点到的是紧邻的 label。它不是「被隐藏的控件」，是「皮肤在别处的控件」，
     所以不能用 display: none / visibility: hidden（那会连键盘一起拿掉）。 */
  .nav-toggle-input {
    display: block;
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  /* 汉堡 label：热区 44px，置于品牌右侧 */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    border-radius: var(--radius-control);
    color: var(--text);
    cursor: pointer;
    z-index: 2;
  }

  /* 焦点环画在 label 上：真正拿到焦点的是 opacity: 0 的 checkbox，全局
     :focus-visible 规则落在它身上等于画在空气里（旧行为：键盘用户完全看不到
     自己停在哪）。相邻兄弟选择器把环转嫁到可见的汉堡上，无需 :has()、无需 JS。
     用 --accent-text 而非全局环的 --accent：顶栏底是 --bg 的半透明版，赭橙
     在这块底上偏浅。谁将来给 label 加 tabindex，请把 .nav-toggle:focus-visible
     一并加进这条选择器列表。 */
  .nav-toggle-input:focus-visible + .nav-toggle {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
  }

  .nav-toggle svg { width: 24px; height: 24px; }

  /* 收起态：连接信息隐藏，作为绝对定位下拉面板 */
  .nav-right {
    display: none;
    position: absolute;
    top: calc(64px + 8px);
    right: 20px;
    left: 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lg);
  }

  /* 展开态：勾选 checkbox 后下拉面板出现 */
  .nav-toggle-input:checked ~ .nav-right { display: flex; }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 8px;
  }

  .nav-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }

  .nav-cta { min-height: 44px; width: 100%; }

  /* 折叠面板里语言切换器与导航链接同为整行落点，热区补到 44px。 */
  .nav-lang {
    min-height: 44px;
    justify-content: flex-start;
    padding: 0 8px;
  }
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 176px 24px 112px;
}

.hero-glow {
  position: absolute;
  top: -180px;
  right: -140px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  /* 同 .section-alt：background 上的 --accent 数值展开保持字面量，
     color-mix 不被支持时整条 background 会失效（首屏光晕直接消失）。 */
  background: radial-gradient(closest-side, rgba(193, 95, 60, 0.5), rgba(193, 95, 60, 0));
  opacity: 0.28;
  pointer-events: none;
  animation: glow-drift 20s ease-in-out infinite alternate;
}

@keyframes glow-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-64px, 48px, 0); }
}

.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0 auto;
  max-width: 800px;
}

/* 赭橙 + 衬线斜体强调词。去掉手写感墨笔下划线（不规则笔触抢戏），
   改为一条干净、细、克制的直线下划线（紧贴文字、不夸张）。 */
.accent-word {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.14em;
  text-decoration-color: var(--accent);
}

.hero-sub {
  margin: 16px auto 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 560px;
}

.hero-actions {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Hero 产品示意框（纯 CSS，非真实截图） */
.hero-shot {
  position: relative;
  max-width: 880px;
  margin: 64px auto 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  text-align: left;
}

.shot-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}

.shot-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sketch-strong);
}

.shot-address {
  flex: 1;
  min-width: 0;
  max-width: 360px;
  margin-left: 8px;
  padding: 3px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shot-body {
  display: grid;
  grid-template-columns: 168px 1fr;
  min-height: 300px;
}

.shot-side {
  background: var(--bg-subtle);
  border-right: 1px solid var(--border);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shot-side-brand {
  width: 64px;
  height: 12px;
  border-radius: var(--radius-full);
  background: var(--sketch-strong);
  margin-bottom: 8px;
}

.shot-side-item {
  height: 10px;
  width: 80%;
  border-radius: var(--radius-full);
  background: var(--sketch-soft);
}

.shot-side-item.is-active {
  position: relative;
  width: 90%;
  height: 14px;
  background: var(--accent-soft);
}

.shot-side-item.is-active::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

.shot-main {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.shot-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.shot-stat {
  position: relative;
  height: 52px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
}

.shot-stat::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 13px;
  width: 42%;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--sketch-soft);
}

.shot-stat::after {
  content: "";
  position: absolute;
  left: 12px;
  bottom: 13px;
  width: 24%;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
}

.shot-cards {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.shot-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shot-chip {
  position: relative;
  width: 48px;
  height: 14px;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
}

.shot-chip::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

.shot-line {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--sketch-soft);
}

.shot-line.short { width: 60%; }

/* 核心特性：bento 网格 */
.feature-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* 主卡 2×2，与五张标准卡恰好铺满 3×3 槽位，不留空洞 */
.feature-main { grid-column: span 2; grid-row: span 2; }

.feature-points {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.feature-points li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.feature-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}

.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-fast) var(--ease-out);
}

/* 克制：hover 不位移、不加重阴影，仅描边轻微染 accent */
.feature-card:hover { border-color: var(--accent); }

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-control);
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.feature-icon svg { width: 20px; height: 20px; }

.feature-card h3 {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.feature-card p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 65ch;
}

/* 工作原理：左文右图（5fr / 7fr 不对称） */
.how-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: center;
}

.how-points {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.how-points li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 65ch;
}

.how-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.flow {
  display: flex;
  align-items: stretch;
}

.flow-node {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 20px 16px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), var(--shadow-sm);
}

.flow-node strong {
  font-size: 16px;
  font-weight: 600;
  text-wrap: balance;
}

.flow-node span { font-size: 13px; color: var(--text-secondary); }

/* 中枢节点点睛：accent-soft 底 + accent 细边（克制，去掉光环抢戏） */
.flow-hub {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* 连接：实线 hairline + 末端三角箭头（示意而非生硬虚线）。
   align-self:center 让 1px 连接线落在两卡之间的垂直中线（卡片中部），
   不被 .flow 的 align-items:stretch 拉到卡顶。线用 border、箭头用
   text-secondary 提升可见度（明显可辨、非赭橙、不刺眼）。 */
.flow-link {
  position: relative;
  align-self: center;
  flex: 0 1 48px;
  min-width: 24px;
  height: 1px;
  border-top: 1px solid var(--border);
}

.flow-link::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent var(--text-secondary);
}

/* 快速开始：左码右文（7fr / 5fr，与上区交替） */
.quickstart-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 64px;
  align-items: center;
}

.terminal {
  background: var(--terminal-bg);
  border: 1px solid var(--terminal-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.terminal-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--terminal-border);
}

.terminal-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(164, 157, 145, 0.4);
}

/* 标题栏圆点暖调点睛（仅前三点，靠透明度分级而非引入红黄）。
   三个 rgba 分别是 --terminal-cmd #E0805A / --terminal-muted #A49D91 /
   --terminal-string #7CBA98 的半透明版：改上面那几个 token 要同步改这里。 */
.terminal-bar .terminal-dot:first-child { background: rgba(224, 128, 90, 0.6); }
.terminal-bar .terminal-dot:nth-child(2) { background: rgba(164, 157, 145, 0.5); }
.terminal-bar .terminal-dot:nth-child(3) { background: rgba(124, 186, 152, 0.5); }

.terminal-copy {
  margin-left: auto;
  min-height: 30px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--terminal-border);
  border-radius: var(--radius-full);
  color: var(--terminal-muted);
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.terminal-copy:hover {
  color: var(--terminal-text);
  border-color: var(--terminal-muted);
}

/* 一个块可以有两个复制按钮（默认版 / 变体版，各自只复制自己那一条命令）：
   第一个仍靠 margin-left:auto 推到右侧，后续按钮紧随其后。 */
.terminal-copy + .terminal-copy {
  margin-left: 0;
}

.terminal-body {
  margin: 0;
  padding: 20px 20px 24px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--terminal-text);
  white-space: normal;
  counter-reset: line;
}

.terminal-line {
  position: relative;
  display: block;
  padding-left: 36px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  counter-increment: line;
}

/* 行号：教程页每个代码块都有。opacity 0.55 时实际落色 #666159，对 --terminal-bg
   只有 2.90:1；0.75 是 4.31:1 仍不够，0.8（落色 #888278）才到 4.68:1。
   （这三个数按浏览器的实际做法算：先把 --terminal-muted 以 alpha 在 8bit sRGB 上
   合成到 --terminal-bg，再对合成色算对比度。不四舍五入到 8bit 会得到 2.89/4.28/4.70，
   结论一致。）相对正文（--terminal-text 14.5:1）依然明显次要，不会与命令抢读。 */
.terminal-line::before {
  content: counter(line);
  position: absolute;
  left: 0;
  width: 22px;
  text-align: right;
  color: var(--terminal-muted);
  opacity: 0.8;
}

.terminal-line.tk-gap { margin-top: 14px; }

.tk-comment { color: var(--terminal-muted); }
.tk-cmd { color: var(--terminal-cmd); }
.tk-str { color: var(--terminal-string); }

.steps {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.steps li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* 序号圆点：13px 白字。--on-accent 对 --accent 只有 4.04:1，底色压暗一档到
   --accent-hover 后是 5.25:1。同一手法见 shared.css 的 .plan-badge / .price-badge；
   .btn-primary 不这么改——它的 hover 已经占用 --accent-hover，换底会拆掉悬停梯度，
   且那是官网与后台 button.primary 共用的品牌决策，要改得两侧一起改。 */
.step-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-hover);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 600;
}

.step-text h3 {
  margin: 3px 0 4px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.step-text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 65ch;
}

/* FAQ */
.faq-list { margin-top: 48px; }

.faq-item { border-bottom: 1px solid var(--border); }

.faq-item:first-child { border-top: 1px solid var(--border); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  transition: transform var(--dur-fast) var(--ease-out);
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: var(--text-secondary);
  border-radius: var(--radius-full);
}

.faq-icon::before {
  left: 0;
  right: 0;
  top: 7px;
  height: 2px;
}

.faq-icon::after {
  top: 0;
  bottom: 0;
  left: 7px;
  width: 2px;
}

.faq-item[open] .faq-icon { transform: rotate(45deg); }

.faq-item p {
  margin: 0 0 20px;
  padding: 0 4px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 65ch;
}

/* 页脚 */
.site-footer {
  background: var(--bg-subtle);
  padding: 64px 24px 40px;
}

.footer-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.footer-brand {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
}

.footer-tagline {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 65ch;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.footer-links a { font-size: 15px; }

/* 法务链接行：产品导航下方一条独立的法务条款入口，细分隔线领起 */
.footer-legal-row {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.footer-legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 22px;
}

.footer-legal a { font-size: 13px; white-space: nowrap; }

.footer-meta { margin-top: 28px; }

.footer-meta p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

/* 收尾 CTA：各页 footer-cta 块共用（class 仍叫 .guide-cta）。规则放在始终
   加载的 landing.css，确保首页（仅加载 shared.css + home.css，不含 guide.css）
   也有与其它页一致的下边距与分隔线，避免 CTA 直接贴住下方页脚导航。

   07-30 起 CTA 渲染在 </main> 之前（含 h2 与主转化按钮，属正文不属 contentinfo），
   由 .footer-cta-band 补上原先由 .site-footer 提供的底色与左右留白，视觉上与紧随
   其后的页脚仍是连续的一段；分隔线到页脚导航的间距改由页脚自身的上内边距给出，
   故这里去掉 margin-bottom（留着会从 band 的底边溢出、和页脚内边距叠加）。 */
.footer-cta-band {
  background: var(--bg-subtle);
  padding: 64px 24px 0;
}

.guide-cta {
  padding-bottom: 56px;
  border-bottom: 1px solid var(--border);
}

.guide-cta-actions { justify-content: center; }

/* 收尾 CTA 小字（首页与服务介绍页各有一条）。原先只定义在 home.css，而服务介绍页
   加载的是 shared.css / guide.css / services.css——同一个 class 在那页拿不到任何
   样式，小字与上方按钮同号同色、挤在一起。footer-cta 块是全站共享的结构，它内部
   用到的 class 一律定义在始终加载的 landing.css，别再散回单页样式表。 */
.footer-cta-note {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ---------------------------------------------------------------------- */
/* 响应式：1200+ 满栅格 / 768 两列 / 375 单列                              */
/* ---------------------------------------------------------------------- */

@media (max-width: 900px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }

  /* 两列下主卡只跨一行，末卡跨两列补齐，保持无空洞 */
  .feature-main { grid-row: auto; }

  .feature-grid .feature-card:last-child { grid-column: span 2; }

  .how-grid,
  .quickstart-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

@media (max-width: 768px) {
  .section { padding: 64px 20px; }

  .hero { padding: 136px 20px 64px; }

  .flow { flex-direction: column; }

  .flow-node { width: 100%; flex: 0 0 auto; }

  .flow-link {
    flex: 0 0 auto;
    min-width: 0;
    width: 1px;
    height: auto;
    min-height: 32px;
    border-top: none;
    border-left: 1px solid var(--border);
  }

  .flow-link::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -1px;
    transform: translateX(-50%);
    border-width: 7px 5px 0 5px;
    border-color: var(--text-secondary) transparent transparent transparent;
  }

  .terminal-copy { min-height: 36px; }

  .site-footer { padding: 48px 20px 32px; }

  /* CTA 承载条跟随页脚的窄屏内边距，两段底色仍然连成一片 */
  .footer-cta-band { padding: 48px 20px 0; }

  /* 窄屏页脚导航：链接整条换行，逐条 nowrap 防「使用规范」「进入控制台」内部断字 */
  .footer-links { flex-wrap: wrap; gap: 14px 22px; }

  .footer-links a { white-space: nowrap; }
}

@media (max-width: 600px) {
  .feature-grid { grid-template-columns: 1fr; }

  .feature-main { grid-column: auto; grid-row: auto; }

  .feature-grid .feature-card:last-child { grid-column: auto; }

  .shot-body { grid-template-columns: 1fr; min-height: 220px; }

  .shot-side { display: none; }

  .shot-cards { gap: 8px; }

  .shot-main { padding: 14px; }
}

/* ---------------------------------------------------------------------- */
/* 动效降级：纯淡入、光斑停止                                              */
/* ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .hero-glow { animation: none; }

  [data-reveal].is-visible { animation: landing-fade 200ms ease both; }

  /* ⚠ 入场动效的可见性保险（07-30）。
     常态链路：landing.js 无条件给 <html> 加 .js（隐藏态生效）→ IntersectionObserver
     交叉时加 .is-visible → 上面这条隐藏规则不再命中 → opacity 回到初始值 1。
     动画只是装饰，不是显形手段——这条链在 reduce 下同样成立（观察器没有 reduce 分支）。
     但显形依赖「JS 一定跑到加 class 那一步」：观察器回调没触发（元素高过视口 10 倍、
     阈值 0.1 永不越过）、脚本被拦截或报错时，元素就永远停在 opacity: 0。
     reduce 下本就不该有入场动效，索性把隐藏前置态直接抹平：同选择器同特异度、
     位置更靠后即可覆盖，不需要 !important。 */
  html.js [data-reveal]:not(.is-visible) { opacity: 1; }
}

/* ====================================================================== */
/* 4. engraved 雕版细线图标体系（全站共享，sprite 在 base.gohtml 注入）    */
/*                                                                        */
/*    .icon       内联图标本体：用 currentColor 控暖墨色、统一尺寸。       */
/*    .icon-chip  克制圆角 chip 容器：白底 / 细暖边 / 极柔阴影。           */
/*    语义态通过 chip 外层类切换 chip 的边/底色：                          */
/*      （默认中性）surface 底 + border 边 + text 墨；                     */
/*      .is-ok  正向 → --ok-text 绿（**不是** --terminal-string，那个只在  */
/*              深色终端块内可读，纸白底 2.25:1）；                        */
/*      .is-risk 风险 → --accent-hover 赭橙（chip 底是 --accent-soft）。   */
/*    图标本体颜色随 chip 的 color（currentColor）走，sprite 内 .ac/.acf  */
/*    始终保持 accent 点睛，不随语义态乱变；中性/正向态下若不希望出现赭橙  */
/*    点睛，用 .icon--mono（把 accent 描边/填充也并入 currentColor）。     */
/* ---------------------------------------------------------------------- */

/* 图标本体：随父级 color 着色，行内基线对齐，统一 1em 方形 */
.icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
  color: var(--text);
  fill: none;
  vertical-align: -0.18em;
}

.icon svg,
.icon use { display: block; width: 100%; height: 100%; }

.icon > svg { width: 100%; height: 100%; }

/* mono 变体：把 sprite 内 accent 笔画也并回 currentColor（中性场景去点睛）。
   通过把 use 的 color 传递给内部 .ac/.acf 无法做到，故用 currentColor 覆写：
   仅在确需全单色处加 .icon--mono，sprite 默认保留赭橙点睛。 */
.icon--mono { --accent: currentColor; }

/* chip 容器：克制圆角方 chip，白底细暖边极柔阴影，不喧宾夺主 */
.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-control);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.icon-chip .icon { width: 24px; height: 24px; vertical-align: 0; color: inherit; }

/* 语义 chip：仅切 chip 的底/边/墨色，图标本体随之；accent 点睛仍由 sprite 决定 */
.icon-chip.is-ok {
  background: #EEF6F1;
  border-color: #D4E8DD;
  color: var(--ok-text);
}

.icon-chip.is-risk {
  background: var(--accent-soft);
  border-color: #EAD2C6;
  color: var(--accent-hover);
}

/* accent chip：饱和点睛（呼应既有 feature-icon 风格，accent-soft 底） */
.icon-chip.is-accent {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent);
}

/* 小一号 chip（内联标签前缀、facet 前导用） */
.icon-chip.icon-chip--sm { width: 32px; height: 32px; }

.icon-chip.icon-chip--sm .icon { width: 18px; height: 18px; }

/* 无 chip 内联：图标直接随文字色，跟随排版基线（标签/列表项前缀用） */
.icon-inline {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.16em;
  color: inherit;
}

/* ====================================================================== */
/* 5. 编辑式标记 / facet（policy / claude / guide 复用）                   */
/*                                                                        */
/*    .facet      为什么 / 正确做法 / 违规后果 一类要点段的统一形制：      */
/*    细 accent 竖线（颜色按语义）+ engraved 图标 chip + 衬线标签 + 正文。 */
/*    语义：默认中性 / .is-ok 绿 / .is-risk 赭橙。                         */
/* ---------------------------------------------------------------------- */

.facet {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 2px 0 2px 18px;
  /* 细竖线（语义色），编辑式领起 */
  border-left: 2px solid var(--border);
}

.facet + .facet { margin-top: 20px; }

/* 正向绿统一走 --ok-text：竖线 / 图标 chip / 标签 / 胶囊同色，
   --terminal-string 在纸白底只有 2.25:1（连非文本的 3:1 都不到）。 */
.facet.is-ok { border-left-color: var(--ok-text); }

.facet.is-risk { border-left-color: var(--accent); }

/* facet 图标用小 chip；语义态映射到 chip 语义类的等价配色 */
.facet > .icon-chip { align-self: start; }

.facet-body { min-width: 0; }

/* 衬线标签：刊物式小标签，颜色按语义；前置无装饰，靠竖线传意 */
.facet-label {
  display: block;
  margin: 0 0 4px;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

.facet.is-ok .facet-label { color: var(--ok-text); }

.facet.is-risk .facet-label { color: var(--accent-hover); }

.facet-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 65ch;
}

/* 衬线小标签胶囊（可选）：facet 标签也可做成克制胶囊形（与 law-badge 同族） */
.facet-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  padding: 3px 11px 3px 10px;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.facet-tag .icon-inline { width: 14px; height: 14px; }

/* 11px 胶囊：原 #3F7A5C 对 #EAF4EE 恰好 4.50:1（四舍五入才勉强及格），换 --ok-text 后 5.60:1 */
.facet.is-ok .facet-tag { background: #EAF4EE; color: var(--ok-text); }

.facet.is-risk .facet-tag { background: var(--accent-soft); color: var(--accent-hover); }

@media (max-width: 600px) {
  .facet { gap: 12px; padding-left: 14px; }
}

/* ====================================================================== */
/* 6. 卡片 / 区块细节统一（刊物级收口）                                    */
/*                                                                        */
/*    .card-detail  通用卡片细节 mixin 类（可加在 feature-card 等之外的    */
/*    页面专属卡片上）：hairline 暖边 + 极柔阴影 + 内高光 + 无 hover 位移。 */
/*    .kicker       eyebrow 之外的轻量 kicker：前置赭橙短横（与 .eyebrow   */
/*    同族，供卡内/小标题前置；.eyebrow 仍是区块主 kicker）。              */
/* ---------------------------------------------------------------------- */

.card-detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: border-color var(--dur-fast) var(--ease-out);
}

/* 克制：hover 不位移、不加重阴影，仅描边轻微染 accent */
.card-detail:hover { border-color: var(--accent); }

/* 卡内 / 小标题前置 kicker：赭橙短横 + 字距，比 .eyebrow 更轻。
   11px 是全站最小的字号，且会落在 --bg-subtle / --accent-soft 上（服务介绍页的
   对比卡），--accent 在那里只有 3.61 / 3.53:1；短横与文字一同压暗保持单色。 */
.kicker {
  display: inline-flex;
  align-items: center;
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--accent-text);
}

.kicker::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 1px;
  margin-right: 9px;
  background: var(--accent-text);
}

/* ====================================================================== */
/* 5. 动效全局兜底（放在文件末尾，覆盖官网全部样式表）                     */
/*                                                                        */
/*    与后台 internal/adminui/assets/css/tokens.css 的兜底块同款：官网此前 */
/*    只有 landing.css / guide.css 两处点名式 reduce 规则，shared.css /    */
/*    home.css / services.css 完全没有，下划线滑入、FAQ 图标旋转、按钮四   */
/*    属性过渡等十余处动效在「减弱动态效果」下仍满速运行。点名规则保留在   */
/*    各自文件里（更精确的降级，比如 reveal 改纯淡入），这里只做保险层。   */
/*                                                                        */
/*    额外多带 animation-delay / transition-delay 归零（后台那份没有）：   */
/*    landing.js 会给 [data-reveal] 写内联 animation-delay 做组内错峰，    */
/*    内联样式压得过普通规则，只有 !important 能抹掉——用户在页面加载后才  */
/*    打开「减弱动态效果」时，残留的错峰延迟会让区块迟到几百毫秒。         */
/* ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}