/* 落地页与发现页。令牌与 reader.css 共用一套（见那份文件顶部的说明），
   尺寸照 docs/design/artboards/Main.dc.html（方案 A）。

   与阅读页分成两个文件，是因为访客读一篇分享时不需要落地页的这堆样式，
   而阅读页的首屏速度是它存在的理由之一。 */

@import url("/_/reader.css");

html:has(> body.pw-landing) { height: 100%; }
.pw-landing {
  background: var(--bg);
  /* 内容不够一屏时页脚贴视口底：body 至少一屏高，.pw-disc 吃掉中间
     剩下的高度，页脚靠 margin-top:auto 坐在最后。子项 min-width:0，
     否则表格的 min-content 会把整页撑出横向滚动。 */
  min-height: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.pw-landing > * { min-width: 0; }
.pw-page-hero > * { min-width: 0; width: 100%; }

/* ---------- 版心 ----------

   整页只有一根版心，所有顶层区块共用下面这一条 padding-inline。

   max() 的效果：窗口够宽时左右各留 (100% - 1264px)/2，内容列正好 1264px
   （与画板的 88px 边距对齐）；窗口不够宽时退到 --gutter，内容不贴边。

   这条规则是在修「为什么一部分全屏、一部分两边又有间距」时加的。当时页面上
   同时存在三种左边界，而且宽屏媒体查询被一次误编辑串了行，把 .pw-disc-shelf
   的边框圆角贴到了 .pw-sec / .pw-lnav / .pw-hero 上。
   底色和横线可以出血到视口两边，但**文字与卡片的左右边缘一律落在这根版心上**。 */
:root { --gutter: 20px; --col: 1264px; }

.pw-lnav, .pw-hero, .pw-codeband, .pw-sec, .pw-cards,
.pw-tree, .pw-disc, .pw-disc-pager, .pw-lfoot,
.pw-page-hero, .pw-legal, .pw-legal-switch {
  box-sizing: border-box;
  padding-inline: max(var(--gutter), (100% - var(--col)) / 2);
}

/* ---------- 深色首屏 ----------
   全站唯一的深色区块。顶栏在它**里面** —— 命令是主角，顶栏只是它的边框。
   .pw-on-dark 由 reader.css 提供，把品牌标记两块面板整组换一档。 */
.pw-dark { background: var(--ink-strong); color: #E3EAE6; }

.pw-lnav {
  display: flex; align-items: center; gap: 24px;
  padding-block: 22px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.pw-dark .pw-lnav { background: none; border-bottom-color: #273130; }
.pw-lbrand {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  color: var(--accent); text-decoration: none;
}
.pw-lbrand .pw-mark { width: 25px; height: 25px; }
.pw-lbrand span {
  font-family: var(--font-head); font-weight: 700; font-size: 19px;
  letter-spacing: -.01em; color: var(--fg);
}
.pw-dark .pw-lbrand span { color: #FFFFFF; }
.pw-llinks { display: none; gap: 26px; font-size: 14px; flex-grow: 1; }
.pw-llinks a { color: var(--body); text-decoration: none; }
.pw-llinks a:hover, .pw-llinks a[aria-current] { color: var(--accent-dark); }
.pw-dark .pw-llinks a { color: #B4C0BB; }
.pw-dark .pw-llinks a:hover { color: #FFFFFF; }
.pw-lauth {
  display: flex; align-items: center; gap: 14px; margin-inline-start: auto;
  flex-shrink: 0;
}
/* 语言切换是顶栏里的分段控件，不是两条链接。
   当前项铺一层表面色，未选项走 dim；不要用强调色，那是主按钮的。 */
/* 语言切换：胶囊分段控件。轨道是 muted 底，当前项抬起成一片 surface 加一点
   投影 —— 「按下去的那一格」比「描一个框」更像开关。地球标记只是记号，
   走 currentColor 跟着轨道的灰。照 Main / Pricing 画板顶栏。 */
.pw-lnav .pw-lang {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: 30px; padding: 2px 2px 2px 10px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--muted); color: var(--dim);
}
.pw-lnav .pw-lang svg { flex-shrink: 0; }
.pw-lnav .pw-lang a {
  display: flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: 999px; font-family: var(--mono); font-size: 11.5px;
  font-weight: 500; letter-spacing: .06em; line-height: 1;
  color: var(--dim); text-decoration: none; white-space: nowrap;
  transition: color .15s ease, background-color .15s ease;
}
.pw-lnav .pw-lang a:hover { color: var(--fg); }
.pw-lnav .pw-lang a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pw-lnav .pw-lang a[aria-current] {
  background: var(--surface); color: var(--accent-dark);
  box-shadow: 0 1px 2px rgba(16, 22, 20, .08);
}
.pw-dark .pw-lnav .pw-lang { border-color: #273130; background: #1A2220; color: #849490; }
.pw-dark .pw-lnav .pw-lang a { color: #849490; }
.pw-dark .pw-lnav .pw-lang a:hover { color: #E3EAE6; }
.pw-dark .pw-lnav .pw-lang a[aria-current] {
  background: #273130; color: #7FD5C9; box-shadow: none;
}
@media (prefers-reduced-motion: reduce) { .pw-lnav .pw-lang a { transition: none; } }
.pw-llink { font-size: 14px; color: var(--body); text-decoration: none; }
.pw-lauth > .pw-llink { display: none; }
.pw-dark .pw-llink { color: #B4C0BB; }
.pw-hero-cta .pw-llink { color: var(--accent-dark); }
.pw-dark .pw-hero-cta .pw-llink { color: #7FD5C9; }
.pw-btn-lg { min-height: 46px; padding: 0 22px; font-size: 15px; gap: 9px; }
/* 深色底上的主按钮：亮松绿底 + 深字。深色底用 --accent（#0B6B63）对比度不够。 */
.pw-dark .pw-btn-primary {
  background: #4FBCAF; border-color: #4FBCAF; color: #10221D;
}

.pw-hero {
  display: grid; gap: 40px;
  padding-block: 48px 40px;
}
.pw-hero-copy { display: flex; flex-direction: column; gap: 20px; }
.pw-eyebrow {
  margin: 0; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
}
.pw-dark .pw-eyebrow { color: #4FBCAF; }
.pw-hero h1 {
  margin: 0; font-size: clamp(32px, 7vw, 54px); line-height: 1.12;
  letter-spacing: -.018em; color: #FFFFFF;
}
.pw-lead { margin: 0; font-size: 17px; line-height: 1.75; color: #B4C0BB; max-width: 46ch; }
.pw-lead code { color: #7FD5C9; font-family: var(--mono); font-size: .93em; }
.pw-hero-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 6px; }
.pw-fineprint { margin: 0; font-size: 13px; color: var(--dim); }
.pw-dark .pw-fineprint { color: #849490; }

/* 终端演示。它是这一页最重要的东西：一条命令换一个链接，
   比任何一段文案都说得清这个产品是干什么的。 */
.pw-term {
  border: 1px solid #273130; border-radius: 7px;
  overflow: hidden; background: #0B0F0E; min-width: 0;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9);
}
.pw-term-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 15px; background: #1A2220; border-bottom: 1px solid #273130;
}
.pw-term-bar span { width: 10px; height: 10px; border-radius: 50%; background: #3A4744; }
.pw-term-bar em {
  margin-inline-start: 8px; font-style: normal;
  font-family: var(--mono); font-size: 11.5px; color: #849490;
}
.pw-term-body {
  margin: 0; padding: 22px 24px; overflow-x: auto;
  font-family: var(--mono); font-size: 13px; line-height: 1.95; color: #E3EAE6;
}
.pw-t-dim { color: #6B7A76; }
.pw-t-ok { color: #4FBCAF; }
.pw-t-link { color: #7FD5C9; }
.pw-t-code { font-size: 20px; font-weight: 700; letter-spacing: .1em; color: #F0D79A; }

/* ---------- 分享码入口 ---------- */
.pw-codeband {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; flex-wrap: wrap; padding-block: 26px; background: var(--accent-light);
}
.pw-codeband-q { font-size: 15px; font-weight: 500; color: var(--accent-dark); }
.pw-codeband-note { font-size: 13px; color: var(--dim); }
.pw-codeform {
  display: flex; align-items: stretch;
  border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}
.pw-codeform input {
  width: 172px; padding: 10px 14px; border: 0; background: none; color: var(--fg);
  /* ⚠️ 分享码区分大小写：不能加 text-transform，也不能开 autocapitalize */
  font-family: var(--mono); font-size: 16px; letter-spacing: .1em;
}
.pw-codeform input:focus { outline: none; }
.pw-codeform button {
  padding: 0 20px; border: 0; background: var(--accent); color: var(--accent-fg);
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}

/* ---------- 内容区块 ---------- */
.pw-sec { padding-block: 56px 16px; }
.pw-sec-tight { padding-block: 62px 12px; }
.pw-sec h1 { margin: 0 0 10px; font-size: clamp(28px, 6vw, 38px); line-height: 1.25; }
.pw-sec h2 { margin: 0 0 10px; font-size: clamp(24px, 4.6vw, 32px); line-height: 1.28; }
.pw-seclead { margin: 0; font-size: 16.5px; line-height: 1.78; color: var(--body); max-width: min(74ch, 100%); overflow-wrap: anywhere; }
.pw-count { margin: 12px 0 0; font-family: var(--mono); font-size: 12.5px; color: var(--dim); }

/* 分隔线画在卡片上，不用「gap:1px + 容器底色」那一招 —— 容器有横向内边距，
   那一招会把内边距也涂成线色，看起来就是一条出血的色带。 */
.pw-cards { display: grid; margin-top: 26px; }
.pw-card3 {
  background: var(--surface); padding: 36px 34px;
  border-block: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 14px; color: var(--accent);
}
.pw-card3 + .pw-card3 { border-top: 0; }
.pw-card3 h3 { margin: 0; font-size: 18px; color: var(--fg); }
.pw-card3 p { margin: 0; font-size: 14.5px; line-height: 1.78; color: var(--body); }
.pw-card3 code {
  font-family: var(--mono); font-size: 13px;
  background: var(--muted); padding: 1px 5px; border-radius: 3px;
}

/* ---------- 目录树 → 站点 ----------
   左右对照就是这一段的全部内容：不解释，直接看两边长什么样。 */
.pw-tree { display: grid; gap: 40px; padding-block: 76px; }
.pw-tree-copy { display: flex; flex-direction: column; gap: 16px; }
.pw-tree-copy h2 { margin: 0; font-size: clamp(23px, 4vw, 29px); line-height: 1.3; }
.pw-tree-copy .pw-seclead { max-width: 44ch; font-size: 16px; }
.pw-tree-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-md); overflow: hidden;
}
.pw-tree-col { background: var(--surface); padding: 20px 22px; display: flex; flex-direction: column; gap: 9px; }
.pw-tree-local { background: var(--bg); }
.pw-collabel {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim);
}
.pw-tree-col .pw-mono { font-size: 12.5px; line-height: 2; color: var(--body); }
.pw-tree-out { font-size: 13.5px; line-height: 2; color: var(--body); }
.pw-tree-out div { display: flex; align-items: center; gap: 8px; color: var(--dim); }
.pw-tree-out div > svg { flex-shrink: 0; }
.pw-i1 { padding-inline-start: 16px; }
.pw-i2 { padding-inline-start: 30px; }
.pw-tree-out .pw-tag { margin-inline-start: auto; font-style: normal; font-size: 9.5px; }

/* ---------- 安全 ---------- */
.pw-sec-sec { background: var(--muted); padding-block: 70px; }
.pw-seclist { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.pw-seclist li {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 16px 20px; background: var(--surface); font-size: 14px; color: var(--body);
}
.pw-seclist code {
  font-family: var(--mono); font-size: 12.5px; color: var(--accent-dark);
  background: var(--accent-light); padding: 2px 8px; border-radius: 3px;
}

/* ---------- 首页橱窗 ----------
   公开文档的卡片栅格，照 Main.dc.html「Published publicly」那一段。
   整张卡是一个 <a>：标题、摘要、署名都在同一个点击目标里，
   而不是只有标题能点 —— 发现页那种列表在首页上太瘦。 */
.pw-shelf { padding-block: 72px 78px; }
.pw-shelf-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.pw-shelf-head h2 { margin: 0; }
.pw-shelf-head .pw-llink { color: var(--accent-dark); white-space: nowrap; }
.pw-shelf .pw-seclead { margin-top: 10px; }
.pw-shelf-grid { display: grid; gap: 16px; margin-top: 28px; }
.pw-shelf-card {
  display: flex; flex-direction: column; gap: 9px;
  padding: 22px 24px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  color: var(--fg); text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.pw-shelf-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.pw-shelf-card h3 { margin: 0; font-size: 18px; line-height: 1.4; }
.pw-shelf-card:hover h3 { color: var(--accent-dark); }
.pw-shelf-card p {
  margin: 0; font-size: 14px; line-height: 1.7; color: var(--body);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pw-shelf-meta {
  margin-top: auto; padding-top: 6px; display: flex; gap: 12px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12px; color: var(--dim);
}

/* ---------- 定价（/pricing 子页仍然用）---------- */
.pw-plans { display: grid; gap: 24px; margin: 28px 0 20px; }
.pw-plan {
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); padding: 28px 26px;
  display: flex; flex-direction: column; gap: 14px;
}
.pw-plan.is-featured { border-color: var(--accent); }
.pw-plan h3 { margin: 0; font-size: 19px; }
.pw-price { margin: 0; font-family: var(--mono); font-size: 32px; font-weight: 700; }
.pw-price span { font-family: var(--font); font-size: 14px; font-weight: 400; color: var(--dim); }
.pw-plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pw-plan li { font-size: 14.5px; color: var(--body); padding-inline-start: 18px; position: relative; }
.pw-plan li::before { content: "·"; position: absolute; inset-inline-start: 4px; color: var(--accent); }
.pw-plan .pw-btn { margin-top: auto; justify-content: center; min-height: 40px; }

/* ---------- 发现页 ---------- */
.pw-disc { display: grid; padding-block: 0; flex: 1 0 auto; }
.pw-disc:has(.pw-empty) { grid-template-columns: minmax(0, 1fr); }
.pw-disc-item {
  background: var(--surface); padding: 22px 24px;
  border-block: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 7px;
}
.pw-disc-item + .pw-disc-item { border-top: 0; }
.pw-disc-item h2 { margin: 0; font-size: 18px; line-height: 1.4; }
.pw-disc-item h2 a { color: var(--fg); text-decoration: none; }
.pw-disc-item h2 a:hover { color: var(--accent-dark); }
.pw-disc-item p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--body);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pw-disc-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--dim) !important; }
.pw-disc-meta a { color: var(--dim); }
.pw-disc-pager { padding-block: 24px; justify-content: center; gap: 12px; }
.pw-empty {
  padding: 56px 20px; text-align: center; color: var(--dim); background: var(--surface);
  grid-column: 1 / -1;
}

/* ---------- 页脚 ---------- */
.pw-lfoot {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  margin-top: auto;
  padding-block: 26px; padding-bottom: max(26px, env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line);
  font-size: 13px; color: var(--dim);
}
.pw-lfoot nav { display: flex; gap: 22px; flex-grow: 1; }
.pw-lfoot a { color: var(--dim); text-decoration: none; }
.pw-lfoot a:hover { color: var(--fg); }
/* 客服邮箱：页脚里唯一要被「找到」的一项，所以地址走等宽、颜色抬到正文色 */
.pw-foot-contact .pw-mono { color: var(--accent-dark); }
.pw-mono { font-family: var(--mono); }

/* ---------- 宽屏 ----------
   只调 --gutter 和栅格列数。区块的左右边界由上面那一条版心规则统一算出来，
   这里不再逐个写 padding-inline —— 之前正是逐个写才走散的。 */
@media (max-width: 759px) {
  .pw-lnav { gap: 10px 12px; flex-wrap: wrap; }
  .pw-lauth {
    flex-basis: 100%; margin-inline-start: 0; justify-content: flex-end; gap: 8px;
  }
  .pw-lauth .pw-btn { padding-inline: 10px; font-size: 13px; }
}
@media (min-width: 760px) {
  :root { --gutter: 40px; }
  .pw-llinks { display: flex; }
  .pw-lauth > .pw-llink { display: inline; }
  .pw-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pw-card3 + .pw-card3 { border-top: 1px solid var(--line); border-inline-start: 1px solid var(--line); }
  .pw-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pw-shelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pw-seclist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pw-disc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pw-disc-item + .pw-disc-item { border-top: 1px solid var(--line); }
}
@media (min-width: 1100px) {
  :root { --gutter: 64px; }
  .pw-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 640px); gap: 56px;
    align-items: center; padding-block: 76px 84px;
  }
  .pw-tree { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 64px; align-items: center; }
  .pw-disc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pw-shelf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 子页（/how、/pricing、/docs）----------
   照 docs/design/artboards/{How,Pricing,Docs}.dc.html。
   首页是概览，这三页是详版，内容有意重复 —— 顶栏那三项是跳页不是锚点。 */
.pw-page-hero {
  padding-block: 70px 26px;
  display: flex; flex-direction: column; gap: 16px;
}
.pw-page-hero h1 {
  margin: 0; font-size: clamp(30px, 5.4vw, 44px); line-height: 1.16;
  letter-spacing: -.016em; max-width: 20ch;
}
.pw-page-hero .pw-seclead { font-size: 17.5px; }
.pw-sec-flush { padding-block: 10px 24px; }
.pw-sec-cta {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding-block: 20px 72px;
}

/* 三步。右侧要么是终端演示、要么是一张对照表 —— 二选一，同时出现会撑破栅格。 */
.pw-steps {
  box-sizing: border-box;
  padding-inline: max(var(--gutter), (100% - var(--col)) / 2);
  padding-block: 8px 56px;
}
.pw-step {
  display: grid; gap: 18px;
  padding-block: 34px; border-top: 1px solid var(--line);
}
.pw-step-n { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.pw-step-copy { display: flex; flex-direction: column; gap: 10px; }
.pw-step-copy h2 { margin: 0; font-size: clamp(19px, 3.4vw, 21px); line-height: 1.35; }
.pw-step-copy p { margin: 0; font-size: 15px; line-height: 1.78; color: var(--body); }
.pw-step-copy code, .pw-panel code, .pw-steps-lite code {
  font-family: var(--mono); font-size: 13px;
  background: var(--muted); padding: 1px 5px; border-radius: 3px;
}
.pw-step-fig { min-width: 0; }
.pw-step-fig .pw-term-bar { justify-content: flex-start; }
.pw-step-fig .pw-term-body { font-size: 12.5px; padding: 18px 20px; }
.pw-seclist-1 { grid-template-columns: minmax(0, 1fr) !important; margin-top: 0; }

/* 两栏面板。/how 的两条硬限制、/pricing 的四种边界、/docs 的四个入口共用。 */
.pw-pair { display: grid; gap: 20px; margin-top: 18px; }
.pw-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 26px 28px;
  display: flex; flex-direction: column; gap: 11px;
}
.pw-panel h3 { margin: 0; font-size: 17px; }
.pw-panel p { margin: 0; font-size: 14.5px; line-height: 1.78; color: var(--body); }
.pw-panel-doc { gap: 14px; padding: 30px; }
.pw-panel-doc h3 { font-size: 20px; line-height: 1.35; }
.pw-tagline {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
.pw-term-inline { margin-top: auto; }
.pw-term-inline .pw-term-body { padding: 13px 16px; font-size: 12.5px; line-height: 1.7; }
.pw-term-foot {
  padding: 8px 16px; background: #1A2220; border-top: 1px solid #273130;
  font-family: var(--mono); font-size: 10.5px; color: #849490;
}

/* 套餐对照表。数字列走等宽 + tabular-nums，否则两列的位数对不齐。 */
.pw-table {
  width: 100%; border-collapse: collapse; margin-top: 18px;
  border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden;
}
.pw-table th, .pw-table td {
  text-align: start; padding: 13px 20px; font-size: 14px;
  border-top: 1px solid var(--line); background: var(--surface);
}
.pw-table thead th {
  border-top: 0; background: var(--bg); font-size: 13px;
  font-family: var(--mono); font-weight: 500; color: var(--fg);
}
.pw-table tbody th { font-weight: 500; color: var(--fg); }
.pw-table td {
  font-family: var(--mono); font-size: 13px; color: var(--body);
  font-variant-numeric: tabular-nums;
}
.pw-table .pw-td-pro { color: var(--accent-dark); font-weight: 700; }
/* 只给读屏用的表头 —— 视觉上那一格是空的，但没有它这张表读起来是断的 */
.pw-vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.pw-steps-lite { list-style: none; margin: 12px 0 0; padding: 0; }
.pw-steps-lite li {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 22px;
  padding-block: 17px; border-top: 1px solid var(--line);
  align-items: baseline; font-size: 15px; color: var(--body);
}

@media (min-width: 760px) {
  .pw-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .pw-step { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 520px); gap: 32px; align-items: start; }
  .pw-step-n { padding-top: 3px; }
}

/* ---------- 法律文本（/legal/terms、/legal/privacy）----------
   一整篇散文，只用既有的设计词汇：正文 16px/1.78、标题走衬线、表格与
   /pricing 的对照表同一副面孔。版心收窄到 76ch —— 条款不是营销页，
   一行太长读不下去。 */
.pw-legal {
  padding-block: 8px 56px;
  font-size: 16px; line-height: 1.78; color: var(--body);
  overflow-wrap: anywhere;
}
.pw-legal > * { max-width: min(76ch, 100%); min-width: 0; }
.pw-legal h2 {
  margin: 44px 0 12px; font-size: clamp(20px, 3.4vw, 24px); line-height: 1.32;
  color: var(--fg); scroll-margin-top: 24px;
}
.pw-legal h3 { margin: 26px 0 8px; font-size: 16.5px; line-height: 1.4; color: var(--fg); }
.pw-legal p { margin: 0 0 12px; }
.pw-legal ul, .pw-legal ol { margin: 0 0 14px; padding-inline-start: 22px; }
.pw-legal li { margin-bottom: 6px; }
.pw-legal li::marker { color: var(--accent); }
.pw-legal a { color: var(--accent-dark); }
.pw-legal code {
  font-family: var(--mono); font-size: 13.5px;
  background: var(--muted); padding: 1px 5px; border-radius: 3px;
  overflow-wrap: anywhere;
}
.pw-legal strong { color: var(--fg); font-weight: 500; }
.pw-legal .pw-note {
  margin: 0 0 14px; padding: 12px 16px; border-inline-start: 3px solid var(--accent);
  background: var(--accent-light); color: var(--accent-dark); border-radius: 0 3px 3px 0;
  font-size: 15px;
}
.pw-legal table {
  width: 100%; max-width: min(76ch, 100%); table-layout: fixed;
  border-collapse: collapse; margin: 6px 0 18px;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  font-size: 14px;
}
.pw-legal th, .pw-legal td {
  text-align: start; vertical-align: top; padding: 10px 14px;
  border-top: 1px solid var(--line); background: var(--surface);
  overflow-wrap: anywhere;
}
.pw-legal thead th {
  border-top: 0; background: var(--bg); font-family: var(--mono);
  font-size: 12.5px; font-weight: 500; color: var(--fg);
}
.pw-legal-switch {
  padding-block: 0 56px; display: flex; gap: 22px; font-size: 14px;
}
.pw-legal-switch a { color: var(--dim); text-decoration: none; }
.pw-legal-switch a[aria-current] { color: var(--accent-dark); font-weight: 500; }