/* 太乙官网。静态页，无构建。
   视觉语法：一张连续的画布，层级靠字号、字重与留白，不靠卡片和色块；
   颜色只在表达含义时出现。Light / Dark 跟随系统，颜色一律走下面的语义 token。 */

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* 层：Surface 是整页画布，Card 只给按钮这类前景控件，Board 是细分隔线。 */
  --surface: #fafaf9;
  --card: #ffffff;
  --border-subtle: #e7e7e4;
  --border-default: #d7d7d4;
  --border-strong: #a3a3a0;

  --text-primary: #171717;
  --text-secondary: #575755;
  --text-tertiary: #737371;

  /* 主操作：深底浅字。 */
  --action-bg: #171717;
  --action-fg: #fafaf9;
  --action-bg-hover: #3a3a39;

  --focus-ring: #417cdd;

  /* 字号角色。正文 16px 起，中文行高放宽。 */
  --type-display: clamp(2.125rem, 1.4rem + 3vw, 4rem);
  --type-title: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
  --type-section: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem);
  --type-subsection: 1.25rem;
  --type-lede: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --type-body: 1rem;
  --type-label: 0.9375rem;
  --type-meta: 0.8125rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --leading-display: 1.12;
  --leading-title: 1.2;
  --leading-section: 1.3;
  --leading-lede: 1.65;
  --leading-body: 1.75;
  --leading-compact: 1.5;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --radius-small: 6px;
  --radius-pill: 999px;

  --page-max: 1200px;
  --page-pad: 40px;
  --gutter: 32px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #161615;
    --card: #222221;
    --border-subtle: #2b2b2a;
    --border-default: #3c3c3a;
    --border-strong: #5c5c5a;

    --text-primary: #ededeb;
    --text-secondary: #a8a8a5;
    --text-tertiary: #8e8e8b;

    --action-bg: #ededeb;
    --action-fg: #161615;
    --action-bg-hover: #cfcfcc;
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text-primary);
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  font-feature-settings: "ss01";
}

h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }

h1, h2, h3 {
  font-weight: var(--weight-semibold);
  text-wrap: balance;
}

p { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

img { display: block; max-width: 100%; }

::selection { background: var(--action-bg); color: var(--action-fg); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 2px;
}
#main:focus { outline: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-2);
  z-index: 10;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--action-bg);
  color: var(--action-fg);
  font-size: var(--type-label);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- 页面骨架与 12 / 6 / 4 栅格 ---------- */

.page {
  width: 100%;
  max-width: calc(var(--page-max) + var(--page-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}
.grid > * { min-width: 0; }

/* ---------- 页眉 / 页脚 ---------- */

.site-header .page {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-6);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--type-label);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.brand img { width: 24px; height: 24px; }

.site-nav {
  display: flex;
  gap: var(--space-6);
  font-size: var(--type-label);
}
.site-nav a {
  color: var(--text-secondary);
  text-decoration: none;
}
.site-nav a:hover { color: var(--text-primary); }
.site-nav a[aria-current="page"] {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45em;
}

.site-footer {
  background: var(--paper);
  color-scheme: light;
  --text-tertiary: #6b6b67;
  --text-secondary: #575755;
  border-top: 1px solid #e7e6e2;
  padding-block: var(--space-8) var(--space-12);
  color: var(--text-tertiary);
  font-size: var(--type-meta);
  line-height: var(--leading-compact);
}
.site-footer .page {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-8);
}
.site-footer .brand { color: var(--text-secondary); font-size: var(--type-meta); }
.site-footer .brand img { width: 18px; height: 18px; }
.site-footer .legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-6);
}
.site-footer a { color: inherit; }

/* ---------- 字号角色 ---------- */

.lines .line { display: inline-block; }
.display {
  font-size: var(--type-display);
  line-height: var(--leading-display);
  letter-spacing: -0.02em;
}
.title {
  font-size: var(--type-title);
  line-height: var(--leading-title);
  letter-spacing: -0.015em;
}
.section-title {
  font-size: var(--type-section);
  line-height: var(--leading-section);
  letter-spacing: -0.01em;
}
.subsection-title {
  font-size: var(--type-subsection);
  line-height: var(--leading-section);
}
.lede {
  font-size: var(--type-lede);
  line-height: var(--leading-lede);
  color: var(--text-secondary);
}
.meta {
  font-size: var(--type-meta);
  line-height: var(--leading-compact);
  color: var(--text-tertiary);
}
.num { font-variant-numeric: tabular-nums; }

/* ---------- 按钮：只有两种，主操作与次操作 ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-6);
  border: 1px solid var(--action-bg);
  border-radius: var(--radius-pill);
  background: var(--action-bg);
  color: var(--action-fg);
  font: inherit;
  font-size: var(--type-label);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.button:hover { background: var(--action-bg-hover); border-color: var(--action-bg-hover); }
.button-secondary {
  border-color: var(--border-default);
  background: transparent;
  color: var(--text-primary);
}
.button-secondary:hover { background: transparent; border-color: var(--text-primary); }

.text-link {
  font-size: var(--type-label);
  font-weight: var(--weight-medium);
}

/* ---------- 区块节奏 ---------- */

.section { padding-top: var(--space-24); }
.section-head {
  grid-column: 1 / span 7;
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}

/* ---------- 首页：首屏 ---------- */

.opening {
  padding-top: var(--space-16);
  row-gap: var(--space-12);
  align-items: start;
}
.opening-claim {
  grid-column: 1 / span 7;
  display: grid;
  gap: var(--space-6);
}
.opening-claim .lede { max-width: 34em; }
.opening-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-2);
}
.opening-actions .meta { flex-basis: 100%; }

