/* ReadInvo 界面样式
 * ---------------------------------------------------------------------------
 * 视觉语言对标 rossum.ai（负责人 2026-10-10 指定）：蓝 #006fe8 主色 + 紫黑 #251e2c
 * 深色面 + 荧光绿 #00eb82 强调 + Inter 字体 + 10px 圆角。
 *
 * 本轮**只换皮**：DOM 结构、类名、文案全部不动，因此功能与测试契约不受影响。
 *
 * 与 rossum 的两处刻意偏离（不是漏做，是有理由）：
 *   1. H1 保留可读的较大字号（clamp 26–42px）。rossum 把字号阶梯收窄到 14–20px，
 *      那是信息密集型企业站的做法；ReadInvo 是自助工具，首页需要一个能秒懂的大标题。
 *   2. 不引入「AI agents」这类叙事词（产品原则：不说未做到的事）。
 *
 * 字体自托管而非引 Google Fonts：站点 CSP 是刻意收紧的 `default-src 'none'`，
 * 引外部字体源就得放开 fonts.googleapis.com / fonts.gstatic.com。自托管只需在 CSP
 * 里加一条 `font-src 'self'`（只指向自家源，不放开任何外部域名），安全posture不变。
 * 取 latin + latin-ext 两个子集即可：Inter 没有 CJK 字形，中文交给系统字体，
 * 而法文的 œ/Œ 落在 latin-ext，所以必须带上（实测已覆盖）。
 *
 * 来源：Google Fonts css2 的 Inter 可变字体（weight 400–800），2026-10-10 取得。
 * --------------------------------------------------------------------------- */

