/* Rulith 企业站——共享样式。
 *
 * 为什么抽出来(2026-07-28): 站点从单页长成多页(首页/技术框架/关于),
 * 同一份品牌样式若在每个 .html 里各存一份,必然漂移——改了一处忘另两处,
 * 三个页面的导航长得不一样。抽成一份是唯一不漂移的做法。
 * 代价: 部署从 scp 一个文件变成 scp 一个目录(README 已同步)。
 *
 * 零依赖: 不引任何外部 CDN / 字体 / 统计。政企受众 + 大陆访问,外链一律是延迟与合规风险;
 * "不给访客留第三方追踪"本身就是我们讲的话的一部分。
 */

:root{
  --bg:#0a0d13; --bg2:#0e131c; --card:#121826; --line:#1f2937;
  /* --faint 2026-08-01 批5: #6b7889 → #7a8799。
     旧值在卡片底(--card #121826)上只有 3.95:1,不到 WCAG AA 的 4.5。
     新值实测 card 4.86 · bg2 5.10 · bg 5.33,三种底全部过线,
     与 --dim(card 7.26)仍拉得开档次——**"faint"是层级,不是看不清**。
     品牌青 #35d0ba 不动(三站视觉已统一到它)。 */
  --fg:#e6edf3; --dim:#9aa7b8; --faint:#7a8799;
  --cyan:#35d0ba; --cyan2:#2aa89a; --blue:#5b8cff; --amber:#e0a03a;
  --maxw:1080px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.cyan{color:var(--cyan)} .dim{color:var(--dim)} .faint{color:var(--faint)}
/* 关键词不许被拆开断行(手机上"可推/导"那种断字) */
.nw{white-space:nowrap}

/* a11y ── 跳到正文: 键盘用户不必每页 Tab 过一整条导航。平时藏在视口外,聚焦即现身。 */
.skip{position:absolute;left:-9999px;top:0;z-index:100}
.skip:focus{left:16px;top:10px;background:var(--cyan);color:#04110e;padding:9px 16px;border-radius:8px;font-weight:650;font-size:14px}
/* 键盘焦点看得见(鼠标点击不显示描边——:focus-visible 的分寸就在这) */
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* nav */
nav{position:sticky;top:0;z-index:10;background:rgba(10,13,19,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font-weight:700;font-size:20px;letter-spacing:.5px;display:flex;align-items:center;gap:9px}
.logo .mark{width:22px;height:22px;border:2px solid var(--cyan);border-radius:5px;position:relative;flex:none}
.logo .mark::after{content:"";position:absolute;inset:4px 4px auto 4px;height:2px;background:var(--cyan);box-shadow:0 4px 0 var(--cyan),0 8px 0 var(--cyan)}
.navlinks{display:flex;gap:15px;font-size:14px;color:var(--dim);margin-right:18px}
.navlinks a:hover{color:var(--fg)}
.navlinks a.on{color:var(--cyan)}
.navcta{border:1px solid var(--cyan2);color:var(--cyan);padding:7px 15px;border-radius:7px;font-size:14px;white-space:nowrap}
.navcta:hover{background:var(--cyan);color:#04110e}
/* 导航右侧三动作(2026-08-01 批2 产品接线): 登录 = 纯文字(回访者路径,不占视觉重量)/
   免费开始 = 实心主按钮(唯一主路径,指向 console)/ 企业演示 = 描边次按钮(mailto 从主 CTA 降到这里)。
   在此之前全站 CTA 只有 mailto —— 产品真上线了,站上却没有一个链接指向它。*/
.navctas{display:flex;align-items:center;gap:12px;flex:none}
.navtext{font-size:14px;color:var(--dim);white-space:nowrap}
.navtext:hover{color:var(--fg)}
.navcta.solid{background:var(--cyan);color:#04110e;border-color:var(--cyan);font-weight:650}
.navcta.solid:hover{background:#4ee0cb;border-color:#4ee0cb}
.navcta.ghost{border-color:var(--line);color:var(--dim)}
.navcta.ghost:hover{background:transparent;border-color:var(--cyan2);color:var(--cyan)}
/* 桌面窄档: 链接多 + 右侧三动作后 1080px 会挤,先收 gap 再收字号(实测门槛,不是猜的) */
@media(max-width:1100px){.navlinks{gap:11px;font-size:13.5px;margin-right:12px}.navctas{gap:9px}.navcta{padding:6px 12px;font-size:13.5px}}
/* 汉堡按钮: 桌面不出现,手机上是打开导航的唯一入口。三根线用伪元素画,零图片。 */
.navburger{
  display:none;background:transparent;border:1px solid var(--line);border-radius:8px;
  width:38px;height:34px;cursor:pointer;padding:0;position:relative;flex:none
}
.navburger:hover{border-color:var(--cyan2)}
.navburger span{
  position:absolute;left:9px;right:9px;height:1.5px;background:var(--dim);border-radius:2px;transition:.15s
}
.navburger span:nth-child(1){top:11px} .navburger span:nth-child(2){top:16px} .navburger span:nth-child(3){top:21px}
.navburger[aria-expanded="true"] span:nth-child(1){top:16px;transform:rotate(45deg)}
.navburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.navburger[aria-expanded="true"] span:nth-child(3){top:16px;transform:rotate(-45deg)}
/* 桌面: 面板就是原来那条横排,汉堡与手机专用主按钮都不出现 */
.navpanel{display:flex;align-items:center;flex:1;justify-content:space-between;margin-left:26px}
.navcta-m{display:none}

/* 手机端导航(2026-08-01 批5 第三版)。
   演化史(每一版都是实测量出来的,不是看出来的):
   ① 单页站时代 `.navlinks{display:none}` —— 长出真页面后手机用户点不到任何内页;
   ② 改成"只藏同页锚点"—— 页面涨到 5 张后,五条中文链接在 375px 被压成 19px 宽 × 110px 高
      (每行一个字竖排,撑破 60px 导航条)。**横向不溢出**只是因为文字改成竖着堆了,
      光看"有没有横向滚动"这一个指标会漏掉它;
   ③ 第二排整宽横滚 —— 九项时在 390px 溢出,而 `scrollbar-width:none` 把"还有内容"这件事
      也一起藏了:**能滚但没人知道能滚,等于滚不了**。
   现方案(五项 + 三动作后): 第一排 logo + 免费开始 + 汉堡,展开是竖排面板,每项一整行 44px 可点。
   主按钮留在收起态外面 —— 转化路径不该藏进菜单里。 */
@media(max-width:720px){
  nav .wrap{height:auto;flex-wrap:wrap;row-gap:0;padding-top:11px;padding-bottom:11px;gap:10px}
  .logo{font-size:17px;order:1;margin-right:auto}
  .navcta-m{display:inline-flex;order:2;padding:6px 12px;font-size:13px}
  .navburger{display:block;order:3}
  .navpanel{
    display:none;order:4;width:100%;flex-direction:column;align-items:stretch;
    margin:8px 0 0;border-top:1px solid var(--line)
  }
  .navpanel.open{display:flex}
  .navlinks{flex-direction:column;gap:0;margin:0;font-size:15px}
  .navlinks a{padding:11px 2px;border-bottom:1px solid var(--line);color:var(--dim)}
  .navlinks a.on{color:var(--cyan)}
  .navctas{flex-direction:column;align-items:stretch;gap:9px;padding:14px 0 4px}
  .navctas .navcta,.navctas .navtext{text-align:center;padding:9px 12px;font-size:14px}
  .navctas .navcta.solid{display:none}       /* 已在收起态外面露着,面板里不重复 */
  .navctas .navtext{border:1px solid var(--line);border-radius:7px}
}

/* hero */
.hero{padding:96px 0 72px;text-align:center;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 55% at 50% 0%,rgba(53,208,186,.10),transparent 70%);pointer-events:none}
.badge{display:inline-block;border:1px solid var(--line);color:var(--dim);font-size:13px;padding:5px 14px;border-radius:20px;margin-bottom:26px}
.hero h1{font-size:clamp(30px,5vw,50px);line-height:1.25;font-weight:800;letter-spacing:-.5px;max-width:16em;margin:0 auto}
/* 关键词整块不断行: 390px 上「可推/导」「结论有依/据」那种断字比字号小更伤——
   一个讲精确的站,自己的标题不该在读者眼前被切开。 */
.hero h1 em{font-style:normal;color:var(--cyan);white-space:nowrap}
.hero .sub{margin:26px auto 0;max-width:40em;color:var(--dim);font-size:clamp(15px,2vw,18px)}
.hero .cta{margin-top:40px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{padding:12px 26px;border-radius:9px;font-size:15px;font-weight:600;transition:.15s}
.btn-p{background:var(--cyan);color:#04110e}
.btn-p:hover{background:#4ee0cb;transform:translateY(-1px)}
.btn-s{border:1px solid var(--line);color:var(--fg)}
.btn-s:hover{border-color:var(--cyan2)}
/* 内页 hero: 左对齐、矮一档——首页是招牌,内页是正文 */
.hero.page{text-align:left;padding:72px 0 56px}
.hero.page h1{margin:0;max-width:18em;font-size:clamp(26px,4vw,40px)}
.hero.page .sub{margin:22px 0 0;max-width:44em}

/* hooks */
.hooks{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2)}
.hooks .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.hook{padding:34px 28px;border-right:1px solid var(--line)}
.hook:last-child{border-right:0}
.hook .q{color:var(--cyan);font-size:15px;font-weight:700;margin-bottom:8px}
.hook p{color:var(--dim);font-size:14px}
@media(max-width:720px){.hooks .wrap{grid-template-columns:1fr}.hook{border-right:0;border-bottom:1px solid var(--line)}}

/* sections */
section{padding:76px 0}
section.tight{padding:56px 0}
section.band{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.eyebrow{color:var(--cyan);font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:12px}
h2{font-size:clamp(24px,3.4vw,34px);font-weight:800;letter-spacing:-.3px;max-width:20em}
.lead{color:var(--dim);margin-top:14px;max-width:42em;font-size:16px}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
@media(max-width:820px){.grid{grid-template-columns:1fr}}
.grid.two{grid-template-columns:repeat(2,1fr)}
.cardx{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px}
.cardx h3{font-size:16px;margin-bottom:8px;display:flex;align-items:center;gap:9px}
.cardx h3 .dot{width:8px;height:8px;border-radius:2px;flex:none}
.cardx p{color:var(--dim);font-size:14px}
.cardx .old{color:var(--faint);font-size:12.5px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}

/* deliver 3-layer */
.deliver{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.layers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
@media(max-width:820px){.layers{grid-template-columns:1fr}}
.layer{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:26px;position:relative}
.layer .n{font-size:13px;color:var(--cyan);font-weight:700}
.layer h3{font-size:18px;margin:6px 0 10px}
.layer p{color:var(--dim);font-size:14px}

/* solutions */
.sol{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
@media(max-width:820px){.sol{grid-template-columns:1fr}}
.solc{border:1px solid var(--line);border-radius:12px;padding:24px;background:var(--card)}
.solc .tag{font-size:12px;color:var(--cyan);border:1px solid var(--cyan2);border-radius:5px;padding:2px 9px;display:inline-block;margin-bottom:14px}
.solc h3{font-size:17px;margin-bottom:8px}
.solc p{color:var(--dim);font-size:14px}

/* honest */
.honest .wrap{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:44px}
.honest ul{list-style:none;margin-top:22px;display:grid;gap:14px}
.honest li{color:var(--dim);font-size:15px;padding-left:26px;position:relative}
.honest li::before{content:"—";position:absolute;left:0;color:var(--cyan)}
.honest .kicker{margin-top:26px;color:var(--fg);font-weight:600}

/* cta */
.final{text-align:center;padding:90px 0}
.final h2{margin:0 auto}
.final p{margin:16px auto 32px;max-width:34em;color:var(--dim)}
/* 按钮下面那行小字: 补一句 CTA 自己说不完的话(适用范围 / 次级通道),
   不再让它抢一个按钮的位置 —— 按钮多一个,主路径就少一分。 */
.ctanote{margin:18px auto 0;max-width:38em;color:var(--faint);font-size:13.5px}
.final .ctanote{margin-bottom:0}
.hero .ctanote{margin-top:20px}

footer{border-top:1px solid var(--line);padding:40px 0;color:var(--faint);font-size:13px}
footer .wrap{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px}
footer .fcopy{text-align:right;flex:1 1 auto;min-width:min(100%,320px)}
footer .fsep{display:inline-block;width:1px;height:11px;background:var(--line2);margin:0 4px;vertical-align:-1px}
footer a:hover{color:var(--dim)}
/* 页尾产品出口: 控制台与文档在每一页都够得着(批2 之前全站没有一个链接指向真实产品) */
footer .flinks{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;color:var(--line)}
footer .flinks a{color:var(--dim)}
footer .flinks a:hover{color:var(--cyan)}
.pending{color:var(--amber);font-size:12px;border:1px dashed #4a3d1c;padding:2px 8px;border-radius:5px}

/* ── 内页正文件(技术框架/关于) ─────────────────────────── */

/* 正文段落: 内页有长文,首页没有 */
.prose{max-width:44em;margin-top:22px}
.prose p{color:var(--dim);font-size:15.5px;margin-bottom:15px}
.prose p b,.prose li b{color:var(--fg);font-weight:650}
.prose h3{font-size:19px;margin:34px 0 10px;font-weight:700}
.prose h3 .num{color:var(--cyan);margin-right:9px;font-weight:800}
.prose ul{margin:14px 0 0;padding-left:0;list-style:none;display:grid;gap:11px}
.prose ul li{color:var(--dim);font-size:15px;padding-left:22px;position:relative}
.prose ul li::before{content:"";position:absolute;left:4px;top:11px;width:5px;height:5px;border-radius:1px;background:var(--cyan2)}

/* 对照表: 治理关切 × 通行做法 × 我们的回应 */
.tbl{width:100%;border-collapse:collapse;margin-top:36px;font-size:14.5px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tbl th,.tbl td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{background:var(--bg2);color:var(--fg);font-size:13px;font-weight:700;letter-spacing:.3px}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td.k{white-space:nowrap;color:var(--fg);font-weight:650}
.tbl td.old{color:var(--faint)}
.tbl td{color:var(--dim)}
.tbl td b{color:var(--fg);font-weight:650}
@media(max-width:760px){
  .tbl,.tbl thead,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl thead{display:none}
  .tbl tr{border-bottom:1px solid var(--line);padding:6px 0}
  .tbl tr:last-child{border-bottom:0}
  .tbl td{border-bottom:0;padding:6px 16px}
  /* 堆叠后第二列失去表头,补一个行内标签。**必须限定在对比表上** ——
     这句文案属于"治理关切×通行做法"那张表,曾经写成通用的 `.tbl td.old`,
     结果任何一页只要用了 .old 就被错加上"通行做法:"前缀(场景页实测撞到)。*/
  .tbl.compare td.old::before{content:"通行做法: ";color:var(--faint)}
}

/* 编号步骤(审批全程五幕) */
ol.steps{list-style:none;counter-reset:s;margin-top:36px;display:grid;gap:0}
ol.steps li{counter-increment:s;position:relative;padding:0 0 24px 46px;border-left:1px solid var(--line);margin-left:13px}
ol.steps li:last-child{border-left-color:transparent;padding-bottom:0}
ol.steps li::before{
  content:counter(s);position:absolute;left:-13px;top:-2px;width:26px;height:26px;border-radius:50%;
  background:var(--card);border:1px solid var(--cyan2);color:var(--cyan);
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center
}
ol.steps b{display:block;color:var(--fg);font-size:15.5px;margin-bottom:3px}
ol.steps span{color:var(--dim);font-size:14.5px}

/* 要点框 */
.note{border-left:2px solid var(--cyan2);background:var(--card);padding:18px 22px;border-radius:0 10px 10px 0;margin-top:26px}
.note p{color:var(--dim);font-size:15px;margin:0}
.note p+p{margin-top:10px}
.note b{color:var(--fg)}
.note.warn{border-left-color:var(--amber)}

/* 事实表(关于页: 主体/品牌/联系) */
.facts{margin-top:36px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.facts .r{display:flex;gap:0;border-bottom:1px solid var(--line);font-size:14.5px}
.facts .r:last-child{border-bottom:0}
.facts .r>div:first-child{width:180px;flex:none;padding:14px 18px;background:var(--bg2);color:var(--dim);font-weight:600}
.facts .r>div:last-child{padding:14px 18px;color:var(--fg)}
@media(max-width:640px){
  .facts .r{display:block}
  .facts .r>div:first-child{width:auto;padding-bottom:2px;background:transparent;font-size:13px}
  .facts .r>div:last-child{padding-top:4px}
}

/* ── 能力全景(map.html): 成熟度档位 ───────────────────
   档位是本页的主轴 —— 给自己的每个方向定档,跟给事实定接地档是同一套纪律。
   视觉上必须一眼分得出档,又不能把低档画成"失败"(低档不是丢人,是诚实)。*/
.matu{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;white-space:nowrap}
.matu .pips{display:inline-flex;gap:2px}
.matu .pips i{width:6px;height:6px;border-radius:1px;background:var(--line);display:block}
.matu.l4{color:var(--cyan)}   .matu.l4 .pips i:nth-child(-n+4){background:var(--cyan)}
.matu.l3{color:var(--blue)}   .matu.l3 .pips i:nth-child(-n+3){background:var(--blue)}
.matu.l2{color:var(--amber)}  .matu.l2 .pips i:nth-child(-n+2){background:var(--amber)}
.matu.l1{color:var(--faint)}  .matu.l1 .pips i:nth-child(-n+1){background:var(--faint)}
/* l0 = 愿景: 一颗都不点亮,且格子改描边 —— 视觉上一眼看出"这里还什么都没有"。
   愿景必须能上板,但必须长得跟已建成的东西完全不一样,否则进度板就成了宣传板。*/
.matu.l0{color:var(--faint);font-style:italic}
.matu.l0 .pips i{background:transparent;border:1px dashed var(--line);width:6px;height:6px}

/* ── 分层图(vision/index): 我们在哪一层 ────────────────
   整份定位里最锋利的一张图 —— 讲清"我们不跟谁抢"。制度层那条必须一眼跳出来。*/
.stack{margin-top:34px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.stack .lay{display:flex;align-items:center;gap:0;border-bottom:1px solid var(--line);font-size:14.5px}
.stack .lay:last-child{border-bottom:0}
.stack .lay>.t{width:118px;flex:none;padding:16px 18px;background:var(--bg2);color:var(--dim);font-weight:650;font-size:13.5px}
.stack .lay>.c{padding:16px 18px;color:var(--dim)}
.stack .lay.us{background:rgba(53,208,186,.07)}
.stack .lay.us>.t{background:rgba(53,208,186,.13);color:var(--cyan)}
.stack .lay.us>.c{color:var(--fg)}
.stack .lay.us>.c b{color:var(--cyan)}
@media(max-width:640px){
  .stack .lay{display:block}
  .stack .lay>.t{width:auto;padding:11px 16px 3px;background:transparent}
  .stack .lay.us>.t{background:transparent}
  .stack .lay>.c{padding:3px 16px 13px}
}

/* ── 承重图(index): 全站的一张整合图 ─────────────────────
   用户的原话是"以 Rulith 可信计算为**承重**基础" —— 承重是建筑词,那就照建筑画:
   底座在最下面且最重,上面每一层的宽度都由它撑着;愿景那层用虚线,一眼看出还没浇筑。
   这张图同时是站点地图: 每一块都点得进对应的页。*/
.bear{margin-top:40px;display:grid;gap:12px}
.bear a{display:block}
.bear .tier{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:20px 24px;transition:.15s}
.bear .tier:hover{border-color:var(--cyan2)}
.bear .tier .k{font-size:12px;font-weight:800;letter-spacing:1.4px;color:var(--faint);text-transform:uppercase}
.bear .tier h3{font-size:18px;margin:5px 0 6px;font-weight:700}
.bear .tier p{color:var(--dim);font-size:14px;margin:0}
.bear .row{display:grid;gap:12px}
.bear .row.c2{grid-template-columns:1fr 1fr}
.bear .row.c3{grid-template-columns:repeat(3,1fr)}
.bear .row.c3 .tier{padding:18px 20px}
.bear .row.c3 .tier h3{font-size:16.5px}
.bear .row.c3 .tier p{font-size:13.5px}
.bear .row.c4{grid-template-columns:repeat(4,1fr)}
.bear .row.c4 .tier{padding:16px 18px}
.bear .row.c4 .tier h3{font-size:15.5px;margin:4px 0 5px}
.bear .row.c4 .tier p{font-size:13px}
/* 顶层 = 愿景: 虚线,一眼看出还没浇筑 */
.bear .tier.dream{border-style:dashed;background:transparent}
.bear .tier.dream h3{color:var(--dim)}
/* 底座 = 承重: 最重的一块 */
.bear .tier.base{
  border-color:var(--cyan2);background:linear-gradient(180deg,rgba(53,208,186,.10),rgba(53,208,186,.04));
  padding:28px 26px;border-width:1px
}
.bear .tier.base .k{color:var(--cyan)}
.bear .tier.base h3{font-size:22px;color:var(--fg)}
.bear .tier.base p{color:var(--dim);font-size:14.5px}
.bear .joint{text-align:center;color:var(--faint);font-size:12px;letter-spacing:2px;line-height:1}
@media(max-width:820px){
  .bear .row.c4{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .bear .row.c3{grid-template-columns:1fr}
}
@media(max-width:560px){
  .bear .row.c4,.bear .row.c2{grid-template-columns:1fr}
}

/* ── 四类智能体(scenarios) ───────────────────────────── */
.quad{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:38px}
@media(max-width:820px){.quad{grid-template-columns:1fr}}
.qc{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:26px;display:flex;flex-direction:column}
.qc .hd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.qc h3{font-size:19px;margin:0;font-weight:700}
.qc .who{color:var(--faint);font-size:13px;margin-bottom:14px}
.qc .lead2{color:var(--dim);font-size:14.5px;margin:0 0 16px}
.qc .risk{border-left:2px solid var(--amber);padding:10px 14px;background:rgba(224,160,58,.06);border-radius:0 8px 8px 0;margin-bottom:14px}
.qc .risk .t{color:var(--amber);font-size:12px;font-weight:700;letter-spacing:.5px;margin-bottom:3px}
.qc .risk p{color:var(--dim);font-size:13.5px;margin:0}
.qc ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.qc ul li{color:var(--dim);font-size:14px;padding-left:20px;position:relative}
.qc ul li::before{content:"";position:absolute;left:3px;top:9px;width:5px;height:5px;border-radius:1px;background:var(--cyan2)}
.qc ul li b{color:var(--fg);font-weight:650}
.qc .ft{margin-top:auto;padding-top:16px;color:var(--faint);font-size:13px}

/* ── 基础设施清单 ─────────────────────────────────────── */
.infra{display:grid;gap:14px;margin-top:34px}
.ic{border:1px solid var(--line);border-radius:12px;padding:22px 24px;background:var(--card);
    display:grid;grid-template-columns:190px 1fr auto;gap:20px;align-items:start}
.ic h3{font-size:16.5px;margin:0;font-weight:700}
.ic .q{color:var(--faint);font-size:12.5px;margin-top:4px}
.ic p{color:var(--dim);font-size:14px;margin:0}
.ic p+p{margin-top:8px}
.ic .who{color:var(--faint);font-size:13px;margin-top:8px}
.ic .who b{color:var(--dim)}
@media(max-width:820px){
  .ic{grid-template-columns:1fr;gap:12px}
  .ic .m{justify-self:start}
}

/* 三阶段(vision): 今天 / 正在建 / 愿景 */
.phases{margin-top:38px;display:grid;gap:0}
.phases .ph{display:flex;gap:22px;padding:0 0 30px;position:relative}
.phases .ph:last-child{padding-bottom:0}
.phases .when{width:132px;flex:none}
.phases .when .n{font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--cyan)}
.phases .when .s{font-size:13px;color:var(--faint);margin-top:3px}
.phases .body{border-left:1px solid var(--line);padding:0 0 0 24px;position:relative;flex:1}
.phases .ph:last-child .body{border-left-color:transparent}
.phases .body::before{content:"";position:absolute;left:-5px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--cyan)}
.phases .ph.future .when .n{color:var(--faint)}
.phases .ph.future .body::before{background:transparent;border:1px dashed var(--faint)}
.phases h3{font-size:19px;margin:0 0 8px;font-weight:700}
.phases p{color:var(--dim);font-size:15px;margin:0 0 10px}
@media(max-width:640px){
  .phases .ph{display:block}
  .phases .when{width:auto;margin-bottom:8px}
  .phases .body{border-left:0;padding-left:0}
  .phases .body::before{display:none}
}

/* ── 交付物状态(deliverables) ─────────────────────────
   与成熟度档位**刻意不同形**: 成熟度是圆点进度条(渐进),交付就绪是方块状态(离散)。
   理由是这两件事真的不同 —— 一个能力可以"生产级"却没有任何可交出去的形态,
   混用一套视觉会让读者以为它们是同一根轴。*/
.st{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:5px;white-space:nowrap;border:1px solid}
.st.ok{color:#0c1512;background:var(--cyan);border-color:var(--cyan)}          /* 可交付 */
.st.wip{color:var(--amber);background:rgba(224,160,58,.10);border-color:#5a4a22} /* 在做 */
.st.plan{color:var(--dim);background:var(--bg2);border-color:var(--line)}       /* 已规划 */
.st.block{color:var(--faint);background:transparent;border-color:var(--line);border-style:dashed} /* 有前置 */

/* 交付物矩阵表 */
.mx{width:100%;border-collapse:collapse;margin-top:26px;font-size:14.5px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mx th,.mx td{text-align:left;padding:13px 15px;border-bottom:1px solid var(--line);vertical-align:top}
.mx thead th{background:var(--bg2);font-size:13px;font-weight:700}
.mx tbody tr:last-child td{border-bottom:0}
.mx td{color:var(--dim)}
.mx td.n{color:var(--fg);font-weight:650}
.mx td.n code{font-size:12px;display:block;margin-top:3px;color:var(--faint);background:transparent;border:0;padding:0}
.mx td.s{white-space:nowrap;width:1%}
.mx td.g{white-space:nowrap;width:1%;color:var(--faint);font-size:13.5px}
.mx tbody tr.grp td{background:var(--bg2);color:var(--cyan);font-weight:700;font-size:13px;letter-spacing:.6px}
@media(max-width:820px){
  .mx,.mx thead,.mx tbody,.mx tr,.mx td{display:block;width:100%}
  .mx thead{display:none}
  .mx tr{border-bottom:1px solid var(--line);padding:8px 0}
  .mx tr:last-child{border-bottom:0}
  .mx tr.grp{padding:0}
  .mx td{border-bottom:0;padding:4px 15px;width:auto}
  .mx td.s,.mx td.g{width:auto;padding-top:8px}
  .mx td.g::before{content:"怎么拿到: ";color:var(--faint)}
}

/* 档位图例 */
.legend{margin-top:26px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.legend .lr{display:flex;gap:0;border-bottom:1px solid var(--line);font-size:14px;align-items:flex-start}
.legend .lr:last-child{border-bottom:0}
.legend .lr>div:first-child{width:150px;flex:none;padding:13px 18px;background:var(--bg2)}
.legend .lr>div:last-child{padding:13px 18px;color:var(--dim)}
@media(max-width:640px){
  .legend .lr{display:block}
  .legend .lr>div:first-child{width:auto;padding-bottom:2px}
  .legend .lr>div:last-child{padding-top:4px}
}

/* 全景表: 件 / 是什么 / 档 */
.map{width:100%;border-collapse:collapse;margin-top:30px;font-size:14.5px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.map th,.map td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.map thead th{background:var(--bg2);font-size:13px;font-weight:700}
.map tbody tr:last-child td{border-bottom:0}
.map td.n{color:var(--fg);font-weight:650;white-space:nowrap}
.map td{color:var(--dim)}
.map td b{color:var(--fg);font-weight:650}
.map td.m{white-space:nowrap;width:1%}
@media(max-width:760px){
  .map,.map thead,.map tbody,.map tr,.map td{display:block;width:100%}
  .map thead{display:none}
  .map tr{border-bottom:1px solid var(--line);padding:8px 0}
  .map tr:last-child{border-bottom:0}
  .map td{border-bottom:0;padding:4px 16px}
  .map td.m{width:auto;padding-top:8px}
}

/* 截图占位(.shot)2026-08-01 批8 删除 —— 曾用在 product.html 的三个参考应用上。
   诚实的空框比效果图强,但对客户仍然是噪音:一个"待补"的虚线框既不说明能力,也不构成证据。
   它们跑在另一套实例上,补图要另起环境;在补上之前,那三张位置换成成熟度文字。
   规矩不变:**截图必须是真跑出来的**(CONTENT-PLAN §二.3)——变的只是"还没拍"该怎么表达。 */

/* ── 产品证据(2026-08-01 批3): 真截图,不是效果图 ──────────────
   规矩照 CONTENT-PLAN §二.3:**截图必须是真跑出来的**。这三张出自本地起的一个真实例
   (真 Rust 内核 + 真控制台),板上结论由闭包算出来——页面上不写一句图里没有的话。
   <img> 一律带 width/height:跨境链路上图片来得慢,没有尺寸就是一次全页跳动。*/
.evid{display:grid;gap:26px;margin-top:38px}
.evid figure{margin:0;border:1px solid var(--line);border-radius:12px;background:var(--bg2);overflow:hidden}
.evid img{display:block;width:100%;height:auto;border-bottom:1px solid var(--line);background:#0a0e14}
.evid figcaption{padding:16px 20px}
.evid figcaption .t{font-size:15.5px;font-weight:700;color:var(--fg)}
.evid figcaption p{color:var(--dim);font-size:14px;margin-top:6px}
.evid figcaption .src{color:var(--faint);font-size:12.5px;margin-top:9px}
@media(min-width:821px){
  .evid.two{grid-template-columns:1fr 1fr}
  .evid.two figcaption .t{font-size:15px}
}

/* 阶梯上的一级(offering) */
.rung{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:28px;margin-top:20px}
.rung .hd{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rung .no{font-size:12px;font-weight:800;color:var(--cyan);letter-spacing:1.2px}
.rung h3{font-size:20px;margin:0;font-weight:700}
.rung .sub{color:var(--dim);font-size:15px;margin-top:10px}
.rung .inc{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);color:var(--faint);font-size:13.5px}
.rung .inc b{color:var(--dim);font-weight:650}

/* 硬数字条 */
/* 3 列:六张卡正好两行齐平。曾是 4 列,补到六张后末行剩两个空位,不齐。 */
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
@media(max-width:960px){.nums{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.nums{grid-template-columns:1fr}}
.num-c{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.num-c .v{font-size:27px;font-weight:800;color:var(--cyan);letter-spacing:-.5px;line-height:1.2}
.num-c .l{color:var(--dim);font-size:13.5px;margin-top:5px}

/* 里程碑 */
.mile{margin-top:36px;display:grid;gap:0}
.mile .m{display:flex;gap:20px;padding:0 0 22px 0;position:relative}
.mile .m:last-child{padding-bottom:0}
.mile .when{width:104px;flex:none;color:var(--cyan);font-size:13px;font-weight:700;padding-top:1px}
.mile .what{color:var(--dim);font-size:15px}
.mile .what b{color:var(--fg);display:block;font-weight:650;margin-bottom:2px}
@media(max-width:640px){.mile .m{display:block}.mile .when{width:auto;margin-bottom:4px}}