/* 三步开始：真实的先后顺序，所以用有序编号。 */
.start {
  grid-column: 9 / span 4;
  padding-top: var(--space-3);
}
.start h2 {
  font-size: var(--type-label);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-4);
}
.steps { counter-reset: step; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2em minmax(0, 1fr);
  padding-block: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  line-height: var(--leading-compact);
}
.steps li:last-child { border-bottom: 1px solid var(--border-subtle); }
.steps li::before {
  content: counter(step);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.steps b { display: block; font-weight: var(--weight-medium); }
.steps span { display: block; margin-top: var(--space-1); color: var(--text-secondary); font-size: var(--type-label); }

/* ---------- 首页：三项能力，共用同一组栏位 ---------- */

.abilities {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  border-bottom: 1px solid var(--border-default);
}
.ability {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  padding-block: var(--space-10);
  border-top: 1px solid var(--border-default);
  row-gap: var(--space-3);
}
.ability-name {
  grid-column: 1 / span 3;
  font-size: var(--type-label);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-section);
  padding-top: 0.35em;
}
.ability-claim {
  grid-column: 4 / span 4;
  font-size: var(--type-section);
  line-height: var(--leading-section);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}
.ability-detail {
  grid-column: 8 / span 5;
  display: grid;
  gap: var(--space-3);
  color: var(--text-secondary);
  padding-top: 0.2em;
}

/* ---------- 首页：有订阅 / 没订阅 ---------- */

.paths {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: var(--space-8);
}
.path {
  grid-column: span 6;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding-top: var(--space-5);
  border-top: 1px solid var(--text-primary);
}
.path + .path { grid-column: 7 / span 6; }
.path p { color: var(--text-secondary); }
.path .text-link { margin-top: var(--space-2); justify-self: start; }

.facts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: var(--space-6);
  margin-top: var(--space-16);
}
.fact { grid-column: span 4; display: grid; gap: var(--space-1); }
.fact dt { font-weight: var(--weight-medium); }
.fact dd { color: var(--text-secondary); font-size: var(--type-label); }

.closing {
  grid-column: 1 / span 8;
  display: grid;
  gap: var(--space-6);
  justify-items: start;
}

/* ---------- 内页标题 ---------- */

.page-head {
  padding-top: var(--space-16);
  row-gap: var(--space-4);
}
.page-head > * { grid-column: 1 / span 8; }
.page-head .lede { grid-column: 1 / span 7; }

/* ---------- 下载页：平台清单，所有行共用同一组栏位 ---------- */

.platforms {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}
.platform-group {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}
.platform-group + .platform-group { margin-top: var(--space-12); }
.platform-group > h2 {
  grid-column: 1 / -1;
  padding-bottom: var(--space-4);
  font-size: var(--type-label);
  font-weight: var(--weight-semibold);
}
.platform {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: baseline;
  row-gap: var(--space-2);
  padding-block: var(--space-6);
  border-top: 1px solid var(--border-default);
}
.platform:last-child { border-bottom: 1px solid var(--border-default); }
.platform-name { grid-column: 1 / span 3; display: grid; gap: var(--space-1); }
.platform-name h3 {
  font-size: var(--type-subsection);
  line-height: var(--leading-section);
}
.platform-fit { color: var(--text-secondary); font-size: var(--type-label); line-height: var(--leading-compact); }
.recommend-note {
  font-size: var(--type-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-compact);
}
.platform-build {
  grid-column: 4 / span 3;
  font-size: var(--type-label);
  line-height: var(--leading-compact);
  font-variant-numeric: tabular-nums;
}
.platform-build .meta { display: block; margin-top: var(--space-1); }
.dl-updated {
  grid-column: 7 / span 3;
  color: var(--text-tertiary);
  font-size: var(--type-meta);
  line-height: var(--leading-compact);
  font-variant-numeric: tabular-nums;
}
.dl-updated a { color: var(--text-secondary); }
.platform-action {
  grid-column: 10 / span 3;
  grid-row: 1 / span 2;
  justify-self: end;
  align-self: center;
}
.platform-legacy {
  grid-column: 4 / span 6;
  color: var(--text-secondary);
  font-size: var(--type-meta);
  line-height: var(--leading-compact);
}
.platform-legacy a { color: var(--text-primary); }
.page-head + .section { padding-top: var(--space-16); }

.notes {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}
.note {
  grid-column: 1 / span 9;
  display: grid;
  grid-template-columns: subgrid;
  padding-block: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
.note:last-child { border-bottom: 1px solid var(--border-subtle); }
.note dt { grid-column: 1 / span 3; }
.note dd { grid-column: 4 / span 6; }
.note dt { font-weight: var(--weight-medium); line-height: var(--leading-compact); padding-top: 0.15em; }
.note dd { color: var(--text-secondary); }

/* ---------- 价格页：证据表 ---------- */

.table-wrap {
  grid-column: 1 / -1;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.price-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.price-table caption {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--type-label);
  line-height: var(--leading-compact);
}
.price-table th,
.price-table td {
  padding: var(--space-4) 0 var(--space-4) var(--space-6);
  text-align: left;
  vertical-align: baseline;
  border-bottom: 1px solid var(--border-subtle);
}
.price-table th:first-child,
.price-table td:first-child { padding-left: 0; }
.price-table thead th {
  vertical-align: bottom;
  padding-block: 0 var(--space-3);
  border-bottom: 1px solid var(--text-primary);
  color: var(--text-secondary);
  font-size: var(--type-meta);
  font-weight: var(--weight-medium);
  line-height: var(--leading-compact);
}
.price-table tbody th {
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.price-table .numeric { text-align: right; white-space: nowrap; }
.price-table .ours { display: block; }
.price-table .official {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--type-meta);
  line-height: var(--leading-compact);
}
.price-table .absent { color: var(--text-tertiary); }
.price-table .saving { font-weight: var(--weight-medium); color: var(--accent-strong); }

.table-note {
  grid-column: 1 / span 7;
  margin-top: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--type-label);
  line-height: var(--leading-compact);
}

/* ---------- 平板：6 栏 ---------- */

@media (max-width: 1024px) {
  :root { --page-pad: 32px; --gutter: 24px; }
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  .section-head,
  .opening-claim,
  .closing,
  .page-head > *,
  .page-head .lede,
  .table-note { grid-column: 1 / -1; }

  .note { grid-column: 1 / -1; }
  .note dt { grid-column: 1 / span 2; }
  .note dd { grid-column: 3 / span 4; }

  .start { grid-column: 1 / span 4; padding-top: 0; }

  .ability-name { grid-column: 1 / -1; padding-top: 0; }
  .ability-claim { grid-column: 1 / span 3; }
  .ability-detail { grid-column: 4 / span 3; }

  .path,
  .path + .path { grid-column: span 3; }
  .fact { grid-column: span 2; }

  .platform-name { grid-column: 1 / span 2; }
  .platform-build { grid-column: 3 / span 2; }
  .dl-updated,
  .platform-legacy { grid-column: 3 / span 2; }
  .platform-action { grid-column: 5 / span 2; grid-row: 1 / span 2; }
}

