/* 方案 B（动效科技感）公共样式：zh/ja/en × 首页 / FAQ 共用 */
  :root {
    --bg: #07090D; --bg2: #0D1117; --card: #11161F; --line: #1E2633;
    --text: #E8ECF2; --muted: #93A0B4; --faint: #64718A;
    --accent: #4C7DFF; --accent-ink: #050812; --accent-dim: rgb(76 125 255 / .14);
    --radius: 14px; --mono: "Geist Mono", ui-monospace, monospace;
  }
  * { box-sizing: border-box; margin: 0; }
  html { background: var(--bg); }
  body { background: var(--bg); color: var(--text); font-family: Geist, "Noto Sans SC", sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  a { color: inherit; text-decoration: none; }
  .wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
  section { padding: 128px 0; position: relative; }
  h1, h2, h3 { letter-spacing: -0.025em; line-height: 1.15; font-weight: 700; }
  h2 { font-size: clamp(32px, 4.4vw, 56px); max-width: 16ch; }
  .tag { font-family: var(--mono); font-size: 13px; color: var(--accent); margin-bottom: 20px; display: block; }
  .lead { color: var(--muted); font-size: 18px; max-width: 56ch; margin-top: 20px; }
  .btn { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 26px; border-radius: 999px; font-weight: 600; font-size: 15px; white-space: nowrap; transition: transform .25s cubic-bezier(.16,1,.3,1), background .2s, border-color .2s; }
  .btn:active { transform: scale(.97); }
  .btn-primary { background: var(--accent); color: #fff; }
  .btn-primary:hover { background: #6390FF; }
  .btn-ghost { border: 1px solid var(--line); }
  .btn-ghost:hover { border-color: var(--accent); }
  .shot { border: 1.5px dashed #2A3446; border-radius: var(--radius); background: var(--bg2); display: grid; place-items: center; color: var(--faint); font-size: 14px; text-align: center; padding: 16px; }

  /* 导航 */
  nav { position: fixed; inset: 0 0 auto; z-index: 20; border-bottom: 1px solid transparent; transition: background .3s, border-color .3s; }
  nav.solid { background: rgb(7 9 13 / .8); backdrop-filter: blur(14px); border-color: var(--line); }
  nav .wrap { height: 68px; display: flex; align-items: center; gap: 36px; }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
  .brand img { width: 28px; height: 28px; border-radius: 7px; }
  .links { display: flex; gap: 28px; font-size: 14px; color: var(--muted); }
  .links a:hover { color: var(--text); }
  nav .btn { margin-left: auto; height: 40px; padding: 0 18px; font-size: 14px; }

  /* 1 Hero：WebGL 流场背景 = 「一群在后台持续工作的 AI」的隐喻；标题逐字浮现建立第一印象 */
  .hero { min-height: 100dvh; display: flex; align-items: center; padding: 120px 0 80px; overflow: hidden; }
  #field { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, var(--bg)); pointer-events: none; }
  .hero .wrap { position: relative; z-index: 1; width: 100%; }
  .hero h1 { font-size: clamp(44px, 7vw, 96px); max-width: 12ch; }
  .hero h1 .hl { color: var(--accent); }
  .hero .lead { font-size: 19px; }
  .cta-row { display: flex; gap: 12px; margin-top: 40px; flex-wrap: wrap; }
  .status { position: absolute; right: 24px; bottom: 0; font-family: var(--mono); font-size: 12px; color: var(--faint); display: grid; gap: 6px; text-align: right; }

  /* 2 产品图倾斜入场：滚动时从 3D 倾斜放平，提示「这是真实可用的软件」 */
  .reveal-shot { perspective: 1400px; padding: 0 0 40px; }
  /* 演示视频：去掉占位虚线与内边距，视频铺满并按录屏比例显示 */
  .shot.video { padding: 0; border: 1px solid #2A3446; overflow: hidden; background: #0f1115; }
  .shot.img { padding: 0; border: 1px solid #2A3446; overflow: hidden; }
  .shot.img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
  .shot.video video { display: block; width: 100%; height: 100%; object-fit: cover; }
  .reveal-shot .shot { aspect-ratio: 1600/846; transform-origin: 50% 0; box-shadow: 0 40px 120px rgb(76 125 255 / .12); }

  /* 3 问题陈述：长句随滚动逐词点亮，迫使读者按节奏读完论点 */
  .manifesto p { font-size: clamp(28px, 3.6vw, 48px); font-weight: 600; line-height: 1.35; letter-spacing: -0.02em; max-width: 24ch; }
  .manifesto .w { color: #2A3446; transition: color .2s; }

  /* 4 员工：纵向滚动转横向平移，一屏一名员工，像翻看人才档案 */
  /* 员工区：页面纵向滚动与卡片横移分开。卡片放在可横向滚动的容器里，motion.js 让它默认缓慢左移，
     用户可拖动 / 触控板横滑 / 拖滚动条自由控制 */
  .pan { padding: 128px 0; }
  .pan-head { margin-bottom: 48px; }
  .track { display: flex; gap: 24px; padding: 0 max(24px, calc((100vw - 1240px) / 2 + 24px)) 20px; overflow-x: auto; cursor: grab; scrollbar-width: none; }
  .track::-webkit-scrollbar { display: none; }
  /* 卡片位置指示：半透明小方块，数量与卡片相同，当前卡片更亮 */
  .dots { display: flex; justify-content: center; gap: 10px; margin-top: 28px; }
  .dots button { width: 10px; height: 10px; border: 0; border-radius: 2px; padding: 0; background: rgb(255 255 255 / .18); cursor: pointer; transition: background .3s, width .3s; }
  .dots button.on { background: rgb(255 255 255 / .7); width: 22px; }
  .track.dragging { cursor: grabbing; user-select: none; }
  .track img { -webkit-user-drag: none; }
  .emp { flex: none; width: min(520px, 82vw); border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); padding: 36px; display: flex; flex-direction: column; gap: 18px; min-height: 420px; }
  .emp .who { display: flex; align-items: center; gap: 16px; }
  .emp img { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; }
  .emp h3 { font-size: 24px; }
  .emp .role { font-family: var(--mono); font-size: 12px; color: var(--faint); }
  .emp p { color: var(--muted); font-size: 16px; }
  .emp .shot { flex: 1; min-height: 160px; font-size: 13px; }
  .emp.custom { background: var(--accent); color: #fff; border-color: transparent; justify-content: space-between; }
  .emp.custom p { color: rgb(255 255 255 / .8); }
  .emp.custom .btn { background: #fff; color: var(--accent-ink); align-self: flex-start; }
  /* 系统开启「减少动态效果」时 motion.js 不挂横向平移，一屏高 + 裁剪会把后面的员工卡切掉；
     改成自动高度、不裁剪的网格，五张卡片都能纵向滚动看到。放在手机断点之前，手机端的内边距仍以手机规则为准。 */
  @media (prefers-reduced-motion: reduce) {
    .pan { display: block; height: auto; overflow: visible; padding: 128px 0; } /* 改回块级：flex 列里 margin:auto 会让网格按 max-width 撑开，窄屏横向溢出 */
    .track { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); max-width: 1240px; margin: 0 auto; padding: 0 24px; overflow: visible; cursor: auto; }
    .emp { width: auto; }
  }

  /* 5 五阶段：台阶随滚动逐级升起，数字递增，直观表达「逐级爬升」 */
  .stairs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: end; height: 440px; margin-top: 56px; }
  .step { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
  .bar { border-radius: var(--radius) var(--radius) 4px 4px; background: linear-gradient(180deg, var(--accent-dim), transparent); border: 1px solid var(--line); border-bottom: 0; transform-origin: bottom; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
  .step:nth-child(1) .bar { height: 42%; } .step:nth-child(2) .bar { height: 56%; } .step:nth-child(3) .bar { height: 70%; }
  .step:nth-child(4) .bar { height: 84%; border-color: rgb(76 125 255 / .4); }
  .step:nth-child(5) .bar { height: 100%; background: linear-gradient(180deg, var(--accent), rgb(76 125 255 / .35)); border-color: transparent; }
  .lv { font-family: var(--mono); font-size: 12px; color: var(--accent); }
  .step:nth-child(5) .lv, .step:nth-child(5) p { color: rgb(255 255 255 / .85); }
  .bar h3 { font-size: 20px; }
  .bar p { font-size: 14px; color: var(--muted); }
  .brackets { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; margin-top: 18px; font-size: 14px; color: var(--muted); }
  .brackets div { position: relative; padding-top: 14px; }
  .brackets div::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--line); transform-origin: left; transform: scaleX(var(--p, 1)); }
  .brackets div:last-child::before { background: var(--accent); }
  .brackets b { color: var(--text); display: block; }
  .more { margin-top: 32px; display: inline-flex; gap: 8px; color: var(--accent); font-weight: 600; }

  /* 6 导入流程：进度线随滚动画出，节点依次点亮 = 项目推进 */
  .timeline { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 64px; position: relative; }
  .rail { position: absolute; top: 8px; left: 0; right: 0; height: 2px; background: var(--line); }
  .rail i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); }
  .node { padding-right: 32px; position: relative; }
  .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); background: var(--bg); margin-bottom: 28px; position: relative; transition: border-color .3s, background .3s; }
  .node.on .dot { border-color: var(--accent); background: var(--accent); }
  .node h3 { font-size: 22px; }
  .node .time { font-family: var(--mono); font-size: 12px; color: var(--accent); margin-top: 4px; }
  .node p { color: var(--muted); margin-top: 10px; font-size: 15px; }

  /* 7 能力跑马灯：全页唯一一条，表达「能接的东西很多」，不需要逐个细读 */
  .marquee { padding: 40px 0; border-block: 1px solid var(--line); overflow: hidden; }
  .marquee-row { display: flex; gap: 56px; width: max-content; font-family: var(--mono); font-size: 22px; color: var(--muted); }
  .marquee-row span { display: inline-flex; align-items: center; gap: 56px; }
  .marquee-row span::after { content: "/"; color: var(--accent); }

  /* 8 定价：卡片边框跟随鼠标亮起（spotlight），给静态价目一点可触感 */
  .plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; }
  .plan { position: relative; border-radius: var(--radius); background: var(--card); padding: 30px; display: flex; flex-direction: column; isolation: isolate; }
  .plan::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), var(--accent), var(--line) 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; }
  .plan.pick::before { background: var(--accent); }
  .plan .name { font-family: var(--mono); font-size: 14px; display: flex; justify-content: space-between; }
  .pill { font-size: 11px; background: var(--accent); color: #fff; padding: 2px 10px; border-radius: 999px; font-family: Geist, sans-serif; }
  .price { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; margin-top: 18px; font-variant-numeric: tabular-nums; }
  .price small { font-size: 15px; color: var(--faint); font-weight: 400; }
  .pts { font-family: var(--mono); font-size: 13px; color: var(--muted); }
  .plan ul { list-style: none; padding: 0; margin: 22px 0 28px; display: grid; gap: 10px; font-size: 14px; color: var(--muted); flex: 1; }
  .plan li::before { content: "+ "; color: var(--accent); font-family: var(--mono); }
  .plan .btn { justify-content: center; }
  .enterprise { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 30px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
  .enterprise span { color: var(--muted); flex: 1; min-width: 260px; }

  /* 9 收尾 CTA */
  .final { text-align: left; padding: 160px 0; overflow: hidden; }
  .final h2 { font-size: clamp(40px, 6.5vw, 88px); max-width: 14ch; }
  .dl { display: flex; gap: 12px; margin-top: 44px; flex-wrap: wrap; }
  footer { border-top: 1px solid var(--line); padding: 36px 0; font-size: 14px; color: var(--faint); }
  footer .wrap { display: flex; gap: 24px; flex-wrap: wrap; }
  /* 页脚链接：单个链接内不折字，放不下时整条链接换到下一行（手机上多行排列，而不是每个链接被挤成两行） */
footer .fl { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px 20px; }
footer .fl a { white-space: nowrap; }

  @media (max-width: 860px) {
    section { padding: 88px 0; }
    .wrap { padding: 0 16px; }
    .links { display: none; }
    .status { display: none; }
    .stairs { grid-template-columns: 1fr; height: auto; }
    .step .bar { height: auto !important; min-height: 140px; }
    .brackets, .timeline, .plans { grid-template-columns: 1fr; gap: 28px; }
    .rail { display: none; }
    .pan { height: auto; padding: 88px 0; }
    .track { padding: 0 16px 16px; }
    .emp { min-height: 0; }
    /* 85vw 只给横滑布局；减少动态效果时是网格，卡片宽度要留给网格列决定 */
    @media (prefers-reduced-motion: no-preference) { .emp { width: 85vw; } }
  }

/* 标签前缀由 CSS 生成，HTML 里只放纯文字，方便三语对照表精确匹配 */
.tag::before { content: "// "; }
.more::after { content: " →"; }
nav .btn { margin-left: 0; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* 语言下拉（仿 Yuichat，暗色版）：字标徽章 + 语言名 + 箭头 */
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border-radius: 10px; font-size: 14px; font-weight: 500; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover { background: var(--card); }
.lang summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s cubic-bezier(.16,1,.3,1); }
.lang[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.badge { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--accent-dim); color: var(--accent); flex: none; }
.lang summary .badge, .lang .cur .badge { background: var(--accent); color: #fff; }
.lang .menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 170px; padding: 6px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 20px 50px rgb(0 0 0 / .5); display: grid; gap: 2px; animation: drop .25s cubic-bezier(.16,1,.3,1); }
@keyframes drop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.lang .menu a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; font-size: 14px; }
.lang .menu a:hover { background: var(--bg2); }
.lang .menu a.cur { background: var(--accent-dim); color: var(--accent); font-weight: 600; }

/* FAQ：首屏是矮版流场横幅；左侧目录吸顶并随滚动高亮，右侧问答展开有高度过渡 */
.hero.short { min-height: 0; padding: 168px 0 72px; }
.hero.short h1 { font-size: clamp(40px, 6vw, 80px); }
.faq .wrap { display: grid; grid-template-columns: 220px 1fr; gap: 72px; align-items: start; }
.toc { position: sticky; top: 104px; display: grid; gap: 4px; font-family: var(--mono); font-size: 13px; }
.toc a { padding: 9px 14px; border-left: 2px solid var(--line); color: var(--faint); transition: color .2s, border-color .2s; }
.toc a:hover { color: var(--text); }
.toc a.on { color: var(--accent); border-color: var(--accent); }
.group + .group { margin-top: 72px; }
.group h2 { font-size: 26px; margin-bottom: 8px; scroll-margin-top: 104px; max-width: none; }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; padding: 24px 0; font-size: 18px; font-weight: 600; display: flex; justify-content: space-between; gap: 24px; transition: color .2s; }
.qa summary:hover { color: var(--accent); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-family: var(--mono); color: var(--accent); font-size: 22px; line-height: 1; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.qa[open] summary::after { transform: rotate(45deg); }
.qa .a { overflow: hidden; }
.qa .a p { color: var(--muted); padding-bottom: 26px; max-width: 64ch; font-size: 16px; }
/* 评审标记：答案依据不足、需 owner 确认，上线前去掉 */
.tbd { font-family: var(--mono); font-size: 11px; color: #FBBF24; border: 1px solid rgb(251 191 36 / .4); padding: 1px 8px; border-radius: 999px; margin-left: 10px; vertical-align: 3px; font-weight: 500; }
.ask { margin-top: 96px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); padding: 40px; display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.ask h2 { font-size: 28px; }

@media (max-width: 860px) {
  .lang summary .name { display: none; }
  nav .btn { height: 34px; padding: 0 12px; font-size: 13px; }
  .faq .wrap { grid-template-columns: 1fr; gap: 24px; }
  .toc { position: static; display: flex; flex-wrap: wrap; }
  .toc a { border-left: 0; border-bottom: 2px solid var(--line); }
  .hero.short { padding: 128px 0 48px; }
}
/* 手机宽度放不下导航里的下载按钮（英文最长会被截断）；正文首屏与页尾都有下载入口，这里直接隐藏 */
@media (max-width: 480px) {
  .nav-right .btn-primary { display: none; }
}

/* 居中段落：只用于「文字本身就是设计」的宣言式时刻（首屏 / 问题陈述 / 五阶段 / 结尾 / FAQ 顶部）；
   卡片、时间线、价目等读内容的段落保持左对齐，全页形成居中与左对齐交替的节奏 */
.center { text-align: center; }
.center h1, .center h2, .center .lead, .center p#manifesto { margin-left: auto; margin-right: auto; }
.center .cta-row, .center .dl { justify-content: center; }
/* 手机/平板装不了桌面版：隐藏安装包下载按钮，显示「请在电脑上下载」提示。html.mobile 由 Base.astro 的 head 脚本按设备判断加上 */
.dl-note { display: none; margin-top: 44px; color: var(--muted); }
.mobile .dl, .mobile a.btn[href$="#get"] { display: none; } /* 后者=各页「下载桌面版」按钮，手机上点了也装不了 */
.mobile .dl-note { display: block; }
.center .more { display: flex; justify-content: center; }
/* 居中标题放宽行宽 + 各行长度均衡，避免最后一行只剩一个字 */
.center h2 { max-width: 22ch; text-wrap: balance; }
.center h1 { text-wrap: balance; }
.final.center h2 { max-width: 20ch; }
.nobr { white-space: nowrap; }
/* 日文按词组断行（Chrome 119+），避免「段階」这类词被拆到两行；不支持的浏览器自动忽略 */
:lang(ja) .center h1, :lang(ja) .center h2 { word-break: auto-phrase; }

/* ===== 五阶段：版本覆盖范围要一眼看出 =====
   三重表达：① 台阶按版本上色（1-3 浅蓝描边 / 4-5 实心钴蓝）；
   ② 台阶下方真正的括号（粗线 + 两端上翘竖钩），与台阶列精确对齐；③ 括号下加大的版本名 + Level 标签 */
.step:nth-child(-n+3) .bar { background: linear-gradient(180deg, rgb(143 169 255 / .10), transparent); border-color: rgb(143 169 255 / .35); }
.step:nth-child(-n+3) .lv { color: #8FA9FF; }
.step:nth-child(4) .bar, .step:nth-child(5) .bar { background: linear-gradient(180deg, var(--accent), rgb(76 125 255 / .30)); border-color: transparent; }
.step:nth-child(4) .lv, .step:nth-child(4) p, .step:nth-child(5) .lv, .step:nth-child(5) p { color: rgb(255 255 255 / .85); }

.brackets { grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 0; }
.brackets div { padding-top: 30px; text-align: center; color: var(--muted); }
.brackets div:first-child { grid-column: 1 / 4; }
.brackets div:last-child { grid-column: 4 / 6; }
/* 括号本体：底边粗线 + 左右两端向上的竖钩，像一个「⊔」把对应台阶托住 */
.brackets div::before { height: 16px; top: 4px; background: none; border: 3px solid #8FA9FF; border-top: 0; border-radius: 0 0 8px 8px; transform-origin: center; transform: scaleX(var(--p, 1)); }
.brackets div:last-child::before { border-color: var(--accent); background: none; }
.brackets b { font-size: 20px; margin-bottom: 6px; display: inline-flex; align-items: center; gap: 10px; }
.brackets b::after { font-family: var(--mono); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.brackets div:first-child b::after { content: "LEVEL 1-3"; color: #8FA9FF; border: 1px solid rgb(143 169 255 / .5); }
.brackets div:last-child b::after { content: "LEVEL 4-5"; background: var(--accent); color: #fff; }
.brackets div:first-child b { color: #C9D6FF; }
.brackets div:last-child b { color: #fff; }
@media (max-width: 860px) {
  .brackets { grid-template-columns: 1fr; }
  .brackets div:first-child, .brackets div:last-child { grid-column: auto; }
}
.brackets div { --p: 1; }

/* 平级二选一（macOS / Windows 下载）：默认都不高亮，避免暗示「推荐其中一个」；
   鼠标悬停或键盘聚焦的那个变实心，提示「点这里就是选它」 */
.dl .btn { background: transparent; border: 1px solid var(--line); color: var(--text); }
.dl .btn:hover, .dl .btn:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; outline: none; }

/* 描边按钮在深色底上要「不高亮也看得清」：浅蓝描边 + 极淡蓝底（原来的 --line 描边几乎不可见）。
   适用于所有次级按钮与平级二选一按钮；悬停 / 聚焦时变实心钴蓝 */
.btn-ghost, .dl .btn { background: rgb(76 125 255 / .08); border: 1px solid rgb(143 169 255 / .45); color: var(--text); }
.btn-ghost:hover, .btn-ghost:focus-visible, .dl .btn:hover, .dl .btn:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; outline: none; }

/* ===== AI-Ready 完整页 ===== */
/* 完整台阶：每级内容更多，整体加高；「怎么帮」用分隔线和现状隔开，能力标签沉底 */
.stairs.full { height: 640px; }
.stairs.full .bar { gap: 10px; }
.bar .how { margin-top: 6px; padding-top: 12px; border-top: 1px solid rgb(143 169 255 / .2); }
.bar .how p { color: var(--text); opacity: .9; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.chip { font-family: var(--mono); font-size: 11px; padding: 2px 9px; border-radius: 999px; border: 1px solid rgb(143 169 255 / .4); color: #C9D6FF; }
.step:nth-child(4) .how, .step:nth-child(5) .how { border-color: rgb(255 255 255 / .3); }
.step:nth-child(4) .chip, .step:nth-child(5) .chip { border-color: rgb(255 255 255 / .5); color: #fff; }
.source { margin-top: 32px; font-size: 13px; color: var(--faint); text-align: center; }

/* 两方案对比卡：颜色与台阶分组一致（标准版浅蓝 / 定制方案钴蓝） */
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; }
.tier { border-radius: var(--radius); padding: 40px; background: var(--card); border: 1px solid rgb(143 169 255 / .35); }
.tier.custom { border: 1px solid var(--accent); background: linear-gradient(180deg, rgb(76 125 255 / .16), var(--card) 60%); }
.tier .for { font-family: var(--mono); font-size: 12px; color: #8FA9FF; }
.tier.custom .for { color: var(--accent); }
.tier h3 { font-size: 28px; margin: 8px 0 28px; }
.tier dl { display: grid; gap: 22px; }
.tier dt { font-weight: 600; font-size: 17px; }
.tier dd { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
@media (max-width: 860px) {
  .stairs.full { height: auto; }
  .tiers { grid-template-columns: 1fr; }
  .tier { padding: 28px 24px; }
}
.hero.short.center h1 { max-width: 20ch; margin-inline: auto; }

/* 预约咨询表单 */
.cform { max-width: 640px; margin: 0 auto 96px; display: flex; flex-direction: column; gap: 20px; }
.cform label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--muted); }
.cform em { color: var(--accent); font-style: normal; margin-left: 4px; }
.cform input, .cform textarea { background: var(--card); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font: inherit; font-size: 16px; padding: 12px 14px; color-scheme: dark; }
.cform input:focus, .cform textarea:focus { outline: none; border-color: var(--accent); }
.cform button { align-self: flex-start; border: 0; cursor: pointer; font: inherit; }
.cform-done { color: var(--muted); font-size: 14px; }
.cform-when { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cform select { background: var(--card); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font: inherit; font-size: 16px; padding: 12px 14px; color-scheme: dark; }
@media (max-width: 480px) { .cform-when { grid-template-columns: 1fr; } }

/* 手机端：五个阶段纵向排列时，适用范围改为右侧竖括号（标准版对应 1–3、定制对应 4–5），
   不再在阶段下方另起两个横框。.stairs / .brackets 设为 display:contents，让阶段与括号进同一个网格对齐行高 */
@media (max-width: 860px) {
  /* margin-top 接替 .stairs 原有的 56px（display:contents 后 .stairs 的外边距不再生效） */
  .ladder { display: grid; grid-template-columns: 1fr 44px; column-gap: 8px; row-gap: 12px; margin-top: 56px; }
  .ladder .stairs, .ladder .brackets { display: contents; }
  .ladder .step { grid-column: 1; }
  .ladder .brackets div { grid-column: 2; position: relative; padding: 0 0 0 16px; font-size: 0; text-align: left; display: flex; align-items: center; }
  .ladder .brackets div:first-child { grid-row: 1 / 4; }
  .ladder .brackets div:last-child { grid-row: 4 / 6; }
  /* 「]」形括号：上下两端回钩指向阶段卡片 */
  .ladder .brackets div::before { top: 8px; bottom: 8px; left: 0; right: auto; width: 10px; height: auto; border: 3px solid #8FA9FF; border-left: 0; border-radius: 0 8px 8px 0; transform: none; }
  .ladder .brackets div:last-child::before { border-color: var(--accent); border-left: 0; }
  .ladder .brackets b { writing-mode: vertical-rl; font-size: 15px; margin: 0; gap: 8px; white-space: nowrap; }
  .ladder .brackets b::after { font-size: 11px; padding: 8px 2px; }
}

/* 时间下拉的选项：桌面版 Chrome（含手机宽度预览）弹出列表默认字号很小，显式放大；
   iOS / Android 实机用系统自带选择器，不受这条影响 */
.cform select option { font-size: 16px; }

/* 法律文书页（隐私政策 / 利用规约 / 特商法表记）：窄栏正文，表格两列 */
.legal .wrap { max-width: 820px; }
.legal h2 { font-size: 20px; margin: 40px 0 12px; }
.legal p, .legal li, .legal td { color: var(--muted); font-size: 15px; line-height: 1.9; }
.legal ul { padding-left: 1.4em; margin: 8px 0; }
.legal a { color: var(--accent); }
.legal-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.legal-table th, .legal-table td { border-bottom: 1px solid var(--line); padding: 16px 12px; text-align: left; vertical-align: top; }
.legal-table th { width: 30%; color: var(--text); font-weight: 600; font-size: 15px; }
.legal-date { margin-top: 40px; font-size: 14px; }
@media (max-width: 560px) { .legal-table th, .legal-table td { display: block; width: auto; padding: 6px 0; } .legal-table th { padding-top: 18px; border: 0; } }