/* =========================================================================
   Premise · 落地页 (landing page) — BRUTALIST MONO
   landing.css — 落地页专属组件。链在 colors_and_type.css 之后。

   刻意不引 brutalist.css：那是 app chrome（sidebar / 表格 / 抽屉 / 模态），
   落地页一个都用不上。设计令牌全部来自 colors_and_type.css，这里只实现
   落地页自己的容器，且严格守死同一套法则：
     radius 0 · 2px 纯黑边 · 实心偏移阴影（永不模糊）· 大写 mono 标签
     一个电蓝 + 一个信号黄 · 无渐变无图片无模糊
   ========================================================================= */

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

html { scroll-behavior: smooth; scroll-padding-top: 76px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* ── 布局原语 ──────────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

.sec { padding: 88px 0; border-bottom: var(--bw) solid var(--line); }
.sec--tight { padding: 64px 0; }
.sec--paper { background: var(--paper); }
.sec--surface { background: var(--surface); }
.sec--ink { background: var(--ink); color: var(--surface); }

.sec-head { max-width: 720px; margin-bottom: var(--sp-10); }
.sec-head .t-h2 { font-size: 30px; margin: var(--sp-3) 0 var(--sp-4); }
.sec-head p { margin: 0; color: var(--ink-3); font-size: 15px; }
.sec--ink .sec-head p { color: #b8b8b0; }
.sec--ink .t-h2, .sec--ink .t-h1 { color: var(--surface); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.sec--ink .eyebrow { color: var(--hi); }

/* 轨道一律 minmax(0, 1fr)，不用裸 1fr —— 裸 1fr 等于 minmax(auto, 1fr)，
   轨道会被最宽的 min-content（比如 nowrap 表头）顶开，撑破容器造成横向滚动。 */
.grid { display: grid; gap: var(--sp-5); }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── 招牌容器：黑标签条 + 描边身体 ───────────────────────────────────── */

.block {
  border: var(--bw) solid var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.block-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--ink);
  color: var(--surface);
  padding: 9px var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.block-bar--accent { background: var(--accent); }
.block-bar .tag {
  margin-left: auto;
  color: var(--hi);
  font-size: var(--fs-micro);
}
.block-body { padding: var(--sp-5); }

/* ── 按钮 ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 11px 18px;
  border: var(--bw) solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .08s steps(1), box-shadow .08s steps(1), background .08s steps(1);
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); background: var(--hi); }
.btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }

.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-press); color: var(--on-accent); }

.btn--lg { padding: 14px 26px; font-size: var(--fs-body); }

.btn--ghost { background: transparent; }

.sec--ink .btn { border-color: var(--surface); box-shadow: 2px 2px 0 var(--hi); }
.sec--ink .btn:hover { box-shadow: 3px 3px 0 var(--hi); }

/* ── 顶栏 ─────────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: var(--bw) solid var(--line);
}
.nav-in {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  height: 60px;
}
.brand { display: flex; align-items: center; gap: var(--sp-3); }
.logo-tile {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: var(--bw) solid var(--ink);
  background: var(--hi);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}
.nav-links { display: flex; gap: var(--sp-5); margin-left: var(--sp-4); }
.nav-links a {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 4px 2px;
  border-bottom: var(--bw) solid transparent;
}
.nav-links a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }

/* 中 / EN 切换 —— 两格一体，当前语言反白 */
.lang {
  display: flex;
  border: var(--bw) solid var(--ink);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.lang a {
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  background: var(--surface);
}
.lang a + a { border-left: var(--bw) solid var(--ink); }
.lang a:hover { background: var(--hi); }
.lang a[aria-current="true"] { background: var(--ink); color: var(--surface); }

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero { padding: 76px 0 88px; border-bottom: var(--bw) solid var(--line); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--sp-10);
  align-items: center;
}
.hero-grid > * { min-width: 0; }
.hero h1 {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: var(--sp-4) 0 var(--sp-5);
}
.hero-sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 var(--sp-8);
  max-width: 48ch;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hero-note {
  margin: var(--sp-6) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  color: var(--mute);
  text-transform: uppercase;
}

/* 高亮：信号黄的马克笔感（实心块，不是渐变） */
.hl { background: var(--hi); color: var(--hi-ink); padding: 0 4px; box-decoration-break: clone; }

/* ── 富化表格示意 ─────────────────────────────────────────────────────── */

.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tbl th {
  background: var(--ink);
  color: var(--surface);
  text-align: left;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.tbl th.ai { background: var(--accent); }
.tbl td {
  padding: 10px;
  border-bottom: var(--bw-hair) solid var(--line);
  vertical-align: top;
}
.tbl tr:last-child td { border-bottom: 0; }
.tbl .mono { font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.tbl .faint { color: var(--ink-3); }
.tbl .sel { background: var(--accent-soft); }

.cell-strong { font-weight: 600; }
.cell-meta { display: block; color: var(--ink-3); font-family: var(--font-mono); font-size: 10px; margin-top: 2px; }

/* 运行中的活体点 —— steps() 眨眼，不用缓动 */
.live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--accent);
  border: 1px solid var(--ink);
  animation: blink 1s steps(1) infinite;
  flex: none;
}
@keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: .25; } }

/* 加载态 —— 行进斜纹，不是柔和渐变扫光 */
.hatch {
  background-image: repeating-linear-gradient(
    45deg, var(--surface-3) 0 6px, var(--surface) 6px 12px
  );
  animation: march .6s linear infinite;
}
@keyframes march { to { background-position: 17px 0; } }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border: var(--bw-hair) solid var(--ink);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.chip--hi { background: var(--hi); }
.chip--accent { background: var(--accent-soft); }
.chip--green { background: var(--green-soft); color: var(--green); }

/* ── 业务线卡 ─────────────────────────────────────────────────────────
   四条横带叠起来，读起来像一张印刷规格表：
   蓝标签条 / 灰规格行 / 白描述区 / 编号步骤表。                          */

.tpl { display: flex; flex-direction: column; transition: transform .08s steps(1), box-shadow .08s steps(1); }
.tpl:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--ink); }