/* ---------- 手机：4 栏 ---------- */

@media (max-width: 640px) {
  :root { --page-pad: 20px; --gutter: 16px; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .site-header .page { padding-block: var(--space-5); }
  .site-nav { gap: var(--space-5); }

  .section { padding-top: var(--space-16); }
  .opening { padding-top: var(--space-10); row-gap: var(--space-10); }
  .page-head { padding-top: var(--space-10); }
  .page-head + .section { padding-top: var(--space-12); }
  .lede.lines .line { display: inline; }
  .start { grid-column: 1 / -1; }

  .ability { padding-block: var(--space-8); }
  .ability-claim,
  .ability-detail { grid-column: 1 / -1; }

  .path,
  .path + .path,
  .fact { grid-column: 1 / -1; }
  .facts { margin-top: var(--space-12); }

  .platform { row-gap: var(--space-3); }
  .platform-name,
  .platform-build,
  .dl-updated,
  .platform-legacy { grid-column: 1 / -1; }
  .platform-action {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: stretch;
  }
  .platform-action .button { width: 100%; }

  .note { row-gap: var(--space-1); }
  .note dt,
  .note dd { grid-column: 1 / -1; }

  .site-footer { margin-top: var(--space-16); }
  .site-footer .page { flex-direction: column; align-items: flex-start; }
}

/* 价格表在窄屏上按行重排，每个价格带上自己的列名。 */
@media (max-width: 760px) {
  .price-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .price-table,
  .price-table tbody,
  .price-table tr { display: block; width: 100%; }
  .price-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-6);
    row-gap: var(--space-4);
    padding-block: var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
  }
  .price-table tbody th,
  .price-table td { padding: 0; border: 0; }
  .price-table tbody th {
    grid-column: 1 / -1;
    font-size: var(--type-subsection);
    line-height: var(--leading-section);
    white-space: normal;
  }
  .price-table td.numeric { text-align: left; }
  .price-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--space-1);
    color: var(--text-tertiary);
    font-size: var(--type-meta);
    line-height: var(--leading-compact);
  }
  .price-table caption { display: block; }
  /* 省多少是这一行的结论，放到模型名同一行的右侧。 */
  .price-table tbody th { grid-column: 1; align-self: baseline; }
  .price-table td.saving,
  .price-table td:last-child {
    grid-row: 1;
    grid-column: 2;
    align-self: baseline;
    text-align: right;
  }
  .price-table td:last-child::before {
    display: inline;
    margin: 0 var(--space-2) 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

@media (forced-colors: active) {
  .button { border: 1px solid ButtonText; }
}

/* ==========================================================================
   v2 重设计：产品质感型（Raycast / Linear 一类）
   深浅分段，产品画面是主角，一个品牌强调色贯穿全站。
   旧规则仍服务于未改版的区块，随重设计推进逐段替换。
   ========================================================================== */

:root {
  /* 品牌强调色：枫铜。取自灰枫叶里那点暖，深色底上暖得有底气，
     浅色底上也够沉，不像橙色那样廉价。全站只用它一处表达「品牌 / 主操作」。 */
  --accent: #b0521a;        /* 主操作底：与 --accent-ink 文字对比约 4.9:1，过 AA */
  --accent-strong: #8f3f10; /* 悬停 / 浅底上的文字：更深，稳过 AA */
  --accent-bright: #e07a3a; /* 只在深色底上做文字高亮 */
  --accent-ink: #fff8f2;
  --accent-soft: rgba(176, 82, 26, 0.14);

  /* 深色段：近黑偏暖，和枫铜同一族，避免纯黑发死。 */
  --ink: #0d0c0b;
  --ink-raised: #171614;
  --ink-line: #2a2825;
  --ink-text: #f5f3f0;
  --ink-text-soft: #a8a49d;
  --ink-text-faint: #6f6b64;

  /* 浅色段：比第一版略暖、略深一点，让产品窗口的白浮得起来。 */
  --paper: #f4f3f0;
  --paper-raised: #ffffff;
  --paper-sunken: #e9e8e4;

  --radius-card: 16px;
  --radius-win: 12px;

  --shadow-win: 0 1px 2px rgba(20, 18, 15, 0.06), 0 12px 28px rgba(20, 18, 15, 0.1),
    0 40px 80px rgba(20, 18, 15, 0.12);
  --shadow-win-dark: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 40px rgba(0, 0, 0, 0.45),
    0 60px 120px rgba(0, 0, 0, 0.55);
  --shadow-phone: 0 2px 6px rgba(20, 18, 15, 0.14), 0 20px 44px rgba(20, 18, 15, 0.22),
    0 50px 90px rgba(20, 18, 15, 0.24);

  /* 产品界面配色：取自 apps/desktop 的 cindy-light 主题（--w-）与
     apps/mobile 的 tokens（--m-）。产品画面固定浅色，不跟随系统深色。 */
  --w-surface: #f2f2ed;
  --w-elevated: #fdfdf8;
  --w-chip: #eeeee9;
  --w-border: #e4e4df;
  --w-ink: #1a1a1a;
  --w-muted: #888883;
  --w-dim: #6b6b67;
  --w-active: #3c3f43;
  --w-active-fg: #fcfcfc;
  --w-accent: #ea6b17; /* 运行中 Thinking Orange */
  --w-done: #2aae5b;   /* 完成未读 */

  --m-surface: #f9f9f6;
  --m-elevated: #fffffc;
  --m-chip: #eaeae6;
  --m-border: #ccccc8;
  --m-border-strong: #858581;
  --m-text: #0f0f0f;
  --m-text-2: #4d4d4a;
  --m-text-3: #686864;
  --m-placeholder: #858581;
  --m-cta: #0f0f0f;
  --m-accent: #ea6b17;
}

/* ---------- v2 区块骨架 ---------- */

.band {
  position: relative;
  overflow: hidden; /* 装饰性光晕会溢出边界，裁掉以免产生横向滚动 */
  padding-block: clamp(72px, 9vw, 132px);
}
.band-dark {
  background: var(--ink);
  color: var(--ink-text);
}
.band-light {
  background: var(--paper);
  color: var(--text-primary);
  /* v2 是有意的「深色首屏 + 浅色功能区」设计：浅色段（含里面的产品画面）
     固定使用浅色配色，不跟随系统深色，否则深色系统下会白底白字。 */
  color-scheme: light;
  --surface: #f4f3f0;
  --card: #ffffff;
  --border-subtle: #e7e6e2;
  --border-default: #d7d6d1;
  --border-strong: #a3a29d;
  --text-primary: #171717;
  --text-secondary: #575755;
  --text-tertiary: #6b6b67;
}
/* 深色首屏里的产品画面本身是浅色界面，同样锁死浅色配色。 */
.win, .phone {
  color-scheme: light;
  --surface: #f4f3f0;
  --card: #ffffff;
  --border-subtle: #e7e6e2;
  --border-default: #d7d6d1;
  --border-strong: #a3a29d;
  --text-primary: #171717;
  --text-secondary: #575755;
  --text-tertiary: #737371;
  --paper: #f4f3f0;
  --paper-raised: #ffffff;
  --paper-sunken: #e9e8e4;
}
.band-light + .band-light { padding-top: 0; }

.band-inner {
  width: 100%;
  max-width: calc(var(--page-max) + var(--page-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

/* 深色段里，正文颜色跟着翻面 */
.band-dark .lede,
.band-dark .meta { color: var(--ink-text-soft); }

/* ---------- v2 按钮 ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: var(--type-label);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease,
    box-shadow 140ms ease;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  /* 中性投影，不用彩色光晕 */
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 6px 16px rgba(15, 12, 10, 0.28);
}
.btn-primary:hover {
  background: var(--accent-strong);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 10px 22px rgba(15, 12, 10, 0.34);
}
.btn-ghost {
  border-color: var(--border-default);
  background: transparent;
  color: var(--text-primary);
}
.btn-ghost:hover { border-color: var(--text-primary); transform: translateY(-1px); }
.band-dark .btn-ghost {
  border-color: rgba(245, 243, 240, 0.24);
  color: var(--ink-text);
}
.band-dark .btn-ghost:hover {
  border-color: rgba(245, 243, 240, 0.6);
  background: rgba(245, 243, 240, 0.06);
}

/* ---------- 产品画面：窗口框 ---------- */

.stage {
  position: relative;
}
/* 一点柔光，让窗口从深色底上浮起来；不是装饰渐变，是打光。 */
.stage::before {
  content: "";
  position: absolute;
  inset: -12% -6% -18%;
  background: radial-gradient(58% 46% at 52% 30%, rgba(224, 122, 58, 0.16), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.win {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-win);
  background: var(--paper-raised);
  color: var(--text-primary);
  box-shadow: var(--shadow-win-dark);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: -0.011em;
  /* 太乙桌面端（cindy-light）的真实取值：无品牌 logo、选中项反相、运行中为橙 */
}
.band-light .win {
  box-shadow: var(--shadow-win);
  border-color: var(--border-subtle);
}

/* 顶部 46px chrome 行：与侧栏/主区同一行高，红绿灯悬浮其上 */
.win-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 34px;
  padding-inline: 14px;
  background: var(--w-surface);
}
.win-dots { display: flex; gap: 8px; }
.win-dots i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}
.win-dots i:nth-child(1) { background: #ff5f57; }
.win-dots i:nth-child(2) { background: #febc2e; }
.win-dots i:nth-child(3) { background: #28c840; }

.win-body { display: grid; grid-template-columns: 234px minmax(0, 1fr); }

/* 侧边栏：没有品牌区，顶部是空白拖拽行 */
.side {
  background: #eeeee9;
  border-right: 1px solid var(--w-border);
  padding: var(--space-2) 10px var(--space-3);
  display: grid;
  align-content: start;
  gap: 2px;
}
.side-nav {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 26px;
  padding-inline: 10px;
  border-radius: var(--radius-pill);
  color: var(--w-ink);
  font-size: 11px;
}
.side-nav svg { width: 15px; height: 15px; color: var(--w-dim); flex: none; }
.side-nav.is-on { background: var(--w-active); color: var(--w-active-fg); }
.side-nav.is-on svg { color: var(--w-active-fg); }
.side-head {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px 2px;
  color: var(--w-muted);
  font-size: 10.5px;
  font-weight: var(--weight-medium);
}
.side-item {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  height: 26px;
  padding-inline: 10px;
  border-radius: var(--radius-pill);
  color: var(--w-ink);
}
.side-item.is-active { background: var(--w-active); color: var(--w-active-fg); }
.side-item i {
  width: 13px;
  height: 13px;
  display: block;
  color: var(--w-muted);
}
.side-item i svg { width: 13px; height: 13px; display: block; }
.side-item.is-running i { color: var(--w-accent); }
.side-item.is-active i { color: var(--w-active-fg); }
.side-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: var(--weight-medium);
}
.side-item em { font-style: normal; font-size: 10px; color: var(--w-muted); }
.side-item.is-active em { color: var(--w-active-fg); opacity: 0.75; }
.side-dot { width: 7px; height: 7px; border-radius: 50%; display: block; }
.side-dot.done { background: var(--w-done); }

/* 主区 */
.main { display: grid; grid-template-rows: 1fr auto; background: var(--w-surface); }
.main-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: 8px 14px;
  border-bottom: 1px solid var(--w-border);
}
.win-task-title {
  margin: 0;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--w-ink);
}
.main-head .tag {
  font-size: 10px;
  color: var(--w-muted);
  border: 1px solid var(--w-border);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
}

.thread {
  padding: 10px 14px 8px;
  display: grid;
  gap: 8px;
  align-content: start;
}
.msg { display: grid; gap: 6px; }
/* 用户消息：右对齐、12px 圆角、白底细描边、无头像 */
.msg-user { justify-items: end; }
.msg-user .bubble {
  background: var(--w-elevated);
  border: 1px solid var(--w-border);
  border-radius: 12px;
  padding: 6px 10px;
  max-width: 78%;
  color: var(--w-ink);
}
/* Agent 回复：左对齐、无气泡、无头像 */
.msg-agent { display: grid; gap: 6px; color: var(--w-ink); }
.msg-body { display: grid; gap: 9px; }
.msg-body p { color: var(--w-ink); }

/* 工具动作行：14px 动词 + 参数 chip + 右侧箭头 */
.action {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 6px;
  border-radius: 8px;
  color: var(--w-dim);
  font-size: 10.5px;
}
.action svg { width: 13px; height: 13px; flex: none; }
.action .verb { white-space: nowrap; }
.action .chip {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--w-chip);
  color: var(--w-ink);
  font-size: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.action .chev { margin-left: auto; color: var(--w-muted); flex: none; }
.action .add { color: #22863a; font-weight: 500; }
.action .del { color: #b31d28; font-weight: 500; }

/* 运行中状态条：橙字 + 图标，无背景填充，贴输入框上方 */
.runbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 var(--space-5) 2px;
  padding: 2px;
  color: var(--w-accent);
  font-size: 10.5px;
  font-weight: var(--weight-medium);
}
.runbar svg { width: 14px; height: 14px; flex: none; }
.runbar .meta { margin-left: auto; color: var(--w-muted); font-size: 10px; }

/* 输入框：12px 圆角（不是胶囊），白底细描边 */
.composer {
  margin: 0 var(--space-5) var(--space-4);
  border: 1px solid var(--w-border);
  border-radius: 12px;
  padding: 8px 10px 6px;
  display: grid;
  gap: 8px;
  background: var(--w-elevated);
}
.composer .ph { color: var(--w-dim); font-size: 11px; }
.composer-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 10.5px;
  color: var(--w-dim);
}
.composer-row .pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  color: var(--w-ink);
  font-size: 10.5px;
}
.composer-row .pill .sep { color: var(--w-muted); }
.composer-row .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.composer-send {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--w-active);
  color: var(--w-active-fg);
  display: grid;
  place-items: center;
  flex: none;
}
.composer-send svg { width: 14px; height: 14px; }


