/**
 * Anvil 旗舰产品页的版式（只放本页特有的部分，令牌和通用组件一律取 mx.css）。
 *
 * 业务定位：Anvil 是产品线里最强的一条，页面按首页的语言重排：内页首屏 → 章节两栏左右交替 → 证明条带与定义表 → 接入。
 * 为什么要自己的版式：原页是一屏一屏同样的卡片网格，Owner 要求有节奏；这里给每一种信息一个固定的形状：
 *   - 生命周期三步、三项控制权这类「并列的短证明」用横排条带（.ax-steps / .ax-proof）；
 *   - 四个观察层、BIOS 前提这类「标签 + 解释」用 mx.css 的 .table；
 *   - 能力和场景用 .card，但列数各不相同（4 / 2 / 3），合作方一节改成逐行列表。
 * 对齐：.ax-split、.ax-rows、.ax-required 与 .chapter-in 共用 5:7 两栏和同一个栏间距，
 * 整页右栏的左边线是同一条；窄屏（≤960）统一单栏。
 */

/* 首屏：左栏标题与导语，右栏三条平台特性；底部对齐，右栏最后一条的底线与按钮行底边齐平 */
.ax-head-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.ax-head .lead { max-width: 40em; }
.ax-claims { border-top: 1px solid var(--line); }
.ax-claims li { display: flex; align-items: center; height: 48px; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--text-2); }

/* 章节通用 */
/* 原文标题都是整句，用首页 h2 的字号会在 5 栏里折成三四行；页内标题统一降一档 */
.ax-sec h2 { margin-bottom: 22px; font-size: clamp(28px, 2.5vw, 42px); line-height: 1.3; }
.ax-body { max-width: 38em; }
.ax-planes { aspect-ratio: 7 / 6; }
.ax-viz { aspect-ratio: 3 / 2; }
.ax-caps { aspect-ratio: 4 / 3; }
/* 章节两栏与下方的条带、卡片之间的距离统一 */
.ax-steps, .ax-proof, .ax-cards, .ax-table { margin-top: clamp(48px, 5vw, 80px); }

/* 横排条带：顶线 + 小号编号或标签 + 标题 + 说明；同一行三格顶线齐平 */
.ax-steps, .ax-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.ax-steps > li, .ax-proof > div { padding-top: 22px; border-top: 1px solid var(--line-2); }
.ax-no, .ax-proof dt, .ax-tag { font: 500 13px/1.4 var(--mono); letter-spacing: .02em; color: var(--text-3); }
.ax-steps h3 { margin: 14px 0 10px; }
.ax-steps p { font-size: 15px; color: var(--text-2); }
.ax-proof dd { margin: 0; }
.ax-val { display: block; font: 500 clamp(20px, 1.7vw, 26px) / 1.35 var(--display); color: var(--text); }
.ax-proof .ax-val { margin-top: 12px; }
.ax-note { display: block; margin-top: 6px; font-size: 14px; line-height: 1.65; color: var(--text-3); }

/* 标题与导语分两栏：标题在左栏，导语在右栏，底边对齐 */
.ax-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.ax-split h2 { margin-bottom: 0; }

/* 卡片：列数按内容定，同一行卡片等高（grid 默认拉伸） */
.ax-cards { display: grid; gap: 20px; }
.ax-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ax-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ax-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ax-cards .card p { font-size: 15px; }
.ax-cards .card strong { font-weight: 500; color: var(--text); }
/* 三四列的卡片窄，整句标题用 h3 原字号会折出单字尾行，降一档 */
.ax-cards-4 .card h3, .ax-cards-3 .card h3 { font-size: clamp(20px, 1.6vw, 24px); }

/* 定义表：dd 限宽，宽屏上一行不拉到一千多像素 */
.ax-table dt { font: 500 15px/28px var(--sans); color: var(--text); }   /* 层名是中文，等宽小字里中文会发散 */
.ax-table dd { max-width: 46em; }
.ax-table-proof { margin-top: 0; }
.ax-table-proof .ax-note { margin-top: 2px; }

/* 一句话的结论：宋体，左侧一条细线，不用强调色 */
.ax-ink { margin-top: 28px; padding-left: 20px; border-left: 1px solid var(--line-2); font: 500 clamp(18px, 1.5vw, 22px) / 1.6 var(--display); color: var(--text); max-width: 34em; }
.ax-ink-end { margin-top: clamp(40px, 4vw, 64px); }

/* 唯一入口：整块面板，内部仍是 5:7 两栏。去油：渐变底与顶部内高光换成发丝细线加中性平底（同 mx.css .card） */
.ax-required { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding: clamp(28px, 4vw, 64px); border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface); }
.ax-required .actions { margin-top: 28px; }

/* 合作方：逐行列表，左栏标签与标题，右栏说明 */
.ax-rows { margin-top: clamp(48px, 5vw, 80px); border-top: 1px solid var(--line); }
.ax-rows > li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); padding: clamp(24px, 2.4vw, 36px) 0; border-bottom: 1px solid var(--line); }
.ax-row-head h3 { margin-top: 10px; font-size: clamp(20px, 1.7vw, 26px); }
.ax-rows p { max-width: 40em; color: var(--text-2); }

/* 接入与结语：居中 */
.ax-cta-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ax-cta .sub { max-width: 40em; }
.ax-cta .actions { justify-content: center; margin-top: 32px; }
.ax-closing { margin-top: clamp(72px, 8vw, 128px); }
.ax-closing blockquote { margin: 0; font: 500 clamp(40px, 5vw, 76px) / 1.15 var(--display); letter-spacing: -.005em; color: var(--text); }
.ax-closing figcaption { margin-top: 18px; font: 500 13px/1.4 var(--mono); color: var(--text-3); }

@media (max-width: 1200px) {
  .ax-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .ax-head-in, .ax-split, .ax-required, .ax-rows > li { grid-template-columns: minmax(0, 1fr); }
  .ax-head-in { gap: 40px; }
  .ax-split { gap: 18px; }
  .ax-rows > li { gap: 10px; }
  .ax-steps, .ax-proof, .ax-cards-3 { grid-template-columns: minmax(0, 1fr); }
  .ax-viz { aspect-ratio: 1 / 1; }
}
@media (max-width: 640px) {
  .ax-cards-4, .ax-cards-2 { grid-template-columns: minmax(0, 1fr); }
  .ax-planes { aspect-ratio: 1 / 1; }
  .ax-caps { aspect-ratio: 3 / 4; }
  .ax-closing blockquote { font-size: 36px; }
  /* 手机上两个按钮折成两行时宽度不一，左右边对不齐：各占满一行 */
  .ax-head .actions .btn { flex: 1 1 100%; }
}

/* 11-11 第十三轮孤字：规格表说明和小注折行后末行只剩一两个字（中文 360 / 1024）或一个词（英文 360）。只在末行过短时重排 */
.ax-table dd { text-wrap: pretty; }
/* 小注是一两行的短句，中文两字孤行 pretty 不处理，改用 balance；选择器要压过上一条 .ax-table dd */
.ax-table .ax-note, .ax-note { text-wrap: balance; }