.tpl-spec {
  padding: 7px var(--sp-4);
  border-bottom: var(--bw) solid var(--ink);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-2);
}
.tpl-body { padding: var(--sp-4); flex: 1; }
.tpl-desc { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; }

.tpl-steps { margin: 0; padding: 0; list-style: none; border-top: var(--bw) solid var(--ink); }
.tpl-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--sp-3);
  padding: 8px var(--sp-4);
}
.tpl-steps li + li { border-top: var(--bw-hair) solid var(--line); }
.tpl-steps li:hover { background: var(--hi); }
.tpl-steps .n {
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.tpl-steps .s { font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; }
.tpl-steps .d {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  line-height: 1.4;
  margin-top: 2px;
}

/* ── Leads 库示意行 ───────────────────────────────────────────────────── */

.lead-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--sp-3);
  padding: var(--sp-3) 0;
  align-items: center;
}
.lead-row + .lead-row { border-top: var(--bw-hair) solid var(--line); }
.lead-row .cell-strong { grid-column: 1; }
.lead-row .cell-meta { grid-column: 1; margin-top: 0; }
.lead-row .chip { grid-column: 2; grid-row: 1 / span 2; }

/* ── 特性行（图 / 文 交替） ───────────────────────────────────────────── */

.feat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-10);
  align-items: center;
}
.feat > * { min-width: 0; }
.feat + .feat { margin-top: 72px; padding-top: 72px; border-top: var(--bw-hair) solid var(--line); }
.feat--flip .feat-text { order: 2; }
.feat h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  margin: var(--sp-3) 0 var(--sp-4);
}
.feat p { margin: 0 0 var(--sp-4); color: var(--ink-2); font-size: 15px; }
.feat ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); }
/* 项目符号走绝对定位，不用 flex —— flex 会把行内 <b> 拆成独立 flex item，
   「**品牌声音** —— 一句话定位…」这种句子会被劈成两栏。 */
.feat li {
  position: relative;
  padding-left: 20px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.55;
}
.feat li::before {
  content: "▪";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-size: 14px;
  line-height: 1.4;
}

/* 深色区块上的同款列表 */
.lite-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.lite-list li {
  position: relative;
  padding-left: 22px;
  color: #d8d6cd;
  font-size: 14px;
  line-height: 1.6;
}
.lite-list li::before {
  content: "▪";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--hi);
  font-size: 14px;
}
.lite-list b { color: var(--surface); font-weight: 700; }

/* ── 终端块（mono，反白） ─────────────────────────────────────────────── */