/* ---------- 产品画面：手机框 ---------- */

/* 按 apps/mobile 真实结构画：手机端没有底部 Tab，聊天页 = 顶栏 + 消息 + 输入框，
   远程桌面 = 全屏画面 + 悬浮工具栏。颜色取 mobile tokens.ts 的 light 值。 */
.phone {
  position: relative;
  z-index: 2;
  width: 268px;
  border-radius: 42px;
  padding: 9px;
  background: linear-gradient(160deg, #3a3835, #14130f 58%, #2b2926);
  box-shadow: var(--shadow-phone);
  color-scheme: light;
}
.phone-screen {
  border-radius: 34px;
  background: var(--m-surface);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-height: 508px;
  position: relative;
  color: var(--m-text);
}
.phone-notch {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: #100f0e;
  z-index: 3;
}
.phone-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 22px 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--m-text);
}

/* 聊天页顶栏：透明 + 标题药丸，左返回，右三个图标同处一个容器 */
.phone-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-height: 46px;
  padding: 2px 8px 8px;
}
.phone-nav .ico {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--m-text);
}
.phone-nav .ico svg { width: 20px; height: 20px; }
.phone-nav .phone-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  max-width: 52%;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  background: rgba(249, 249, 246, 0.9);
  backdrop-filter: blur(20px);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phone-nav .acts { display: flex; }