/* 自托管 Inter 可变字体：一份文件覆盖 400–800，unicode-range 由 Google 的分片沿用。 */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* 主色：rossum 的绝对主色与其 hover 态 */
  --brand: #006fe8;
  --brand-hover: #1e6ee5;
  --brand-soft: #e8f2fe;
  --brand-line: #cfe2fb;
  --brand-ink: #0b57b7;

  /* 深色面：rossum 的记忆点（紫黑），用于顶栏与页脚 */
  --ink: #251e2c;
  --ink-2: #171c21;
  --ink-text: #f4f3f6;
  --ink-muted: #b3aebf;
  --ink-line: rgba(255, 255, 255, 0.16);

  /* 荧光绿强调：rossum 用它抓注意力；这里只给「确认扫描」这个唯一花钱入口 */
  --accent: #00eb82;
  --accent-ink: #04231a;

  /* 蓝紫渐变：rossum 的品牌渐变，用在字形与分隔标记上 */
  --grad: linear-gradient(90deg, #006fe8 0%, #8811e3 100%);
  --grad-onink: linear-gradient(90deg, #4da3ff 0%, #c07ef5 100%);

  /* 底与线 */
  --bg: #f3f3f6;
  --card: #ffffff;
  --line: #e5e5ec;
  --line-2: #d7d7e0;

  /* 文字：正文用紫黑（比纯黑更贴品牌），次级灰取 rossum 的 #526175 */
  --text: #251e2c;
  --muted: #526175;

  /* 语义色 */
  --error: #c62a1f;
  --error-soft: #fdecea;
  --error-line: #f3c2bd;
  --warn: #8a5b00;
  --warn-soft: #fff3d8;
  --warn-line: #ead7a5;
  --ok: #047857;
  --ok-soft: #e6f7ef;
  --ok-line: #a9e3c8;

  /* rossum 的圆角就是 10px；胶囊走 9999px */
  --radius: 10px;
  --radius-sm: 8px;
  --radius-pill: 9999px;
  --shadow: 0 1px 2px rgba(37, 30, 44, 0.05);
  --shadow-lift: 0 10px 30px rgba(37, 30, 44, 0.1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", "Microsoft YaHei",
    "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font-size: clamp(26px, 3.6vw, 42px); line-height: 1.14; margin: 10px 0 12px; letter-spacing: -1.1px; font-weight: 800; color: var(--ink); }
h2 { font-size: 17px; margin: 0; font-weight: 700; letter-spacing: -0.2px; color: var(--ink); }
h3 { font-size: 15px; margin: 22px 0 8px; font-weight: 700; color: var(--ink); }
p { margin: 8px 0; }
.muted { color: var(--muted); font-size: 13px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* 键盘可达性：rossum 式的大面积单色底也需要清晰的焦点环 */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.topbar, main, footer { max-width: 1280px; margin: 0 auto; padding: 16px 20px; }

/* ------------------------------------------------------------------ 顶栏
 * 深色紫黑应用条 —— rossum 最容易被认出来的那一块，整站只在这里用满深色。 */
.topbar {
  display: flex; flex-direction: column; gap: 10px;
  margin: 16px auto 0;
  padding: 16px 20px;
  background: var(--ink);
  border-bottom: 0;
  border-radius: var(--radius);
  color: var(--ink-text);
}
.brand-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.brand { font-size: 22px; font-weight: 800; color: var(--ink-text); text-decoration: none; letter-spacing: -0.6px; }
/* 品牌后半个词走蓝紫渐变：rossum 的渐变只用在「字形」上这一种用法。
 * 先给一个实体色打底 —— background-clip:text 靠 `-webkit-text-fill-color: transparent`
 * 实现，万一浏览器不支持这条，字就会变成完全透明（等于品牌名消失），必须留降级。 */
.brand span { color: #7fb8ff; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand span {
    background: var(--grad-onink);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
.badge { background: rgba(255, 255, 255, 0.12); color: #eae8f0; border: 1px solid var(--ink-line); border-radius: var(--radius-pill); padding: 5px 10px; font-size: 12px; }
.topbar-meta { display: flex; flex-direction: column; gap: 2px; }
.topbar .muted { color: var(--ink-muted); }

/* 界面语言切换：三种界面（English / Français / 繁體中文），每次都只显示一种。
   按钮文案用各语言自己的写法（endonym）。 */
.lang-switch { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
button.lang-chip { padding: 5px 10px; font-size: 12px; display: inline-flex; align-items: center; }
.lang-note { font-size: 12px; border-left: 2px solid var(--line); padding-left: 8px; }

/* 语言条目的视觉标识（负责人 2026-10-10 指定）：英语→英国国旗、法语→法国国旗、
   繁體中文→**香港特别行政区区旗**。三面旗帜**只是语言条目的标识**，不表示国籍、
   不表示任何领土主张，也不代表使用者来自该地区。
   全部为内联 data URI，不产生外部请求；仍受 CSP 的 img-src 约束（已放开 data:）。 */
.lang-flag {
  display: inline-block; width: 18px; height: 12px; border-radius: 2px;
  background-size: cover; background-position: center;
  vertical-align: -1px; margin-right: 7px;
  box-shadow: inset 0 0 0 1px rgba(37, 30, 44, 0.14);
}
/* 英国国旗（米字旗）：蓝底 + 白斜十字 + 红斜十字 + 白正十字 + 红正十字。
   18px 宽下细节不可辨，故省略真实旗帜的「斜十字错位」画法，只保留可辨识轮廓。 */
.lang-flag-en {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'><rect width='60' height='30' fill='%23012169'/><path d='M0 0 60 30M60 0 0 30' stroke='%23ffffff' stroke-width='7'/><path d='M0 0 60 30M60 0 0 30' stroke='%23C8102E' stroke-width='4'/><path d='M30 0V30M0 15H60' stroke='%23ffffff' stroke-width='10'/><path d='M30 0V30M0 15H60' stroke='%23C8102E' stroke-width='6'/></svg>");
}
/* 法国国旗（三色旗）：蓝 / 白 / 红 三等分竖条。 */
.lang-flag-fr {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><rect width='10' height='20' fill='%23002395'/><rect x='10' width='10' height='20' fill='%23ffffff'/><rect x='20' width='10' height='20' fill='%23ED2939'/></svg>");
}
.lang-flag-hant {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><rect width='30' height='20' fill='%23DE2910'/><g transform='translate(15 10)'><g fill='%23ffffff'><ellipse cx='0' cy='-4.6' rx='1.7' ry='3'/><ellipse cx='0' cy='-4.6' rx='1.7' ry='3' transform='rotate(72)'/><ellipse cx='0' cy='-4.6' rx='1.7' ry='3' transform='rotate(144)'/><ellipse cx='0' cy='-4.6' rx='1.7' ry='3' transform='rotate(216)'/><ellipse cx='0' cy='-4.6' rx='1.7' ry='3' transform='rotate(288)'/></g><g fill='%23DE2910'><circle cx='0' cy='-5.6' r='0.75'/><circle cx='0' cy='-5.6' r='0.75' transform='rotate(72)'/><circle cx='0' cy='-5.6' r='0.75' transform='rotate(144)'/><circle cx='0' cy='-5.6' r='0.75' transform='rotate(216)'/><circle cx='0' cy='-5.6' r='0.75' transform='rotate(288)'/></g></g></svg>");
}

/* 顶栏里的按钮要在深色底上依然可读（注册/登录是这里的主入口，用白底反衬） */
.topbar button.secondary { background: #fff; color: var(--ink); border: 1px solid transparent; }
.topbar button.secondary:hover:not(:disabled) { background: #edeaf3; }
.topbar button.chip { background: transparent; color: #d9d6e2; border-color: var(--ink-line); }
.topbar button.chip:hover:not(:disabled) { border-color: var(--brand); color: #fff; }
.topbar button.chip-active { background: var(--brand); color: #fff; border-color: var(--brand); }

.notices { position: fixed; top: 12px; right: 12px; left: 12px; z-index: 20; display: flex; flex-direction: column; gap: 8px; max-width: 420px; margin-left: auto; }
.notice { border-radius: var(--radius); padding: 11px 14px; font-size: 13px; box-shadow: var(--shadow-lift); border: 1px solid var(--line); background: #fff; }
.notice-ok { background: var(--ok-soft); border-color: var(--ok-line); }
.notice-warn { background: var(--warn-soft); border-color: var(--warn-line); }
.notice-info { background: var(--brand-soft); border-color: var(--brand-line); }
.notice-error { background: var(--error-soft); border-color: var(--error-line); color: var(--error); }

/* ------------------------------------------------------------------ 首屏
 * 眉题前加一段蓝紫渐变短横线，是 rossum 式的品牌标记；标题仍保留可读字号。 */
.hero { padding: 32px 0 10px; }
.eyebrow { color: var(--brand); letter-spacing: 0.14em; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.eyebrow::before {
  content: ""; display: inline-block; width: 22px; height: 3px; border-radius: var(--radius-pill);
  background: var(--grad); margin-right: 9px; vertical-align: middle;
}

/* 主页愿景（WB-A11）：主标题下的 lead 段落，访客免登录可读。
 * 限宽 66ch 是为了可读性（一行过长会难读）；手机上受容器宽度约束自然换行，
 * 全文不再截断、不产生横向滚动。 */
.hero-vision {
  max-width: 66ch;
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text);
  overflow-wrap: break-word;
}

.workspace { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.column { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.column-title { display: none; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; min-width: 0; box-shadow: var(--shadow); }
.card-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }

.dropzone {
  border: 1.5px dashed var(--line-2); border-radius: var(--radius); background: #fafafd;
  min-height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 18px; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--brand); background: var(--brand-soft); }
.dropzone-active { border-color: var(--brand); background: var(--brand-soft); }
.upload-icon { font-size: 26px; color: var(--brand); line-height: 1; }

button {
  border: 0; border-radius: var(--radius-sm); padding: 11px 18px; background: var(--brand); color: #fff;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
button:hover:not(:disabled) { background: var(--brand-hover); }
button:disabled { background: #ececf1; color: #9a95a6; cursor: default; }
button.secondary { background: var(--brand-soft); color: var(--brand-ink); }
button.secondary:hover:not(:disabled) { background: #dbeafe; }
button.chip { padding: 6px 12px; font-size: 12px; background: #fff; color: var(--muted); border: 1px solid var(--line-2); border-radius: var(--radius-pill); }
button.chip:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); background: #fff; }
button.chip-active { background: var(--brand); color: #fff; border-color: var(--brand); }
button.chip-danger { background: var(--error-soft); color: var(--error); border-color: var(--error-line); }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }

.upload-list, .job-list, .summary-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; }
.summary-list li { font-size: 13px; color: var(--text); }
.upload-item, .job-item { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: #fbfbfd; }
.upload-item { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.upload-main { display: flex; flex-direction: column; min-width: 0; }
.upload-main strong { overflow-wrap: anywhere; font-size: 14px; }
/* 五种上传态各自的底色：待确认是「还没花钱、等你点头」，用琥珀色区分于失败/完成 */
.upload-awaiting { border-color: var(--warn-line); background: #fffdf7; }
.upload-done { border-color: var(--ok-line); background: #f7fdfa; }
.upload-error { border-color: var(--error-line); background: var(--error-soft); }
.upload-message { font-size: 12px; }
.upload-message-error { color: var(--error); }
.upload-message-done { color: var(--ok); }

.job-item { cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.job-item:hover { border-color: var(--brand-line); }
.job-item-active { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0, 111, 232, 0.14); }
.job-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.job-name { overflow-wrap: anywhere; }
.job-meta { font-size: 12px; }

.chip { display: inline-block; border-radius: var(--radius-pill); padding: 4px 10px; font-size: 12px; font-weight: 600; background: #f1f1f6; color: var(--muted); border: 1px solid var(--line); }
.chip-state-processing, .chip-state-queued { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-line); }
.chip-state-needs_review { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.chip-state-confirmed { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); }
.chip-state-failed { background: var(--error-soft); color: var(--error); border-color: var(--error-line); }
.chip-state-partial { background: #fff0e2; color: #8a4b00; border-color: #f0d3ae; }
.chip-error { background: var(--error-soft); color: var(--error); border-color: var(--error-line); }
.chip-warning { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.chip-info { background: #f1f1f6; color: var(--muted); }

.review { display: flex; flex-direction: column; }
.review-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.review-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.input { width: 100%; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); font: inherit; font-size: 14px; background: #fff; color: var(--text); }
.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0, 111, 232, 0.18); }
.input-error { border-color: #e2a09a; background: #fff8f7; }
.input-warning { border-color: #e7cd97; background: #fffdf6; }
.field-hints { display: flex; flex-direction: column; gap: 2px; }
.hint { font-size: 12px; }
.hint-raw { color: #7b8494; font-size: 12px; }
.hint-error { color: var(--error); }
.hint-warning { color: var(--warn); }

.table-wrap { overflow-x: auto; margin-top: 8px; }
table.lines { width: 100%; border-collapse: collapse; min-width: 720px; }
table.lines th, table.lines td { border-bottom: 1px solid var(--line); padding: 8px; text-align: left; vertical-align: top; }
table.lines th { font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
table.lines td .input { min-width: 90px; }
.line-new { background: var(--brand-soft); }
.source-page { display: block; margin-top: 4px; }

.issue-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.issue { border-radius: var(--radius); padding: 10px 12px; border: 1px solid var(--line); background: #fbfbfd; }
.issue-error { border-color: var(--error-line); background: var(--error-soft); }
.issue-warning { border-color: var(--warn-line); background: var(--warn-soft); }
.issue-info { background: #f4f5f9; }
.issue-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.issue-where { font-size: 12px; color: var(--muted); }
.issue-message { font-size: 13px; margin: 6px 0; }

.source-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; position: sticky; top: 8px; box-shadow: var(--shadow); }
.source-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.source-frame { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #f7f7fb; overflow: auto; max-height: 60vh; }
.source-empty { padding: 40px 16px; text-align: center; color: var(--muted); font-size: 13px; }
.source-image { display: block; height: auto; }
.source-pdf { width: 100%; height: 60vh; border: 0; display: block; }
.source-hint { margin: 0; }
a.chip { text-decoration: none; display: inline-block; }

/* 页脚：与顶栏呼应的深色收尾（rossum 的深色区块用法）。底色必须与文字同改，
 * 否则浅色字会落在浅灰底上 —— 这是换皮时最容易漏的一处。 */
footer {
  margin: 0 auto 24px;
  padding: 18px 20px;
  background: var(--ink);
  border-radius: var(--radius);
}
footer p { font-size: 12px; color: var(--ink-muted); margin: 0; }

/* 桌面：原件与表单并排 */
@media (min-width: 1000px) {
  /* 深色条内纵向居中。原来这里是 flex-end（贴底对齐）—— 浅色底时看不出来，
   * 换成深色底后品牌与语言胶囊会贴在底边、左侧留出一条空深色带，很显眼，故改居中。 */
  .topbar { flex-direction: row; align-items: center; justify-content: space-between; }
  .topbar-meta { align-items: flex-end; }
  .workspace { grid-template-columns: minmax(340px, 0.85fr) minmax(0, 1.15fr); }
  .column-title { display: block; margin: 0 0 2px 2px; font-size: 14px; color: var(--muted); font-weight: 600; }
  .source-panel { max-height: none; }
}

/* 小屏：表格转卡片，避免横向滚动截断输入 */
@media (max-width: 700px) {
  table.lines { min-width: 0; }
  table.lines thead { display: none; }
  table.lines tr { display: block; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; margin-bottom: 10px; }
  table.lines td { display: block; border: 0; padding: 4px 0; }
  table.lines td::before { content: attr(data-label); display: block; font-size: 12px; color: var(--muted); }
  .notices { left: 12px; right: 12px; }
  .source-panel { position: static; }
}

/* ------------------------------------------------------------------ 账户面板
   多租户身份与用量在这里集中呈现；匿名用户看到注册/登录表单。
   移动优先：默认单列，桌面下与页面同宽居中，不产生横向溢出。 */
.account-panel { margin: 0 0 18px; }
.account-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.account-head h2 { margin: 0; font-size: 17px; }
.account-form h3 { margin: 6px 0 10px; font-size: 15px; }
.account-field { display: block; margin-bottom: 10px; }
.account-field > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
.account-field input,
.account-block .button-row input {
  width: 100%; padding: 9px 10px; border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); background: #fff; color: inherit; font: inherit;
}
.account-field input:focus,
.account-block .button-row input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0, 111, 232, 0.18); }
.account-rows { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 14px; }
.account-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--line); padding-bottom: 5px; }
.account-block { margin-bottom: 14px; }
.account-block h4 { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.account-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.account-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.account-error { color: var(--error); font-size: 13px; margin: 6px 0; }
.account-key-once { border: 1px solid var(--warn-line); border-radius: var(--radius); padding: 10px; margin-bottom: 10px; background: var(--warn-soft); }
.account-key-once code { display: block; word-break: break-all; font-size: 13px; margin-top: 6px; }
/* 邮箱验证面板：验证码输入与前后的状态说明要一眼看清「现在卡在哪一步」。 */
.account-verify { display: flex; flex-direction: column; gap: 4px; }
.account-verify .notice { box-shadow: none; margin: 6px 0; }
.account-verify .account-form { margin-top: 10px; }
.account-verify input[inputmode="numeric"] { letter-spacing: 4px; font-size: 16px; font-variant-numeric: tabular-nums; }
.small { font-size: 12px; }

@media (min-width: 1000px) {
  .account-rows { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------- 身份门（两级）
 * 匿名访问已取消（负责人 2026-10-10 决定）：未登录时收起工作区，只留账户面板里的注册/登录表单。
 * 第二轮门 `needs-verify`：已登录但邮箱未验证时同样收起工作区，只留验证面板 ——
 * 政策规定未验证用户只可完成验证 / 重发 / 退出，所以这里**不显示**任何上传或任务入口。
 * `#account-panel` 带 `hidden` 属性，这里用作者样式覆盖 UA 的 `[hidden] { display:none }`；
 * 同时隐藏关闭按钮 —— 两级门里都没有「稍后再说」这个选项。
 */
/* WB-A11：主页愿景必须对**未登录访客**可见（实施计划 §2.1「访客无需登录即可阅读」）。
 * 原规则把整个 main 收起，会把首页介绍区连同愿景一起藏掉 —— 那样愿景只有注册后才看得到，
 * 不满足要求。这里改为：未登录时**保留首屏介绍区**，只收起工作台。
 * 边界不变：访客仍看不到任何私有数据，也无法匿名上传/识别（服务端同样拒绝匿名身份）。 */
body.needs-auth main { display: block; }
body.needs-auth .workspace { display: none; }
body.needs-auth footer { display: none; }
body.needs-auth #account-panel { display: block; max-width: 560px; margin: 32px auto; border-radius: 16px; box-shadow: var(--shadow-lift); }
body.needs-auth #account-panel .account-head button { display: none; }

body.needs-verify main,
body.needs-verify footer { display: none; }
body.needs-verify #account-panel { display: block; max-width: 560px; margin: 32px auto; border-radius: 16px; box-shadow: var(--shadow-lift); }
body.needs-verify #account-panel .account-head button { display: none; }

/* ---------------------------------------------------------------- 扫描前确认（计费把关）
 * 负责人 2026-10-10 要求：计费标准要在界面上说明，并且**扫描前**与用户确认消耗张数。
 * 上传只收下文件（不扣额度），确认条的职责是把「几个文件 / 多少页 = 几张 / 余额多少」一次说清。
 */

/* 上传项里那一行消耗提示：待确认时用强调色，让「还没花钱」和「要花几张」同时可见。 */
.upload-cost { font-size: 12px; font-weight: 600; color: var(--warn); background: var(--warn-soft); border: 1px solid var(--warn-line); border-radius: var(--radius-pill); padding: 2px 8px; align-self: flex-start; }

/* 待确认状态的 chip 与「确认扫描」主按钮。
 * 这个按钮是全站唯一「花钱」入口 —— 用 rossum 的荧光绿强调色单独抬出来，
 * 与蓝色的普通主按钮（开始识别）形成明确层级：蓝=操作，绿=付费确认。 */
.chip-state-awaiting { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
button.chip-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
button.chip-primary:hover:not(:disabled) { background: #12f58f; }
button.chip-primary:disabled { background: #ececf1; color: #9a95a6; border-color: var(--line-2); }

.scan-summary { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.scan-summary:empty { display: none; }
.scan-summary-line { font-size: 13px; font-weight: 700; margin: 0; color: var(--ink); }
/* 余额不够时只标红文案，不禁用单项确认（少于一页的可能仍付得起），由「全部确认」按钮承担禁用。 */
.scan-summary-warn { color: var(--error); font-size: 13px; font-weight: 600; }

/* ---------------------------------------------------------------- 计费说明卡片
 * 只读呈现：单位规则、五条结算规则、余额、本月已用、时区、赠额状态、四档包。
 * 支付未实现，所以额度包只标「暂不可用」，不给一个点了没反应的按钮。
 */
.billing-body { display: flex; flex-direction: column; gap: 2px; }
.billing-body:empty { display: none; }
.billing-rule { font-size: 13px; font-weight: 700; margin: 4px 0; color: var(--ink); }
.billing-rules { margin: 4px 0 8px; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.billing-rules li { font-size: 13px; color: var(--text); }
.billing-balance { font-size: 15px; font-weight: 800; margin: 8px 0 4px; color: var(--ink); font-variant-numeric: tabular-nums; }
.billing-tz { font-size: 12px; }
.billing-grant, .billing-legacy { font-size: 12px; }
.billing-packs-title { margin: 14px 0 6px; }
.billing-packs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.billing-pack { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: #fbfbfd; }
.billing-pack-main { font-size: 13px; font-weight: 600; }
.billing-pack-state { font-size: 12px; color: var(--muted); background: #f1f1f6; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 3px 9px; }
.billing-unavailable { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
/* 「上次读到的值」提示：复用 notice 配色，但要留在这张卡片里，不要跑到固定提示区去。 */
.billing-stale { position: static; margin: 6px 0; max-width: none; }

/* ============================================================================
 * 营销站（home / features / ai / solutions / pricing）
 * ----------------------------------------------------------------------------
 * 负责人 2026-10-10：网站面向英文市场；**信息架构对标 docparser**（主页 + 分页 +
 * 顶行功能导航），**视觉继续沿用 rossum 的 token**（见本文件顶部）。
 * 因此这里只新增「营销组件」，不改动应用工作区既有类名的任何语义。
 *
 * 与 docparser 的两处**刻意不同**（是有理由的省略，不是漏做）：
 *   1. 不放客户评价与客户 logo 墙 —— ReadInvo 目前没有可引用的真实客户，
 *      编造推荐语违反「不把未做到的事说成已做到」。改用产品事实型区块代替。
 *   2. 不做「集成 6000+ 应用」「按行业细分到十几条」这类叙事 —— 集成能力尚未实现，
 *      行业也只列真实会遇到的几类。
 * ========================================================================== */

/* 营销页用 body.site 打标：重置应用页给 main/footer 施加的容器约束。
   ⚠️ 这里**不写** `background: none`：`body.site footer`（0,1,2）的特异性高于
   `.site-footer`（0,1,0），一旦在此清掉背景，页脚会退回白底，而页脚文字是浅色的
   `--ink-text/--ink-muted` —— 结果是白底白字、整块页脚看不见（2026-10-11 实测截图为证）。 */
body.site { background: #fff; overflow-x: hidden; }
body.site main,
body.site footer { max-width: none; margin: 0; padding: 0; border-radius: 0; }

.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 40;
  background: var(--ink); color: var(--ink-text); padding: 9px 14px;
  border-radius: var(--radius-sm); text-decoration: none; font-size: 13px;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------------ 顶栏 */
.site-header { background: var(--ink); color: var(--ink-text); position: sticky; top: 0; z-index: 30; }
.site-header-inner {
  max-width: 1280px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.site-brand { font-size: 21px; font-weight: 800; letter-spacing: -0.6px; color: var(--ink-text); text-decoration: none; }
.site-brand span { color: #7fb8ff; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .site-brand span {
    background: var(--grad-onink);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
.site-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-right: auto; }
.site-nav a {
  color: #dcd9e4; text-decoration: none; font-size: 14px; font-weight: 600;
  padding: 8px 12px; border-radius: var(--radius-sm);
}
.site-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.site-nav a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, 0.14); }
.site-actions { display: flex; gap: 8px; align-items: center; }

/* ------------------------------------------------------------------ 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 700; text-decoration: none; line-height: 1.2;
  border: 1px solid transparent; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: #12f58f; }
.btn-outline { background: #fff; color: var(--brand-ink); border-color: var(--brand-line); }
.btn-outline:hover { background: var(--brand-soft); }
.btn-ghost { background: transparent; color: #dcd9e4; border-color: var(--ink-line); }
.btn-ghost:hover { color: #fff; border-color: #fff; }
.btn-outline-ink { background: transparent; color: var(--ink-text); border-color: rgba(255, 255, 255, 0.35); }
.btn-outline-ink:hover { background: rgba(255, 255, 255, 0.12); }
.btn-block { width: 100%; }

/* ------------------------------------------------------------------ 首屏 */
.hero-lg { max-width: 1280px; margin: 0 auto; padding: 52px 20px 36px; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: center; }
.hero-eyebrow { color: var(--brand); letter-spacing: 0.14em; font-size: 12px; font-weight: 700; text-transform: uppercase; margin: 0; }
.hero-eyebrow::before {
  content: ""; display: inline-block; width: 22px; height: 3px; border-radius: var(--radius-pill);
  background: var(--grad); margin-right: 9px; vertical-align: middle;
}
/* 负责人 2026-10-11：H1 字号缩到原来的 75%（54px → 40.5px），行距与字距按同比例缩，
   免得字变小了却还留着 54px 时代的紧字距。原值：clamp(32px, 5.2vw, 54px) / -1.6px。 */
.hero-h1 { font-size: clamp(24px, 3.9vw, 40.5px); line-height: 1.06; letter-spacing: -1.2px; margin: 14px 0 16px; color: var(--ink); font-weight: 800; }
.hero-sub { font-size: 17px; line-height: 1.6; color: var(--text); max-width: 60ch; margin: 0 0 22px; }
.hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hero-note { font-size: 13px; color: var(--muted); margin: 14px 0 0; }

/* 首屏的产品示意：全部由 CSS 画出，不用外部图片（CSP 只允许自家源）。 */
.hero-visual { min-width: 0; }
.mock { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lift); overflow: hidden; }
.mock-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; background: var(--ink); color: var(--ink-text); flex-wrap: wrap; }
.mock-file { font-size: 13px; font-weight: 700; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.mock-chip { font-size: 11px; background: rgba(255, 255, 255, 0.14); border: 1px solid var(--ink-line); border-radius: var(--radius-pill); padding: 3px 9px; white-space: nowrap; }
.mock-grid { padding: 6px 0; }
.mock-row { display: grid; grid-template-columns: 1.5fr 1fr 0.8fr; gap: 10px; padding: 9px 14px; font-size: 13px; border-bottom: 1px solid var(--line); }
.mock-row:last-child { border-bottom: 0; }
.mock-row-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; background: #fafafd; }
.mock-num { text-align: right; font-variant-numeric: tabular-nums; }
.mock-row-foot { font-weight: 700; background: #fafafd; color: var(--ink); }
.mock-note { margin: 0; padding: 10px 14px; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--line); background: #fafafd; }

/* ------------------------------------------------------------------ 分节 */
.section { max-width: 1280px; margin: 0 auto; padding: 52px 20px; }
.section-alt { background: #f7f7fa; box-shadow: 0 0 0 100vmax #f7f7fa; clip-path: inset(0 -100vmax); }
.section-ink {
  background: var(--ink); color: var(--ink-text);
  box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax);
}
.section-ink .section-title { color: #fff; }
.section-ink .section-sub { color: var(--ink-muted); }
.section-ink .section-eyebrow { color: #7fb8ff; }
/* 78ch 是给「正文段落」定的可读行宽，不该拿来卡标题 —— 否则长标题会被硬折断
   （负责人 2026-10-11 报的「Three steps — and you keep control of the last one.」折行即此因）。
   因此约束下移到 .section-sub：标题吃满容器宽度，正文段落仍是 78ch。 */
.section-head { max-width: none; margin: 0 0 28px; }
.section-eyebrow { color: var(--brand); letter-spacing: 0.14em; font-size: 12px; font-weight: 700; text-transform: uppercase; margin: 0 0 10px; }
.section-title { font-size: clamp(24px, 3.2vw, 36px); line-height: 1.14; letter-spacing: -1px; color: var(--ink); margin: 0 0 10px; font-weight: 800; }
.section-sub { font-size: 16px; color: var(--text); margin: 0; max-width: 78ch; }
.section-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* 分页页头 */
.page-head { max-width: 1280px; margin: 0 auto; padding: 52px 20px 8px; }
.page-h1 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -1.4px; color: var(--ink); margin: 12px 0 14px; font-weight: 800; }
.page-sub { font-size: 17px; color: var(--text); max-width: 68ch; margin: 0 0 24px; }

/* -------------------------------------------------------------- 步骤 / 卡片 */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 18px; }
.step { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px; box-shadow: var(--shadow); }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; font-size: 14px; margin-bottom: 12px; }
.step h3 { margin: 0 0 8px; font-size: 17px; color: var(--ink); }
.step p { margin: 0; font-size: 14.5px; color: var(--text); }

.cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
.card-lg { display: block; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px; text-decoration: none; color: inherit; box-shadow: var(--shadow); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
a.card-lg:hover { border-color: var(--brand-line); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.card-lg h3 { margin: 0 0 8px; font-size: 16px; color: var(--ink); }
.card-lg p { margin: 0; font-size: 14.5px; color: var(--text); }

/* ---------------------------------------------------------------- 清单 / 标签 */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.check-list li { position: relative; padding-left: 30px; font-size: 15px; color: var(--text); }
.check-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--brand-soft); border: 1px solid var(--brand-line); }
.check-list li::after { content: ""; position: absolute; left: 5px; top: 8px; width: 8px; height: 4px; border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(-45deg); }
.check-list-lg li { font-size: 16px; }
.check-list-ink li { color: var(--ink-text); }
.check-list-ink li::before { background: rgba(0, 235, 130, 0.16); border-color: rgba(0, 235, 130, 0.45); }
.check-list-ink li::after { border-color: var(--accent); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--brand-ink); border: 1px solid var(--brand-line); }

/* ------------------------------------------------------------------ FAQ */
.faq { display: grid; gap: 10px; max-width: 920px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0 18px; }
.faq-item summary { cursor: pointer; padding: 16px 0; font-weight: 700; font-size: 15.5px; color: var(--ink); list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: right; color: var(--brand); font-weight: 800; font-size: 18px; line-height: 1; margin-left: 12px; }
.faq-item[open] summary::after { content: "\2013"; }
.faq-item p { margin: 0 0 16px; font-size: 14.5px; color: var(--text); }

/* ------------------------------------------------------------------ 定价 */
.price-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.price-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; }
.price-card-featured { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 235, 130, 0.18), var(--shadow-lift); }
.price-tag { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-ink); }
.price-tag-accent { color: #047857; }
.price-amount { display: flex; align-items: baseline; gap: 8px; }
.price-num { font-size: 42px; font-weight: 800; letter-spacing: -1.6px; color: var(--ink); line-height: 1.05; }
.price-per { font-size: 13px; color: var(--muted); font-weight: 600; }
.price-desc { margin: 0; font-size: 14px; color: var(--muted); min-height: 44px; }
.price-pages { margin: 4px 0 12px; font-size: 17px; font-weight: 800; color: var(--ink); }
.price-unit { font-size: 13px; font-weight: 600; color: var(--muted); }
.price-card .check-list { margin-bottom: 20px; }
.price-card .btn { margin-top: auto; }
.price-note { margin: 26px 0 0; font-size: 13.5px; color: var(--muted); max-width: 82ch; border-left: 3px solid var(--brand-line); padding-left: 12px; }

/* ------------------------------------------------------------------ 收尾 */
.cta-band { background: var(--ink); color: var(--ink-text); text-align: center; padding: 64px 20px; }
.cta-band h2 { font-size: clamp(26px, 3.6vw, 40px); letter-spacing: -1px; color: #fff; margin: 0 0 10px; font-weight: 800; }
.cta-band p { color: var(--ink-muted); font-size: 16px; margin: 0 0 24px; }
.cta-band .hero-ctas { justify-content: center; }

/* ------------------------------------------------------------------ 页脚 */
.site-footer { background: var(--ink); color: var(--ink-text); }
.site-footer-inner { max-width: 1280px; margin: 0 auto; padding: 48px 20px 24px; display: grid; grid-template-columns: 1fr; gap: 28px; }
.footer-brand .muted { color: var(--ink-muted); font-size: 13.5px; margin: 8px 0 0; }
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col h4 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: #9a94a8; }
.footer-col a { color: #dcd9e4; text-decoration: none; font-size: 14px; }
.footer-col a:hover { color: #fff; }
.site-footer-legal { border-top: 1px solid var(--ink-line); }
.site-footer-legal p { max-width: 1280px; margin: 0 auto; padding: 18px 20px 28px; color: var(--ink-muted); font-size: 12px; }

/* -------------------------------------------------------------- 响应式 */
@media (min-width: 720px) {
  .cards-2 { grid-template-columns: repeat(2, 1fr); }
  .cards-3 { grid-template-columns: repeat(2, 1fr); }
  .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer-inner { grid-template-columns: 2fr 1fr 1fr; }
}
@media (min-width: 1000px) {
  /* 首屏两栏（负责人 2026-10-11）：右侧 invoices-batch.xlsx 表格的**上沿**要与左侧 <h1> 的
     上沿齐平。原来两栏 align-items:center，表格顶边落在 eyebrow 与 <h1> 之间，位置不定。
     改为 start 后表格顶边先与文字栏顶边（= eyebrow 顶边）齐，再往下推 33px 落到 <h1> 顶边：
     33px = .hero-eyebrow 的行盒高度 19px + .hero-h1 的上外边距 14px。
     注意：单栏（<1000px）时两栏是上下堆叠，不需要这个偏移，所以只写在本媒体查询里。 */
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: start; }
  .hero-visual { margin-top: 33px; }
  .hero-lg { padding: 72px 20px 48px; }
  .page-head { padding: 64px 20px 8px; }
  .cards-3 { grid-template-columns: repeat(3, 1fr); }
  .cards-4 { grid-template-columns: repeat(4, 1fr); }
  .steps { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  .price-grid { grid-template-columns: repeat(4, 1fr); }
  .section-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: start; }
  /* 负责人 2026-10-11：AI 分栏右侧清单再下移 20pt。CSS 的 pt 是印刷点（1pt = 1/72in ≈ 1.333px），
     所以这里直接写 20pt 而不是折算成 26.67px —— 保留「20pt」这个可核对的原始口径。 */
  .section-split .check-list { margin-top: calc(34px + 20pt); }
}
/* 小屏：导航换到第二行并横向滚动，避免挤成一团或产生横向溢出。 */
@media (max-width: 640px) {
  .site-header-inner { gap: 10px; }
  .site-nav { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; margin-right: 0; padding-bottom: 2px; }
  .site-nav a { white-space: nowrap; }
  .site-actions { margin-left: auto; }
  .mock-row { grid-template-columns: 1.4fr 1fr 0.8fr; font-size: 12px; }
}

/* ------------------------------------------------------------ AI 原理页（视频）
   负责人 2026-10-11：/ai/ 页 = 标题 → 播放器 → 完整解说词 → 行动按钮，
   上下排列（不做左右两栏）、文字不浮在视频上、不逐词高亮、不自动滚动。
   素材与嵌入要求见 docs/workbuddy-ai-page-handoff.md。 */
.video-wrap { max-width: 960px; margin: 0 auto; }
/* aspect-ratio 先占好位置，避免视频元数据加载完成前页面跳动（CLS）。 */
.ai-video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  background: #000; border-radius: var(--radius);
}
.video-note { max-width: 960px; margin: 12px auto 0; font-size: 13px; }
/* 解说词：可读行宽，按自然段，不折叠、不删节、不编号。 */
.transcript { max-width: 74ch; margin: 0 auto; }
.transcript p { font-size: 16px; line-height: 1.7; color: var(--text); margin: 0 0 16px; }
.transcript p:last-child { margin-bottom: 0; font-weight: 600; }
.cta-inline { text-align: center; padding-top: 0; }
/* 说明：上面的 .ai-video / .video-wrap / .transcript 是**营销站通用**的播放器与词稿样式，
   并非 /ai/ 页专属 —— /features/ 页的功能视频复用同一套类，保证两页播放体验一致。 */

/* ------------------------------------------------------------ Features 页（四步导览）
   负责人 2026-10-11：Features 页 = 标题导语 → 功能视频 → 完整词稿 → 四步（做什么 + 得到什么）→ 原有章节。
   四步的截图与文案由 codex 交付（marketing/features-introduction，见 docs/workbuddy-features-video-handoff.md）。
   截图是**产品局部裁剪**（原生 598px 宽），这里是 UI 细节图，刻意不放大 —— 用 max-width 卡在原生宽度，
   避免插值把界面文字糊掉。 */
.walkthrough { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 24px; }
.walkthrough-step {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 24px; box-shadow: var(--shadow);
}
.walkthrough-figure { margin: 0 0 20px; }
.walkthrough-figure img {
  display: block; width: 100%; max-width: 598px; height: auto; margin: 0 auto;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
.walkthrough-figure figcaption { max-width: 598px; margin: 8px auto 0; line-height: 1.5; }
.walkthrough-body { max-width: 598px; margin: 0 auto; }
.walkthrough-body h3 { margin: 0 0 10px; font-size: 20px; color: var(--ink); }
.walkthrough-body p { margin: 0 0 12px; font-size: 15px; color: var(--text); line-height: 1.65; }
.walkthrough-body p:last-child { margin-bottom: 0; }
/* 「What you get」比正文更重：它是每步的结论，用正文色 + 稍小字号区分层级。 */
.walkthrough-body .walkthrough-get { margin-top: 14px; font-size: 14.5px; color: var(--ink); }
.walkthrough-caveat { max-width: 760px; margin: 20px auto 0; line-height: 1.6; }
/* 小屏收紧卡片内边距（本条必须留在文件末尾之后，否则会被上面的 24px 覆盖）。 */
@media (max-width: 640px) {
  .walkthrough-step { padding: 16px; }
  .walkthrough-body h3 { font-size: 18px; }
}