.term {
  border: var(--bw) solid var(--ink);
  background: var(--ink);
  color: #e8e6dd;
  box-shadow: var(--shadow);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.75;
  overflow: hidden;
}
.sec--ink .term { border-color: var(--surface); box-shadow: 4px 4px 0 var(--hi); }
.term-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--surface);
  color: var(--ink);
  padding: 7px var(--sp-4);
  border-bottom: var(--bw) solid var(--ink);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.term-body { padding: var(--sp-4); overflow-x: auto; }
.term-body pre { margin: 0; font: inherit; white-space: pre; }
.term .c-dim { color: #8b8b82; }
.term .c-hi { color: var(--hi); }
.term .c-acc { color: #7f92ff; }
.term .c-ok { color: #5bd6a0; }
.term .c-warn { color: #ffc14d; }

/* ── AI 副驾 ⌘J ───────────────────────────────────────────────────────── */

.sec-head--wide { max-width: 860px; }

kbd {
  display: inline-block;
  padding: 1px 5px;
  border: var(--bw-hair) solid var(--ink);
  background: var(--surface);
  box-shadow: 1px 1px 0 var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--ink);
  vertical-align: 1px;
}

/* ── 完整界面演示：左表格 + 右副驾 ─────────────────────────────────────
   点右侧任意一条指令，左侧直接切到那条指令的结果 —— 演的就是产品那句
   「直接在左侧替你执行」。状态切换靠容器上的 data-run，CSS 配对显示。   */

.demo {
  border: var(--bw) solid var(--ink);
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* 浏览器条 —— 给它一个「这是真界面」的框 */
.demo-bar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 7px var(--sp-4);
  background: var(--ink); color: var(--surface);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.04em;
}
.demo-bar .grow { flex: 1; }
.demo-url { color: #b8b8b0; }
.demo-url b { color: var(--surface); font-weight: 400; }
.demo-hint { color: var(--hi); text-transform: uppercase; }

.demo-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 412px;   /* 412 = 真面板的 --cop-w */
  align-items: stretch;
  min-height: 560px;
}
.demo-body > * { min-width: 0; }

/* 左：应用区 */
.demo-app {
  background: var(--paper);
  border-right: var(--bw) solid var(--ink);
  padding: var(--sp-5);
  display: flex; flex-direction: column;
}
.demo-crumb {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--ink-3); margin-bottom: var(--sp-2);
}
.demo-crumb b { color: var(--ink); }
.demo-h {
  font-family: var(--font-display); font-size: 21px; font-weight: 700;
  letter-spacing: var(--ls-tight); margin: 0 0 var(--sp-4);
}
.demo-h .tag {
  margin-left: var(--sp-3); vertical-align: 3px;
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  background: var(--hi); border: var(--bw-hair) solid var(--ink); padding: 2px 6px;
}

/* 状态切换：容器上的 data-run 与 .st-N 配对。
   左右两侧的所有状态块都挂 .demo-pane 作为统一的隐藏钩子。 */
/* 后面 .cop-empty / .cop-run-body 各自带 display:flex，同特异性下会靠源码顺序
   压过来，所以这里必须写成 .demo .demo-pane 提一级。 */
.demo .demo-pane { display: none; }
.demo[data-run="0"] .demo-pane.st-0,
.demo[data-run="1"] .demo-pane.st-1,
.demo[data-run="2"] .demo-pane.st-2,
.demo[data-run="3"] .demo-pane.st-3,
.demo[data-run="4"] .demo-pane.st-4 { display: block; }
/* 面板侧是 flex 列（气泡 / 工具卡上下排） */
.demo[data-run="0"] .cop-empty.st-0,
.demo[data-run="1"] .cop-run-body.st-1,
.demo[data-run="2"] .cop-run-body.st-2,
.demo[data-run="3"] .cop-run-body.st-3,
.demo[data-run="4"] .cop-run-body.st-4 { display: flex; }

/* 左侧表格 —— 与 app 一致：黑表头，AI 列蓝表头 */
.demo-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); border: var(--bw) solid var(--ink); background: var(--surface); box-shadow: var(--shadow-sm); }
.demo-tbl th {
  background: var(--ink); color: var(--surface); text-align: left; padding: 7px 9px;
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase; white-space: nowrap;
}
.demo-tbl th.ai { background: var(--accent); }
.demo-tbl td { padding: 8px 9px; border-bottom: var(--bw-hair) solid var(--line); }
.demo-tbl tr:last-child td { border-bottom: 0; }
.demo-tbl .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.demo-tbl tr.sel { background: var(--accent-soft); }
.demo-tbl tr.fresh { background: var(--hi); }
.demo-tbl tr.fresh td:first-child::before {
  content: "新"; margin-right: 6px; padding: 0 4px;
  border: var(--bw-hair) solid var(--ink); background: var(--surface);
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
}
.demo-note {
  margin: var(--sp-3) 0 0; font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.03em; color: var(--ink-3);
}
.demo-note b { color: var(--ink); }