.phone-nav .acts .ico { width: 36px; }

.phone-thread {
  padding: 6px 16px 12px;
  display: grid;
  gap: 2px;
  align-content: start;
}
.phone .bubble {
  font-size: 15px;
  line-height: 1.5;
  border-radius: 12px;
  padding: 10px 13px;
  max-width: 86%;
}
/* 用户气泡：白底 + 1px 描边，圆角 12（不是彩色气泡） */
.phone .bubble.user {
  justify-self: end;
  margin-top: 10px;
  background: var(--m-elevated);
  border: 1px solid var(--m-border-strong);
  color: var(--m-text);
}
/* Agent 回复：无气泡，纯文本铺满 */
.phone .bubble.agent {
  justify-self: stretch;
  max-width: none;
  padding: 8px 0;
  background: transparent;
  color: var(--m-text-2);
}
.phone .bubble.agent b { color: var(--m-text); font-weight: 600; }
/* 手机聊天里的动作行与运行状态条，和桌面窗口一一对应 */
.p-agent { display: grid; gap: 7px; padding: 8px 0 4px; }
.p-agent p { color: var(--m-text-2); }
.p-action {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--m-text-3);
  font-size: 13.5px;
}
.p-action svg { width: 13px; height: 13px; flex: none; }
.p-chip {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--m-chip);
  color: var(--m-text);
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  white-space: nowrap;
}
.p-run {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  color: var(--m-accent);
  font-size: 13.5px;
  font-weight: var(--weight-medium);
}
.p-run svg { width: 14px; height: 14px; flex: none; }
.phone .time-sep {
  justify-self: center;
  margin: 8px 0 4px;
  font-size: 12px;
  color: var(--m-text-3);
}

/* 底部输入框：胶囊形，浅灰底，近黑发送钮 */
.phone-composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 0 16px 18px;
  padding: 12px 12px 12px 16px;
  border-radius: var(--radius-pill);
  background: #f1f1ec;
  border: 1px solid var(--m-border);
}
.phone-composer span {
  flex: 1;
  font-size: 15px;
  color: var(--m-placeholder);
}
.phone-composer i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--m-cta);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
}
.phone-composer i svg { width: 17px; height: 17px; }

/* ---------- v2 页眉（坐在深色首屏里） ---------- */

