/* 规范见 DESIGN.md。只用下面的 token，不要写裸数值 */
:root {
  color-scheme: light dark;

  /* 颜色：light-dark(亮, 暗)。中性色是 slate，强调色取自图标的蓝色。对比度见 DESIGN.md */
  --fg: light-dark(#0f172a, #f1f5f9);
  --muted: light-dark(#475569, #94a3b8);
  --bg: light-dark(#f8fafc, #020617);
  --bg-alt: light-dark(#eaeef4, #111c33);
  --card: light-dark(#fff, #0f172a);
  --line: light-dark(#e2e8f0, #1e293b);
  --accent: #1d4ed8;
  --accent-hover: #1e40af;
  --accent-text: light-dark(#1d4ed8, #60a5fa);
  --on-accent: #fff;
  --accent-soft: light-dark(#eff6ff, #172554);
  --backdrop: light-dark(rgb(0 0 0 / 0.32), rgb(0 0 0 / 0.64));
  /* light-dark() 只接受颜色，所以只把阴影颜色做成 token */
  --shadow-color: light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.5));

  /* 字号：在 375px 到 1280px 之间线性缩放 */
  --fs-display: clamp(2.25rem, 1.732rem + 2.21vw, 3.5rem);
  --fs-h2: clamp(1.625rem, 1.47rem + 0.663vw, 2rem);
  --fs-h3: clamp(1.125rem, 1.073rem + 0.221vw, 1.25rem);
  --fs-lead: clamp(1.0625rem, 1.011rem + 0.221vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* 字重 */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* 行高、字距、行长：按文字体系覆盖，见下方 :lang() */
  --lh-body: 1.6;
  --lh-tight: 1.2;
  --lh-heading: 1.3;
  --ls-heading: -0.02em;
  --measure: 68ch;

  /* 间距：4px 基数 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* 布局 */
  --gutter: 20px;
  --content: 1080px;
  --section: var(--s-8);
  --grid-gap: var(--s-4);
  --tap: 44px;
  /* 顶栏高度：按钮高度 + 上下内边距 + 下边框 */
  --bar: calc(var(--tap) + 2 * var(--s-3) + 1px);

  /* 圆角 */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-full: 999px;

  /* 动效 */
  --dur: 160ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

/* 中日韩：行高加大，不收紧字距，行长按字数算 */
:root:lang(zh),
:root:lang(ja),
:root:lang(ko) {
  --lh-body: 1.75;
  --ls-heading: 0;
  --measure: 40em;
}

/* 阿拉伯、婆罗米、东南亚文字：字形有上下附标或连写，行高更大，不改字距 */
:root:is(:lang(ar), :lang(fa), :lang(ur), :lang(sd), :lang(hi), :lang(mr), :lang(ne), :lang(bn), :lang(as), :lang(gu), :lang(kn), :lang(or), :lang(ta), :lang(te), :lang(si), :lang(th), :lang(lo), :lang(km), :lang(my)) {
  --lh-body: 1.8;
  --lh-tight: 1.4;
  --lh-heading: 1.5;
  --ls-heading: 0;
}

/* pad */
@media (width >= 768px) {
  :root {
    --gutter: var(--s-6);
  }
}

/* desktop */
@media (width >= 1024px) {
  :root {
    --section: var(--s-9);
    --grid-gap: var(--s-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0ms;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  font: var(--fw-regular) var(--fs-body) / var(--lh-body) t, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--fg);
  background: var(--bg);
  /* 长复合词在窄屏比容器还宽时强制换行，见 DESIGN.md 第 7 节 */
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
  /* 按词组断行，避免日文把一个词拆到两行 */
  word-break: auto-phrase;
  /* 长复合词按语言规则断词加连字符 */
  hyphens: auto;
}

/* 中文标题只在空格和标点处换行，避免把「运行」这类词拆到两行。
   只限中文：日文词之间没有空格，keep-all 会让整句无法换行。放不下时由 body 的 overflow-wrap 兜底 */
:is(h1, h2, h3):lang(zh) {
  word-break: keep-all;
}

p {
  text-wrap: pretty;
}

p + p {
  margin-block-start: 1em;
}

strong {
  font-weight: var(--fw-semibold);
}

a {
  color: inherit;
  text-decoration: none;
}

/* 正文段落里的链接加下划线，不只靠颜色区分 */
main p a {
  color: var(--accent-text);
  text-decoration: underline;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
}

/* 菜单和 FAQ 的 summary 都自己画标记 */
summary {
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

svg {
  flex-shrink: 0;
}

figure {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* 跳转链接的目标，只用于程序聚焦，不显示焦点环 */
main:focus {
  outline: none;
}

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

/* 跳到主要内容：获得焦点时才显示 */
.skip {
  position: absolute;
  z-index: 3;
  inset-block-start: var(--s-3);
  inset-inline-start: var(--s-3);
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: var(--s-4);
  border-radius: var(--r-md);
  font-weight: var(--fw-semibold);
  color: var(--on-accent);
  background: var(--accent);
}

.skip:not(:focus) {
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
}

/* 顶栏。菜单面板相对它定位 */
.top {
  position: relative;
  z-index: 2;
  background: var(--bg);
  border-block-end: 1px solid var(--line);
}

/* 视口够高时吸顶。横屏手机和放大到 400% 时不吸顶，否则顶栏会挡住大半屏 */
@media (height >= 500px) {
  .top {
    position: sticky;
    inset-block-start: 0;
  }

  /* 锚点和焦点滚动时留出顶栏的高度，不被遮挡 */
  html {
    scroll-padding-block-start: var(--bar);
  }
}

.bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-block: var(--s-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  margin-inline-end: auto;
  font-weight: var(--fw-semibold);
}

/* 顶栏按钮：语言、主题、菜单 */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--muted);
  background: none;
  cursor: pointer;
}

.theme[hidden] {
  display: none;
}

/* 当前主题对应的图标：无 data-theme 表示跟随系统 */
.theme svg {
  display: none;
}

:root:not([data-theme]) .i-system,
:root[data-theme="light"] .i-light,
:root[data-theme="dark"] .i-dark {
  display: block;
}

/* 语言按钮：mobile 只显示图标，pad 和 desktop 加上当前语言名 */
.lang span {
  display: none;
}

@media (width >= 768px) {
  .lang {
    padding-inline: var(--s-3);
  }

  .lang span {
    display: inline;
  }
}

/* 顶部导航和顶栏的下载按钮只在 desktop 显示；mobile 和 pad 用菜单。
   .bar 限定的选择器优先级更高，不会被后面 .cta 的 display 覆盖 */
.nav,
.bar .bar-cta {
  display: none;
}

.nav ul {
  display: flex;
  gap: var(--s-1);
}

/* 文字链接：撑满触控高度。导航和菜单的内边距大，页脚和根页的小 */
.nav a,
.panel a:not(.cta),
.foot a,
.root ul a {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 有的语言文字很短（例如 FAQ），宽度也要撑到触控尺寸 */
  min-width: var(--tap);
  min-height: var(--tap);
  padding-inline: var(--s-2);
}

/* 菜单里的链接占满整行，文字靠起始侧 */
.panel a:not(.cta) {
  justify-content: flex-start;
}

.nav a,
.panel a:not(.cta) {
  padding-inline: var(--s-3);
  border-radius: var(--r-md);
}

.nav a {
  color: var(--muted);
}

/* 当前页：文字加深，并用强调色下划线标出，不只靠颜色 */
.nav a[aria-current],
.panel a[aria-current] {
  color: var(--fg);
  font-weight: var(--fw-semibold);
  text-decoration: underline 2px var(--accent-text);
  text-underline-offset: var(--s-2);
}

/* 菜单：details 实现，没有 JS 也能展开 */
.menu .i-close,
.menu[open] .i-menu {
  display: none;
}

.menu[open] .i-close {
  display: block;
}

/* 面板相对顶栏定位，覆盖在正文上，不推挤正文 */
.panel {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  max-block-size: calc(100dvh - var(--bar));
  padding: var(--s-3) var(--gutter) var(--s-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--card);
  border-block-end: 1px solid var(--line);
  box-shadow: 0 8px 24px var(--shadow-color);
}

.panel .cta {
  width: 100%;
  margin-block-start: var(--s-4);
}

@media (width >= 1024px) {
  .nav {
    display: block;
    margin-inline-end: auto;
  }

  .brand {
    margin-inline-end: var(--s-5);
  }

  .bar .bar-cta {
    display: inline-flex;
  }

  .menu {
    display: none;
  }
}

/* 主按钮：胶囊形 */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-inline: var(--s-6);
  border-radius: var(--r-full);
  font-weight: var(--fw-semibold);
  text-align: center;
  color: var(--on-accent);
  background: var(--accent);
  transition: background-color var(--dur) var(--ease);
}

.cta:active:not([aria-disabled]) {
  background: var(--accent-hover);
}

/* 顶栏里的下载按钮和顶栏按钮一样高 */
.bar-cta {
  min-height: var(--tap);
  padding-inline: var(--s-5);
}

/* 没有 App Store 链接时，下载页的按钮禁用 */
.cta[aria-disabled] {
  color: var(--muted);
  background: var(--line);
  cursor: not-allowed;
}

/* 语言对话框：mobile 为底部抽屉，pad 和 desktop 居中。网格列数 2 / 3 / 4 */
:root:has(.langs[open]) {
  overflow: hidden;
}

.langs {
  width: 100%;
  max-width: 100%;
  max-height: 85dvh;
  margin: auto auto 0;
  padding: 0;
  color: var(--fg);
  background: var(--card);
  border: 1px solid var(--line);
  border-block-end: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: 0 8px 24px var(--shadow-color);
}

.langs[open] {
  display: flex;
  animation: rise var(--dur) var(--ease);
}

.langs::backdrop {
  background: var(--backdrop);
}

.langs[open]::backdrop {
  animation: fade var(--dur) var(--ease);
}

@keyframes rise {
  from {
    opacity: 0;
    translate: 0 var(--s-4);
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

.sheet {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.sheet header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding-block: var(--s-2);
  padding-inline: var(--s-5) var(--s-2);
  border-block-end: 1px solid var(--line);
}

.sheet h2 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
}

.close {
  border-color: transparent;
}

.sheet ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-1);
  padding: var(--s-3);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sheet a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  line-height: var(--lh-heading);
}

.sheet a[aria-current] {
  color: var(--accent-text);
  font-weight: var(--fw-semibold);
  background: var(--accent-soft);
}

@media (width >= 768px) {
  .langs {
    width: min(720px, 100% - 2 * var(--gutter));
    max-height: min(80dvh, 640px);
    margin: auto;
    border-block-end: 1px solid var(--line);
    border-radius: var(--r-lg);
  }

  .sheet ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (width >= 1024px) {
  .sheet ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

main {
  flex: 1;
}

/* 首屏 */
.hero {
  padding-block: var(--section) calc(var(--section) * 0.75);
  text-align: center;
}

.hero h1 {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.hero p {
  max-width: var(--measure);
  margin: var(--s-5) auto 0;
  font-size: var(--fs-lead);
  color: var(--muted);
}

.hero .cta {
  margin-block-start: var(--s-6);
}

/* 区块。交替区块用 --bg-alt，里面不放卡片：暗色下卡片和交替背景几乎分不出来 */
.sec {
  padding-block: var(--section);
}

.sec.alt {
  background: var(--bg-alt);
}

/* 区块标题：h2 + 引导段落 */
.head {
  margin-block-end: var(--s-6);
  text-align: center;
}

.head h2,
.band h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
}

.head p {
  max-width: var(--measure);
  margin: var(--s-4) auto 0;
  color: var(--muted);
}

/* 卡片网格的共用排版 */
.grid h3,
.rows h3,
.steps h3 {
  margin-block-end: var(--s-2);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
}

.grid p,
.rows p,
.steps p {
  color: var(--muted);
}

/* 特性网格。列数按卡片数决定，最后一行不留孤立卡片：
   2、4、6、8 张在 pad 用 2 列；3、9 张用 3 列；desktop 上 4、8 张用 4 列，6 张用 3 列 */
.grid {
  display: grid;
  gap: var(--grid-gap);
}

.grid li {
  padding: var(--s-5);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  margin-block-end: var(--s-4);
  border-radius: var(--r-md);
  color: var(--accent-text);
  background: var(--accent-soft);
}

@media (width >= 768px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid.n3,
  .grid.n9 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (width >= 1024px) {
  .grid.n6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid.n4,
  .grid.n8 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 交替行：mobile 和 pad 文字在上、图在下；desktop 左右两栏，偶数行交换左右 */
.rows {
  display: grid;
  gap: var(--s-8);
}

.row {
  display: grid;
  gap: var(--s-5);
}

/* mobile 和 pad 上图在文字下面，全宽时高约 500px，限制宽度并居中。desktop 的半栏本来就更窄，不受影响 */
.row figure {
  width: 100%;
  max-width: calc(var(--content) / 2);
  margin-inline: auto;
}

@media (width >= 1024px) {
  .row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: var(--s-8);
  }

  .row:nth-child(even) figure {
    order: -1;
  }
}

/* 示意图：窗口外框 + 调用方画的内容。颜色全部用 token，跟随暗色模式 */
.window {
  display: block;
  width: 100%;
  height: auto;
}

.w-frame {
  fill: var(--card);
  stroke: var(--line);
}

.w-bar {
  fill: var(--bg-alt);
}

.w-dot {
  fill: var(--line);
}

/* 示意图内容的填充色，供各页面的 art-* mixin 使用 */
.a-soft {
  fill: var(--accent-soft);
}

.a-accent {
  fill: var(--accent-text);
}

.a-bg {
  fill: var(--bg-alt);
}

.a-line {
  fill: var(--line);
}

.a-muted {
  fill: var(--muted);
}

/* FAQ：details 折叠 */
.faq {
  max-width: var(--measure);
  margin-inline: auto;
}

.faq details {
  border-block-end: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--tap);
  padding-block: var(--s-4);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

/* 展开状态的标记。替代文本为空，读屏只读 details 自身的展开状态 */
.faq summary::after {
  content: "+" / "";
  font-size: var(--fs-h3);
  color: var(--muted);
}

.faq details[open] summary::after {
  content: "−" / "";
}

.faq details p {
  padding-block-end: var(--s-4);
  color: var(--muted);
}

/* CTA 条 */
.band {
  padding-block: var(--section);
  text-align: center;
  background: var(--bg-alt);
}

.band .cta {
  margin-block-start: var(--s-5);
}

/* 步骤：序号用圆形徽标 */
.steps {
  display: grid;
  gap: var(--grid-gap);
  counter-reset: step;
}

.steps li {
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  margin-block-end: var(--s-4);
  border-radius: var(--r-full);
  font-weight: var(--fw-semibold);
  color: var(--accent-text);
  background: var(--accent-soft);
}

@media (width >= 768px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 系统要求 */
.reqs {
  display: grid;
  gap: var(--grid-gap);
}

.reqs div {
  padding-block: var(--s-4);
  border-block-start: 1px solid var(--line);
}

.reqs dt {
  font-weight: var(--fw-semibold);
}

.reqs dd {
  margin: var(--s-1) 0 0;
  color: var(--muted);
}

@media (width >= 768px) {
  .reqs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 页脚 */
.foot {
  padding-block: var(--s-6);
  font-size: var(--fs-small);
  text-align: center;
  color: var(--muted);
  border-block-start: 1px solid var(--line);
}

.foot ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--s-2);
}

.foot p {
  margin-block-start: var(--s-2);
}

/* 根页和 404：居中的品牌和链接 */
.root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  padding-block: var(--section);
  text-align: center;
}

.root h1 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
}

.root p {
  color: var(--muted);
}

.root ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-1) var(--s-4);
}

.root ul a {
  color: var(--accent-text);
}

/* hover 只给能悬停的设备，避免触屏上粘住 */
@media (hover: hover) {
  .btn:hover {
    color: var(--fg);
    border-color: var(--muted);
  }

  .nav a:hover {
    color: var(--fg);
  }

  .panel a:not(.cta):hover,
  .sheet a:not([aria-current]):hover {
    background: var(--bg);
  }

  .cta:not([aria-disabled]):hover {
    background: var(--accent-hover);
  }

  .faq summary:hover {
    color: var(--accent-text);
  }

  .root ul a:hover {
    text-decoration: underline;
  }

  .foot a:hover {
    color: var(--fg);
    text-decoration: underline;
  }
}

/* 首页专用样式。所有选择器以 .p-home 开头，构建时拼在 style.css 后面 */

/* 首屏：三端都居中，图在文字下面（DESIGN.md 第 2 节）。
   desktop 不分两栏：两栏时左栏太窄，中文主标题会断成「在 Mac 上运行 / Windows、/ Linux 和 macOS」 */
.p-home .hero figure {
  max-width: calc(var(--content) / 2);
  margin: var(--s-7) auto 0;
}

.p-home .hero .note {
  margin-block-start: var(--s-4);
  font-size: var(--fs-small);
}

/* 可以安装的系统：系统名做成标签，横排，居中换行。标签不可点击，所以没有悬停样式。
   用 --bg 做底：区块背景是 --bg-alt，只靠 --line 边框几乎看不见（对比 1.06） */
.p-home .os {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  max-width: var(--measure);
  margin-inline: auto;
  font-weight: var(--fw-semibold);
}

/* desktop 放得下 7 个标签，排成 1 行，不留单独换行的标签；pad 和 mobile 放不下，居中换行 */
@media (width >= 1024px) {
  .p-home .os {
    max-width: none;
  }
}

/* 系统名不在中间断开，例如「Windows」和「11」 */
.p-home .os li {
  padding: var(--s-2) var(--s-4);
  white-space: nowrap;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
}

/* 交替行下方的「查看全部功能」链接 */
.p-home .more {
  margin-block-start: var(--s-8);
  text-align: center;
}

.p-home .more a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: var(--fw-semibold);
}

/* 下载页 */

/* 页尾的常见问题链接只有 1 行，区块内边距用 --s-8，不用整个 --section */
.p-download .sec.short {
  padding-block: var(--s-8);
}

/* 系统要求下方的功能页链接、页尾的常见问题链接：居中。
   链接做成 inline-flex 并撑到 --tap 高，满足 44px 触控目标 */
.p-download .more,
.p-download .ask {
  text-align: center;
}

.p-download .more {
  margin-block-start: var(--s-5);
}

.p-download .ask {
  font-size: var(--fs-lead);
}

.p-download .more a,
.p-download .ask a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

/* 常见问题页 */

/* 首屏下边距已经留出间隔，问答区块不再加上边距 */
.p-faq .hero + .sec {
  padding-block-start: 0;
}

/* 分组标题和问答列表左对齐，宽度和列表一致 */
.p-faq .head {
  max-width: var(--measure);
  margin-inline: auto;
  margin-block-end: var(--s-4);
  text-align: start;
}

.p-faq .group + .group {
  margin-block-start: var(--s-8);
}

/* 列表上方补 1 条分割线，和每条问题下方的分割线成组 */
.p-faq .faq {
  border-block-start: 1px solid var(--line);
}