/* 左侧：文章编辑器状态 */
.demo-doc { border: var(--bw) solid var(--ink); background: var(--surface); box-shadow: var(--shadow-sm); }
.demo-doc-bar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 8px var(--sp-4); border-bottom: var(--bw) solid var(--ink); background: var(--surface-2);
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
}
.demo-doc-bar .grow { flex: 1; }
.demo-doc-body { padding: var(--sp-4); }
.demo-doc-body h4 { margin: 0 0 var(--sp-3); font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.demo-doc-body p { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.6; }
.demo-doc-body p.body { color: var(--ink-2); }

/* 左侧：待批决策卡 */
.demo-dec { border: var(--bw) solid var(--ink); background: var(--surface); box-shadow: var(--shadow); padding: var(--sp-4); }
.demo-dec-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: var(--sp-2); }
.demo-dec h4 { margin: 0 0 4px; font-family: var(--font-display); font-size: 15px; font-weight: 700; }
.demo-dec .sum { margin: 0; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); line-height: 1.6; }
.demo-dec-act { display: flex; align-items: center; gap: 8px; margin-top: var(--sp-4); flex-wrap: wrap; }
.demo-btn {
  padding: 6px 15px; border: var(--bw) solid var(--ink); background: var(--ink); color: var(--paper);
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
}
.demo-btn.ghost { background: var(--surface); color: var(--ink); border-width: var(--bw-hair); font-weight: 400; }

/* 下方：能力条 */
.cop-caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-6); }
.cop-caps > * { min-width: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   ⌘J 副驾面板 —— 1:1 复刻
   类名与尺寸照抄 ui_kits/claysend/copilot.css，只改两处：
     · 不是 position:fixed 的抽屉，而是页面里的一个静态块
     · 高度由内容撑开（真面板占满视口高）
   改这里之前先去对一眼 copilot.css，两边要保持一致。
   ══════════════════════════════════════════════════════════════════════ */

.cop-demo {
  width: 100%;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* head — 黑条 */
.cop-head {
  flex: none; height: 50px; display: flex; align-items: center; gap: 10px;
  padding: 0 12px 0 14px;
  background: var(--ink); color: var(--surface);
  border-bottom: var(--bw) solid var(--ink);
}
.cop-mark {
  width: 26px; height: 26px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--ink); border: var(--bw) solid var(--surface);
}
.cop-title { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; letter-spacing: var(--ls-tight); text-transform: uppercase; }
.cop-ver { font-family: var(--font-mono); font-size: 9.5px; color: var(--mute); }
.cop-head .grow { flex: 1; }
.cop-head .live { width: 8px; height: 8px; flex: none; background: var(--green); border: var(--bw-hair) solid var(--surface); animation: blink 1.4s steps(1) infinite; }
.cop-head .kj { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--surface); border: var(--bw-hair) solid var(--surface); padding: 1px 5px; }

/* status strip */
.cop-status {
  flex: none; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 6px 14px;
  background: var(--surface); border-bottom: var(--bw) solid var(--ink);
  font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.cop-status b { color: var(--ink); }
.cop-status .sep { color: var(--mute); }
.cop-status .ok { color: var(--green); }

/* thread */
.cop-thread { padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 14px; }

/* 空态 */
.cop-empty { display: flex; flex-direction: column; gap: 14px; padding: 8px 2px; }
.cop-empty-ic {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--surface); border: var(--bw) solid var(--ink);
  box-shadow: var(--shadow-sm);
}
.cop-empty h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: var(--ls-tight); line-height: 1.2; }
.cop-empty p { margin: 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }
.cop-empty p b { color: var(--ink); }
.cop-empty .lbl { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--mute); margin: 4px 0 2px; }