.site-header-v2 {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-bottom: clamp(28px, 4vw, 48px);
}
.site-header-v2 .brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: var(--ink-text);
  text-decoration: none;
}
.site-header-v2 .brand img { width: 26px; height: 26px; }
.site-header-v2 .site-nav {
  margin-left: auto;
  display: flex;
  gap: var(--space-6);
  font-size: var(--type-label);
}
.site-header-v2 .site-nav a {
  color: var(--ink-text-soft);
  text-decoration: none;
  transition: color 140ms ease;
}
.site-header-v2 .site-nav a:hover { color: var(--ink-text); }
.site-header-v2 .site-nav a[aria-current="page"] { color: var(--ink-text); }
.btn-sm { min-height: 38px; padding: 0 var(--space-5); font-size: var(--type-meta); }

/* ---------- 首屏 ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 7vw, 96px) clamp(64px, 8vw, 120px);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 78% -10%, rgba(224, 122, 58, 0.18), transparent 60%);
  pointer-events: none;
}
.hero .band-inner { position: relative; z-index: 1; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ink-line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink-text-soft);
  font-size: var(--type-meta);
  font-weight: var(--weight-medium);
}
.hero-eyebrow b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-bright);
  font-weight: 600;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.3fr);
  gap: clamp(32px, 4vw, 60px);
  align-items: center;
  margin-top: var(--space-8);
}
.hero-claim { display: grid; gap: var(--space-6); justify-items: start; }
.hero-claim h1 {
  margin: 0;
  font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.5rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.hero-claim h1 .hl { color: var(--accent-bright); }
.hero-claim .lede { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); max-width: 30em; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  color: var(--ink-text-soft);
  font-size: var(--type-meta);
}
.hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero-meta span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* 首屏产品画面：桌面窗口 + 叠放的手机 */
.hero-stage {
  position: relative;
  padding-bottom: 40px;
}
.hero-stage .win {
  width: calc(100% - 150px);
  transform: perspective(1600px) rotateY(-7deg) rotateX(2deg);
}
.hero-phone {
  position: absolute;
  right: -36px;
  bottom: -8px;
  transform: scale(0.66);
  transform-origin: bottom right;
}

/* 三步开始：首屏右下的窄条，真实先后顺序用有序编号 */
.hero-steps {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(40px, 5vw, 64px);
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.hero-step {
  background: var(--ink-raised);
  padding: var(--space-6);
  display: grid;
  gap: 6px;
  align-content: start;
}
.hero-step b {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--type-label);
  font-weight: var(--weight-semibold);
}
.hero-step b::before {
  counter-increment: step;
  content: counter(step);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-bright);
  font-size: 12px;
  font-weight: 700;
}
.hero-steps { counter-reset: step; }
.hero-step span { color: var(--ink-text-soft); font-size: var(--type-meta); }

/* ---------- 功能区 ---------- */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(36px, 5vw, 84px);
  align-items: center;
}
.feature + .feature { margin-top: clamp(72px, 9vw, 132px); }
.feature.flip .feature-copy { order: 2; }

.feature-copy { display: grid; gap: var(--space-5); justify-items: start; }
.feature-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--type-meta);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.band-dark .feature-kicker { color: var(--accent-bright); }
.feature-kicker::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.feature-copy h2 {
  margin: 0;
  font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3rem);
  line-height: 1.14;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-wrap: balance;
}
.feature-copy p { color: var(--text-secondary); max-width: 32em; }
.band-dark .feature-copy p { color: var(--ink-text-soft); }
.feature-list { display: grid; gap: 10px; margin-top: var(--space-1); }
.feature-list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  font-size: var(--type-label);
  color: var(--text-secondary);
}
.band-dark .feature-list li { color: var(--ink-text-soft); }
.feature-list li::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  /* 枫铜圆底 + 白色对勾 */
  background: var(--accent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.4 8.5l2.5 2.5 4.7-5.4' fill='none' stroke='%23fff8f2' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 11px no-repeat;
  transform: translateY(2px);
}

/* ---------- 伙伴：头像列表 + 和某个伙伴的对话 ---------- */

.bot-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--w-chip);
  color: var(--w-ink);
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  flex: none;
  position: relative;
}
.bot-avatar.tint-a { background: #f0e2dc; }
.bot-avatar.tint-b { background: #e3e8f0; }
.bot-avatar.tint-c { background: #e2ece6; }
.bot-avatar.tint-d { background: #ece5f0; }

.bot-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 7px 9px;
  border-radius: 10px;
}
.bot-row.is-active { background: var(--w-chip); }
.bot-row .who { display: grid; gap: 1px; min-width: 0; }
.bot-row .who b {
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--w-ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.bot-row .who span {
  font-size: 10px;
  color: var(--w-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bot-row .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--w-done); flex: none;
}

/* 伙伴对话里的回复带圆头像（产品里只有伙伴对话是这样） */
.msg-bot {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 9px;
  align-items: start;
}
.msg-bot .bot-avatar { width: 26px; height: 26px; font-size: 11px; }

/* ---------- 共享任务：成员与进度 ---------- */

.members { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; white-space: nowrap; }
.members .stack { display: flex; }
.member {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--w-chip);
  color: var(--w-ink);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  border: 2px solid var(--w-surface);
  margin-left: -7px;
}
.member:first-child { margin-left: 0; }
.member.me { background: var(--accent); color: var(--accent-ink); }
.members .count { font-size: 10px; color: var(--w-muted); white-space: nowrap; }

/* 共享任务侧栏：最近的任务在上，「更早」沉到底，避免下半截大片留白 */
.stage-shared .side {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.stage-shared .side-spacer { flex: 1 1 auto; min-height: 8px; }
.stage-shared .side-older { padding-top: 8px; }
.stage-shared .thread { padding: 12px 16px 8px; gap: 10px; }
.stage-shared .composer { margin: 0 16px 12px; padding: 8px 10px 6px; gap: 8px; }
.stage-shared .progress-card { padding: 8px 10px; gap: 6px; }

/* 共享任务里，消息带发言人名字 */
.speaker {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  color: var(--w-muted);
}
.speaker .member { width: 18px; height: 18px; font-size: 10px; border-width: 0; margin: 0; }
.speaker b { color: var(--w-ink); font-weight: var(--weight-medium); }

/* 任务进度：一条细进度条 + 说明 */
.progress-card {
  border: 1px solid var(--w-border);
  border-radius: 10px;
  background: var(--w-elevated);
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}
.progress-card .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 10.5px;
  color: var(--w-ink);
}
.progress-card .top b { font-weight: var(--weight-medium); }
.progress-card .top span { color: var(--w-muted); font-size: 10px; }
.progress-track {
  height: 4px;
  border-radius: 2px;
  background: var(--w-chip);
  overflow: hidden;
}
.progress-track i {
  display: block;
  height: 100%;
  width: 62%;
  border-radius: 2px;
  background: var(--accent);
}
.progress-card .steps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 10px;
  color: var(--w-muted);
}
.progress-card .steps span { display: inline-flex; align-items: center; gap: 6px; }
.progress-card .steps span::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--w-done);
}
.progress-card .steps span.todo::before { background: var(--w-border); }

/* ---------- 内页深色页头（下载 / 价格共用） ---------- */

.page-hero { padding-block: 0 clamp(48px, 6vw, 84px); }
.page-hero h1 {
  margin: 0;
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.page-hero .lede {
  margin-top: var(--space-5);
  max-width: 36em;
  color: var(--ink-text-soft);
}
.band-light .section { padding-top: clamp(56px, 7vw, 96px); }

/* ---------- 订阅路径 / 三条事实 / 收尾 ---------- */

.paths-v2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-8);
}
.path-v2 {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding-top: var(--space-5);
  border-top: 2px solid var(--text-primary);
}
.path-v2 h3 { font-size: var(--type-subsection); font-weight: var(--weight-semibold); }
.path-v2 p { color: var(--text-secondary); }
.path-v2 .text-link { justify-self: start; margin-top: var(--space-1); color: var(--accent-strong); }

.facts-v2 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-12);
}
.facts-v2 > div { display: grid; gap: var(--space-1); }
.facts-v2 dt { font-weight: var(--weight-medium); }
.facts-v2 dd { color: var(--text-secondary); font-size: var(--type-label); }

.closing {
  margin-top: clamp(72px, 9vw, 120px);
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}
.closing h2 {
  font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 700;
}
.closing .lede { max-width: 34em; }

/* ---------- 远程控制：横屏手机里的电脑桌面 ---------- */

.remote-stage {
  display: grid;
  justify-items: center;
  position: relative;
}
.remote-stage::before {
  content: "";
  position: absolute;
  inset: -6% 6% -10%;
  background: radial-gradient(52% 44% at 50% 42%, rgba(224, 122, 58, 0.16), transparent 70%);
  pointer-events: none;
}

/* 横屏手机，比例接近 19.5:9。桌面栏加宽，整机高于 260px */
.remote-phone {
  width: min(100%, 680px);
  aspect-ratio: 19.5 / 9;
  border-radius: 30px;
  padding: 7px;
}
@media (min-width: 1081px) {
  .feature-remote {
    grid-template-columns: minmax(0, 1.28fr) minmax(260px, 0.72fr);
  }
  .feature-shared {
    grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.92fr);
  }
}
.remote-phone .phone-screen {
  border-radius: 24px;
  background: #201f1d;
  overflow: hidden;
  position: relative;
  height: 100%;
  display: block;
  min-height: 0;
}
/* 横屏没有刘海，状态栏也隐藏（远程桌面是全屏沉浸） */
.remote-phone .phone-notch { display: none; }