/* seed —— 点一下，左侧应用区直接切到那条指令的结果 */
.cop-seeds { display: flex; flex-direction: column; gap: 8px; }
.demo-seed {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 11px 12px; cursor: pointer; text-align: left;
  background: var(--surface); border: var(--bw) solid var(--ink); box-shadow: var(--shadow-sm);
  transition: transform .08s steps(1), box-shadow .08s steps(1), background .08s steps(1);
}
.demo-seed:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow); background: var(--hi); }
.demo-seed:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.demo-seed .si {
  width: 24px; height: 24px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: var(--bw-hair) solid var(--ink); background: var(--surface-2); color: var(--ink);
}
.demo-seed:hover .si { background: var(--surface); }
.demo-seed .st { flex: 1; font-size: 12.5px; color: var(--ink); line-height: 1.45; font-weight: 500; }
.demo-seed .sx { flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--mute); margin-top: 3px; }

/* 线程态：顶上一条「回到开头」 */
.cop-run-body { display: flex; flex-direction: column; gap: 12px; }
.cop-back {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 4px 9px; cursor: pointer;
  border: var(--bw-hair) solid var(--ink); background: var(--surface-2); color: var(--ink-2);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
}
.cop-back:hover { background: var(--hi); color: var(--ink); }

/* user turn */
.cop-user { align-self: flex-end; max-width: 92%; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.cop-user .ub {
  background: var(--ink); color: var(--surface); border: var(--bw) solid var(--ink);
  box-shadow: var(--shadow-sm); padding: 8px 11px; font-size: 12.5px; line-height: 1.5;
}
.cop-user .ut { font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: var(--mute); text-transform: uppercase; letter-spacing: 0.06em; }

/* assistant turn */
.cop-asst { display: flex; gap: 9px; align-items: flex-start; }
.cop-asst .av {
  width: 22px; height: 22px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--surface); border: var(--bw-hair) solid var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
}
.cop-asst .at { flex: 1; min-width: 0; font-size: 13px; line-height: 1.6; color: var(--ink); }
.cop-asst.final .at { padding: 10px 12px; background: var(--surface); border: var(--bw) solid var(--ink); box-shadow: var(--shadow-sm); }
.cop-asst .at b { font-weight: 700; }

/* tool_use 卡 —— 招牌黑标签块 */
.cop-tool { margin-left: 31px; border: var(--bw) solid var(--ink); background: var(--surface); box-shadow: var(--shadow-sm); }
.cop-tool-bar {
  display: flex; align-items: center; gap: 7px; padding: 5px 9px;
  background: var(--ink); color: var(--surface);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em;
}
.cop-tool-bar .grow { flex: 1; }
.cop-tool-st {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 1px 6px; border: var(--bw-hair) solid var(--surface);
}
.cop-tool-st.done { background: var(--green); border-color: var(--green); color: #fff; }
.cop-tool-st.hold { background: var(--hi); border-color: var(--hi); color: var(--hi-ink); }
.cop-tool-body { padding: 8px 10px; }
.cop-arg { display: flex; gap: 8px; font-family: var(--font-mono); font-size: 11px; line-height: 1.55; }
.cop-arg + .cop-arg { margin-top: 2px; }
.cop-arg .k { color: var(--mute); flex: none; min-width: 64px; }
.cop-arg .v { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.cop-result {
  display: flex; align-items: flex-start; gap: 7px;
  margin-top: 8px; padding-top: 8px; border-top: var(--bw-hair) solid var(--surface-3);
  font-family: var(--font-mono); font-size: 11px; color: var(--ink); line-height: 1.5;
}
.cop-result .ic { color: var(--green); flex: none; font-weight: 700; }
.cop-result.hold .ic { color: var(--amber); }

/* composer */
.cop-foot { flex: none; border-top: var(--bw) solid var(--ink); background: var(--surface); }
.cop-input-row { display: flex; align-items: flex-end; gap: 8px; padding: 10px; }
.cop-ta {
  flex: 1; min-height: 38px; padding: 9px 10px;
  border: var(--bw) solid var(--ink); background: var(--surface);
  color: var(--mute); font-family: var(--font-body); font-size: 13px; line-height: 1.5;
}
.cop-send {
  width: 38px; height: 38px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--bw) solid var(--ink); background: var(--accent); color: var(--on-accent);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
}
.cop-foot-meta {
  display: flex; align-items: center; gap: 8px; padding: 0 11px 9px;
  font-family: var(--font-mono); font-size: 9px; color: var(--mute);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.cop-foot-meta .kbd { border: var(--bw-hair) solid var(--mute); padding: 0 4px; }

.cop-cap {
  border: var(--bw) solid var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-4);
}
.cop-cap .cop-k {
  display: inline-block;
  margin-bottom: var(--sp-2);
  padding: 3px 8px;
  background: var(--ink);
  color: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.cop-cap p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
.cop-cap p b { color: var(--ink); }
.cop-cap code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--hi);
  padding: 0 4px;
  border: var(--bw-hair) solid var(--ink);
}
/* 审批闸是最该被看见的一条 —— 用信号黄的标签把它拎出来 */
.cop-cap--gate .cop-k { background: var(--hi); color: var(--hi-ink); }

/* ── 区块脚注（挂在一组卡片下面的一行补充） ──────────────────────────── */

.sec-note {
  margin: var(--sp-5) 0 0;
  padding-top: var(--sp-4);
  border-top: var(--bw-hair) solid var(--line);
  font-size: var(--fs-sm);
  color: var(--ink-3);
}
.sec-note b { color: var(--ink); font-weight: 700; }

/* ── 支持的 AI CLI ────────────────────────────────────────────────────── */

.cli-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.cli {
  padding: 5px 10px;
  border: var(--bw) solid var(--surface);
  background: transparent;
  color: var(--surface);
  box-shadow: 2px 2px 0 var(--hi);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── 收尾 CTA + 页脚 ──────────────────────────────────────────────────── */

.cta-end { text-align: center; padding: 88px 0; }
.cta-end h2 {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: var(--sp-4) 0 var(--sp-5);
}
.cta-end p { margin: 0 auto var(--sp-8); max-width: 52ch; color: var(--ink-3); font-size: 15px; }
.cta-end .hero-cta { justify-content: center; }

.foot { border-top: var(--bw) solid var(--line); background: var(--paper); padding: var(--sp-8) 0; }
.foot-in { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.foot-links { display: flex; gap: var(--sp-5); margin-left: auto; flex-wrap: wrap; }
.foot-links a, .foot small {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.foot-links a:hover { color: var(--ink); background: var(--hi); }

.foot-legal {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: var(--bw-hair) solid var(--line);
}
.foot-legal small {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  color: var(--mute);
}

/* ── 响应式 ───────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  /* 演示界面塌成上下：应用区在上，副驾在下 —— 点了指令还是看得见上面变了 */
  .demo-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .demo-app { border-right: 0; border-bottom: var(--bw) solid var(--ink); }
  /* 塌成上下之后面板在下面，「点右侧」这句就不对了 —— 直接收掉 */
  .demo-hint { display: none; }
  .cop-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero h1 { font-size: 40px; }
  .feat, .feat--flip { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .feat--flip .feat-text { order: 0; }
  .nav-links { display: none; }
}

@media (max-width: 700px) {
  :root { --shadow: 2px 2px 0 var(--ink); --shadow-lg: 3px 3px 0 var(--ink); }
  .sec { padding: 56px 0; }
  .hero { padding: 48px 0 56px; }
  .hero h1 { font-size: 32px; }
  .cta-end h2 { font-size: 28px; }
  .sec-head .t-h2 { font-size: 24px; }
  .grid-2, .grid-3, .cop-caps { grid-template-columns: minmax(0, 1fr); }
  .demo-app { padding: var(--sp-4); }
  /* 五列在 390px 上会把「意图」压成竖排。它是最不关键的一列，窄屏直接藏掉，
     剩下的关键词 / 量 / KD / 机会分 就宽松了。 */
  .demo-tbl th:nth-child(4), .demo-tbl td:nth-child(4) { display: none; }
  .demo-tbl th, .demo-tbl td { padding: 7px 6px; }
  .wrap { padding: 0 var(--sp-4); }
  .foot-links { margin-left: 0; }
  /* 窄屏让终端换行而不是横向拖 —— 最该被读到的那行（审批闸）本来正好被切掉。
     pre-wrap 保留行首缩进，排版感不丢。 */
  .term { font-size: 11px; }
  .term-body { padding: var(--sp-3); }
  .term-body pre { white-space: pre-wrap; }
}

/* 尊重「减少动效」偏好 —— 眨眼和斜纹都停 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .live-dot, .hatch { animation: none; }
  .btn, .tpl { transition: none; }
}