/* 屏幕里是电脑桌面：壁纸 + 缩小的太乙窗口（约 70% 宽）+ Dock */
.remote-desk {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, #6f7a8c 0%, #4a5361 45%, #333a45 100%);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 36px 0 0;
}
.remote-desk .desk-win {
  width: 70%;
  margin-left: 16px;
  justify-self: start;
  align-self: center;
  border-radius: 8px;
  overflow: hidden;
  background: var(--w-surface);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.42);
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--w-ink);
}
.remote-desk .desk-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding-inline: 8px;
  background: var(--w-elevated);
  border-bottom: 1px solid var(--w-border);
  border-radius: 8px 8px 0 0;
}
.remote-desk .desk-bar i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.remote-desk .desk-bar i:nth-child(1) { background: #ff5f57; }
.remote-desk .desk-bar i:nth-child(2) { background: #febc2e; }
.remote-desk .desk-bar i:nth-child(3) { background: #28c840; }
.remote-desk .desk-bar b {
  margin-left: 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--w-muted);
}
.remote-desk .desk-body { display: grid; grid-template-columns: 34% minmax(0, 1fr); }
.remote-desk .desk-side {
  background: #eeeee9;
  border-right: 1px solid var(--w-border);
  padding: 6px 5px 8px;
  display: grid;
  gap: 3px;
  align-content: start;
}
.remote-desk .desk-side span {
  display: block;
  padding: 3px 6px;
  border-radius: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--w-ink);
}
.remote-desk .desk-side span.on {
  background: var(--w-active);
  color: var(--w-active-fg);
}
.remote-desk .desk-main {
  padding: 7px 8px 8px;
  display: grid;
  gap: 5px;
  align-content: start;
  background: var(--w-surface);
  border-radius: 0 0 8px 0;
}
.remote-desk .desk-title {
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.remote-desk .desk-user {
  margin: 0;
  justify-self: end;
  max-width: 92%;
  padding: 4px 7px;
  border-radius: 8px;
  background: var(--w-elevated);
  border: 1px solid var(--w-border);
}
.remote-desk .desk-agent { margin: 0; color: var(--w-ink); }
.remote-desk .desk-run {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--w-accent);
  font-weight: 600;
}
.remote-desk .desk-run svg { width: 11px; height: 11px; flex: none; }
.remote-desk .desk-send {
  position: relative;
  justify-self: end;
  margin-top: 2px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #3c3f43;
  color: #fcfcfc;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}
/* Dock：一眼认得出是电脑 */
.remote-desk .dock {
  justify-self: center;
  margin-bottom: 8px;
  display: flex;
  gap: 7px;
  padding: 6px 9px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.remote-desk .dock i {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  display: block;
  background: rgba(255, 255, 255, 0.55);
}
.remote-desk .dock i:nth-child(1) { background: #fdfdf8; }
.remote-desk .dock i:nth-child(3) { background: #b0521a; }
.remote-desk .dock i:nth-child(4) { background: #3c3f43; }

/* 顶部悬浮状态条：深色渐变打底，压在壁纸上也清晰可读 */
.remote-overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  /* 右侧留出工具栏 rail 的宽度，避免文字压到 rail 上 */
  padding: 9px 74px 22px 12px;
  background: linear-gradient(rgba(12, 12, 11, 0.62), rgba(12, 12, 11, 0));
  z-index: 5;
  pointer-events: none;
}
.remote-overlay .back {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  flex: none;
}
.remote-overlay .back svg { width: 17px; height: 17px; }
.remote-net {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #fff;
}
.remote-net .live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: rgba(234, 107, 23, 0.9);
  font-size: 10.5px;
  font-weight: 600;
}
.remote-net .live::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%; background: #fff;
}
.remote-net .rate {
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: rgba(12, 12, 11, 0.55);
  font-size: 11px;
  font-weight: 500;
}

.desk-send .remote-cursor {
  position: absolute;
  left: auto;
  right: -1px;
  top: 4px;
  bottom: auto;
  width: 14px;
  height: 14px;
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}
.remote-desk .desk-send { padding-right: 16px; }
.remote-cursor svg { width: 100%; height: 100%; display: block; }
.remote-cursor::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 2px solid #ea6b17;
  animation: tap 2.4s ease-out infinite;
}
@keyframes tap {
  0% { transform: scale(0.4); opacity: 0.75; }
  70% { transform: scale(1.6); opacity: 0; }
  100% { opacity: 0; }
}

/* 工具栏：横屏时收成右侧竖排 rail（真实远程桌面的横屏形态） */
.remote-tools {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  padding: 6px;
  border-radius: 13px;
  background: rgba(249, 249, 246, 0.86);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  z-index: 4;
}
.remote-tools button {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 52px;
  padding: 6px 0 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #0f0f0f;
  font: inherit;
  font-size: 10px;
}
.remote-tools button.is-on { background: #eaeae6; }
.remote-tools svg { width: 18px; height: 18px; }

/* ---------- v2 入场动效：轻微、只做一次，遵守 prefers-reduced-motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js-reveal .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 640ms cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 640ms cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .js-reveal .reveal.is-in { opacity: 1; transform: none; }

  .hero-stage .win {
    opacity: 0;
    transform: perspective(1600px) rotateY(-7deg) rotateX(2deg) translateY(26px) scale(0.98);
    animation: win-in 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 120ms forwards;
  }
  .hero-phone {
    opacity: 0;
    animation: phone-in 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 320ms forwards;
  }
  @keyframes win-in {
    to { opacity: 1; transform: perspective(1600px) rotateY(-7deg) rotateX(2deg); }
  }
  @keyframes phone-in {
    to { opacity: 1; }
  }
}

/* ---------- v2 响应式 ---------- */

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 64px); }
  .hero-claim { justify-items: start; }
  .hero-stage { max-width: 720px; }
  .feature { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .feature.flip .feature-copy { order: 0; }
  .win-body { grid-template-columns: 208px minmax(0, 1fr); }
}

@media (max-width: 760px) {
  :root { --page-pad: 20px; }
  .band { padding-block: 64px; }
  .hero { padding-block: 36px 72px; }
  .hero-steps { grid-template-columns: minmax(0, 1fr); }
  .hero-step { padding: var(--space-5); }

  /* 页眉：手机上藏起按钮，导航靠左，避免挤掉右端 */
  .site-header-v2 { gap: var(--space-4); padding-bottom: 28px; }
  .site-header-v2 .site-nav { gap: var(--space-5); font-size: var(--type-meta); }
  .site-header-v2 .btn-sm { display: none; }

  /* 标题：手机上收一档，去掉强制换行，交给自然折行 */
  .hero-claim h1 { font-size: clamp(1.7rem, 1rem + 4.4vw, 2.15rem); }
  .hero-claim h1 .hero-br { display: none; }
  .hero-claim { gap: var(--space-5); }

  .hero-stage .win { font-size: 11px; }
  .hero-stage .thread { padding: var(--space-4) var(--space-4) var(--space-3); gap: var(--space-3); }
  .hero-stage .main-head { padding: 10px var(--space-4); }
  .hero-stage .main-head .tag { display: none; }
  .hero-stage .composer { margin: 0 var(--space-4) var(--space-4); }

  /* 手机上不再叠放：手机单独一行，缩小、居中，桌面窗口正着放。 */
  .hero-stage { padding-bottom: 0; }
  /* 手机上产品窗口改为上下堆叠，避免两栏被挤成逐字换行 */
  .hero-stage .win { transform: none; }
  .win-body { grid-template-columns: minmax(0, 1fr); }
  .win .side { border-right: 0; border-bottom: 1px solid var(--w-border); }
  /* 首屏窗口只留主区，其余窗口保留侧栏（伙伴列表 / 共享任务列表是内容本身） */
  .hero-stage .side { display: none; }
  .main-head .tag { display: none; }
  .composer { margin-inline: var(--space-4); }
  .thread { padding: var(--space-4); }
  .hero-phone {
    position: static;
    transform: scale(0.94);
    transform-origin: center;
    margin: 28px auto 0;
  }
  @media (prefers-reduced-motion: no-preference) {
    .hero-stage .win { transform: translateY(26px) scale(0.98); }
    @keyframes win-in { to { opacity: 1; transform: none; } }
  }

  .feature-copy h2 { letter-spacing: -0.02em; }
  /* 横屏手机在窄屏上按 19.5:9 缩放，内部不重排 */
  .remote-phone { width: 100%; }
  .remote-tools { gap: 2px; padding: 5px; }
  .remote-tools button { width: 42px; font-size: 10px; }
  .remote-tools svg { width: 16px; height: 16px; }
  .remote-desk { padding: 14px 0 0; }
  .remote-desk .desk-win { margin-left: 8px; font-size: 10px; }
  .remote-desk .desk-bar { height: 14px; }
  .remote-net .rate { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .remote-cursor::after { animation: none; opacity: 0; }
  .btn:hover { transform: none; }
}