/* 规范见 DESIGN.md。只用下面的 token，不要写裸数值。数值取自 apple.com/imac 的实测（spec/vm64-apple.md） */
:root {
  /* 只有浅色。only 禁止浏览器强制变暗：系统是深色时，Android Chrome 的「自动深色」会把只写 light 的页面反色 */
  color-scheme: only light;

  /* 颜色：全部取自 Apple 实测。对比度见 DESIGN.md 第 3 节 */
  --fg: #1d1d1f;
  --muted: #6e6e73;
  --bg: #fff;
  --bg-alt: #f5f5f7;
  --bg-soft: #fafafc;
  --card: #fff;
  --fill: #e8e8ed;
  --line: rgb(0 0 0 / 0.16);
  --link: #0066cc;
  --accent: #0071e3;
  --accent-hover: #0076df;
  --accent-active: #006edb;
  --on-accent: #fff;
  --accent-soft: #e6f1fc;
  --nav-text: rgb(0 0 0 / 0.8);
  --brand-text: rgb(0 0 0 / 0.88);
  --foot-text: rgb(0 0 0 / 0.56);
  --foot-link: rgb(0 0 0 / 0.72);
  --foot-sep: rgb(0 0 0 / 0.48);
  --glass: rgb(250 250 252 / 0.8);
  --glass-solid: rgb(250 250 252 / 0.92);
  --curtain: rgb(232 232 237 / 0.4);
  --backdrop: rgb(0 0 0 / 0.4);
  --shadow-color: rgb(0 0 0 / 0.12);
  --bezel: #1d1d1f;

  /* 段标题色和淡彩卡：只放在白色区块里，--hl-pink 只比 4.5 高 0.01，不要调浅 */
  --hl-blue: #1359b5;
  --hl-purple: #615d90;
  --hl-pink: #c94a67;
  --tint-blue: #edf4fc;
  --tint-purple: #f1f0fe;
  --tint-pink: #fdeaee;

  /* 插图色：Apple 产品配色，只用于示意图的填充 */
  --ill-blue: #547eae;
  --ill-purple: #827eb2;
  --ill-pink: #de5f7d;
  --ill-orange: #e3704b;
  --ill-green: #3e935c;
  --dot-red: #ff5f57;
  --dot-yellow: #febc2e;
  --dot-green: #28c840;

  /* 字体：系统字体，Mac 上就是 SF Pro。中日韩在下方按语言插入字体，见 DESIGN.md 第 5 节 */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  /* 字号、行高、字距：按断点阶梯切换。这里是 S 档，M、L 档见下方媒体查询，取值见 DESIGN.md 第 6 节 */
  --fs-super: 3rem;
  --lh-super: 1.0833;
  --ls-super: -0.003em;
  --fs-hero: 1.75rem;
  --lh-hero: 1.1429;
  --ls-hero: 0.007em;
  --fs-section: 2rem;
  --lh-section: 1.125;
  --ls-section: 0.004em;
  --fs-sub: 1.5rem;
  --lh-sub: 1.1667;
  --ls-sub: 0.009em;
  --fs-title: 1.3125rem;
  --lh-title: 1.1905;
  --ls-title: 0.011em;
  --fs-intro: 1.1875rem;
  --lh-intro: 1.4211;
  --ls-intro: 0.012em;
  --fs-body: 1.0625rem;
  --lh-body: 1.4706;
  --ls-body: -0.022em;
  --fs-small: 0.875rem;
  --lh-small: 1.2857;
  --ls-small: -0.016em;
  --fs-fine: 0.75rem;
  --lh-fine: 1.3333;
  --ls-fine: -0.01em;

  /* 字重：只用 400 和 600 */
  --fw-regular: 400;
  --fw-semibold: 600;

  /* 间距 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;

  /* 布局：S 档。见 DESIGN.md 第 2 节 */
  --content: min(420px, 87.5%);
  --section: 112px;
  --gap-head: 32px;
  --gap-media: 60px;
  --pad: 24px;
  --gap: var(--s-5);
  --tap: 44px;
  /* 段标题、段标题组里标题到引导段的距离；引导段的最大宽度 */
  --lead-gap: var(--s-3);
  --lead-w: 100%;
  /* 导航：高度、内容区两侧内边距 */
  --bar: 48px;
  --nav-pad: 16px;

  /* 圆角 */
  --r-sm: 8px;
  --r-md: 18px;
  --r-card: 28px;
  --r-full: 980px;

  /* 动效 */
  --dur-fast: 100ms;
  --dur: 320ms;
  --dur-reveal: 700ms;
  --ease: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-out: cubic-bezier(0, 0, 0.5, 1);
  --rise: 30px;
  /* 展开面板（S 档）的延迟，取自 Apple 子导航的菜单：展开时第 1 个链接的延迟、收起时面板和幕布的延迟、相邻链接的错开 */
  --menu-in: 260ms;
  --menu-out: 240ms;
  --menu-stagger: 20ms;

  /* 自绘滚动条：用户指定的样式，取自 webc 的 Scroll 组件，不是 Apple 实测，见 DESIGN.md 第 9 节"滚动条"。
     可操作宽度、滑块宽度（悬停和拖动时加宽）、滑块最短长度；滑块是深色填充加浅色描边，同 macOS 的悬浮滚动条 */
  --sb: var(--s-3);
  --sb-thumb: 6px;
  --sb-thumb-hover: 10px;
  --sb-min: var(--s-7);
  --sb-fill: #64748b;
  --sb-edge: #fff;
  --sb-track: rgb(15 23 42 / 0.06);
  /* 滚动条的光标，取自 webc：悬停时上下箭头，拖动时抓手。浅色填充加深色描边，在滑块和浅色背景上都看得清。
     内联成 data URI：外链的抓手第 1 次拖动时才请求，请求完成前显示兜底光标 */
  --cur-scroll: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' stroke='%23000' stroke-linejoin='round' stroke-width='2' d='M12 2 6 8h4v8H6l6 6 6-6h-4V8h4z'/%3E%3C/svg%3E") 10 10, ns-resize;
  --cur-grab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='14' fill='none'%3E%3Cpath fill='%23ffffffb3' fill-rule='evenodd' stroke='%230000008c' stroke-linejoin='round' stroke-width='.75' d='M3.573 2.036c.48-.178 1.427-.069 1.677.473.213.462.396 1.241.406 1.075.024-.369-.024-1.167.137-1.584.117-.304.347-.59.686-.69a1.9 1.9 0 0 1 .916-.056c.313.064.642.287.765.5.362.622.368 1.898.385 1.83.064-.272.07-1.229.283-1.584.141-.235.497-.445.687-.479.294-.052.656-.068.964-.008.25.05.586.344.677.487.22.344.342 1.316.38 1.658.015.141.073-.393.292-.736.406-.639 1.844-.763 1.898.64.026.653.02.623.02 1.063 0 .516-.012.828-.04 1.202-.03.4-.116 1.304-.24 1.742-.087.301-.372.978-.654 1.384 0 0-1.074 1.25-1.19 1.812-.118.563-.079.567-.103.965-.023.4.121.923.121.923s-.8.104-1.234.034c-.39-.062-.875-.84-1-1.078-.172-.328-.539-.265-.682-.023-.224.383-.709 1.07-1.05 1.113-.669.084-2.055.03-3.14.02 0 0 .185-1.01-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.92c-.283-.36-1.002-.93-1.243-1.986C.875 6.46.896 6 1.125 5.625c.232-.38.67-.589.854-.625.208-.042.692-.039.875.062.223.123.313.16.488.391.23.307.312.456.213.121-.076-.262-.322-.595-.434-.97-.109-.36-.4-.943-.38-1.526.008-.22.103-.77.832-1.042Z'/%3E%3Cpath stroke='%230000008c' stroke-linecap='round' stroke-width='.75' d='M10.566 9.734V6.275M8.55 9.746l-.015-3.473m-1.98.032.02 3.426'/%3E%3C/svg%3E") 8 7, grabbing;
}

/* M 档 */
@media (width >= 735px) {
  :root {
    --fs-super: 4rem;
    --lh-super: 1.0625;
    --ls-super: -0.009em;
    --fs-hero: 3rem;
    --lh-hero: 1.0833;
    --ls-hero: -0.003em;
    --fs-section: 2.5rem;
    --lh-section: 1.1;
    --ls-section: 0;
    --fs-sub: 1.75rem;
    --lh-sub: 1.1429;
    --ls-sub: 0.007em;
    --fs-title: 1.5rem;
    --lh-title: 1.1667;
    --ls-title: 0.009em;
    --fs-intro: 1.3125rem;
    --lh-intro: 1.381;
    --ls-intro: 0.011em;
    --content: min(1260px, 87.5%);
    --section: 120px;
    --gap-head: 40px;
    --gap-media: 70px;
    --pad: 28px;
    --lead-gap: var(--s-6);
    --lead-w: 72%;
    --bar: 52px;
    --nav-pad: 22px;
  }
}

/* L 档 */
@media (width >= 1069px) {
  :root {
    --fs-super: 5rem;
    --lh-super: 1.05;
    --ls-super: -0.015em;
    --fs-hero: 3.5rem;
    --lh-hero: 1.0714;
    --ls-hero: -0.005em;
    --fs-section: 3rem;
    --lh-section: 1.0833;
    --ls-section: -0.003em;
    --fs-sub: 2rem;
    --lh-sub: 1.125;
    --ls-sub: 0.004em;
    --fs-title: 1.75rem;
    --lh-title: 1.1429;
    --ls-title: 0.007em;
    --section: 144px;
    --gap-head: 48px;
    --gap-media: 80px;
    --pad: 32px;
    --lead-w: 680px;
  }
}

/* 中日韩：字距全部为 0，行高按 apple.com.cn 实测加大（DESIGN.md 第 7 节）。
   这条规则的优先级高于上面的 :root，所以 M、L 档里要再写一次随断点变化的行高 */
:root:is(:lang(zh), :lang(ja), :lang(ko)) {
  --ls-super: 0;
  --ls-hero: 0;
  --ls-section: 0;
  --ls-sub: 0;
  --ls-title: 0;
  --ls-intro: 0;
  --ls-body: 0;
  --ls-small: 0;
  --ls-fine: 0;
  --lh-super: 1.0938;
  --lh-section: 1.2188;
  --lh-title: 1.3333;
  --lh-small: 1.3571;
}

@media (width >= 735px) {
  :root:is(:lang(zh), :lang(ja), :lang(ko)) {
    --lh-section: 1.1;
    --lh-title: 1.2917;
  }
}

@media (width >= 1069px) {
  :root:is(:lang(zh), :lang(ja), :lang(ko)) {
    --lh-super: 1.0875;
    --lh-section: 1.0833;
    --lh-title: 1.1429;
  }
}

/* 中日韩的字体：在西文系统字体后面按语言插入，Mac 上是苹方、冬青黑体或 Apple SD Gothic Neo；zh 另外在最前面加 t, pingfang。
   Windows 上 Segoe UI 没有汉字，必须显式列出，否则繁体页面会用简体字形。
   zh 第 1 位是网络字体 t（思源黑体 SC），只有 zh 内容页引用它的字体 CSS。t 只覆盖中文字符，西文、数字和空格落到后面的系统字体（Mac 上是 SF Pro）。
   第 2 位 pingfang 也在字体 CSS 里，用 local() 读系统的苹方，只覆盖中文字符：t 到达前汉字也是每字 1 em，Safari 换字体时不重排。
   zh-TW 也匹配 :lang(zh)，它的规则写在后面，覆盖这条，所以不用 t（t 只有简体字形）。见 DESIGN.md 第 5 节 */
:root:lang(zh) {
  --font: t, pingfang, -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", Roboto, "Noto Sans", "Noto Sans SC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

:root:lang(zh-TW) {
  --font: -apple-system, BlinkMacSystemFont, "PingFang TC", "Segoe UI", "Microsoft JhengHei", Roboto, "Noto Sans", "Noto Sans TC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

:root:lang(ja) {
  --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Segoe UI", "Yu Gothic UI", Meiryo, Roboto, "Noto Sans", "Noto Sans JP", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

:root:lang(ko) {
  --font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", Roboto, "Noto Sans", "Noto Sans KR", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

/* 阿拉伯、婆罗米、东南亚文字：字形有上下附标或连写。字距为 0，标题行高 ≥ 1.4，正文 1.8，最小字号 14px */
: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)) {
  --ls-super: 0;
  --ls-hero: 0;
  --ls-section: 0;
  --ls-sub: 0;
  --ls-title: 0;
  --ls-intro: 0;
  --ls-body: 0;
  --ls-small: 0;
  --ls-fine: 0;
  --lh-super: 1.4;
  --lh-hero: 1.4;
  --lh-section: 1.5;
  --lh-sub: 1.5;
  --lh-title: 1.5;
  --lh-intro: 1.6;
  --lh-body: 1.8;
  --lh-small: 1.8;
  --lh-fine: 1.8;
  --fs-fine: 0.875rem;
}

/* S 档的中文标题小一档：super 级 40px（Apple 48px），section 级 28px（Apple 32px）。
   中文标题只在空格和标点处换行（keep-all），整段短语比 1 行宽时被强制断开，断开的位置是任意的，下一行常只剩 1、2 个字
   （例如"快照和自动 / 化"）。320 宽时 40px 的 1 行放得下 7 个字，28px 放得下 10 个字。
   用固定的 rem，不用 vw：vw 跟着页面缩放变小，放大页面时标题不变大（WCAG F94）。
   写成 (width < 735px)：这条规则的优先级高于 M、L 档的 :root，不能漏到大屏 */
@media (width < 735px) {
  :root:lang(zh) {
    --fs-super: 2.5rem;
    --fs-section: 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-reveal: 0ms;
    --menu-in: 0ms;
    --menu-out: 0ms;
    --menu-stagger: 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: 100dvh;
  font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font);
  letter-spacing: var(--ls-body);
  color: var(--fg);
  background: var(--bg);
  /* 和 apple.com 一样用灰度抗锯齿，Mac 上的字形更细 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 长复合词在窄屏比容器还宽时强制换行，见 DESIGN.md 第 7 节 */
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  font-size: inherit;
  font-weight: var(--fw-semibold);
  text-wrap: balance;
  /* 按词组断行，避免日文把一个词拆到两行 */
  word-break: auto-phrase;
  /* 长复合词按语言规则断词加连字符 */
  hyphens: auto;
}

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

/* 段落、问题、规格表避免最后一行只剩 1 个字 */
:is(p, summary, dt, dd) {
  text-wrap: pretty;
}

/* 缅甸文只在空格处换行：浏览器会在音节中间断开（例如带 asat 的辅音起行），读者看到残缺的字。
   缅甸文译文在短语之间有空格，放不下时由 body 的 overflow-wrap 兜底 */
:root:lang(my) {
  word-break: keep-all;
}

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

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

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

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

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

button {
  font: inherit;
  letter-spacing: 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);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

main {
  flex: 1;
}

/* 容器：视口的 87.5%，S 档最宽 420px，M、L 档最宽 1260px（DESIGN.md 第 2 节） */
.wrap {
  width: var(--content);
  margin-inline: auto;
}

/* 点击区：比 44px 小的控件，伪元素向四周扩到 44×44（DESIGN.md 第 9 节"触控目标"）。比 44px 大的方向不扩，也不缩。
   导航的小胶囊高 24px、分段控件的标签高 36px，视觉尺寸照搬 Apple。
   品牌链接和导航链接的盒子和文字一样高。盒子高 44px 时，焦点环（偏移 3px、宽 2px）高 54px。焦点环比导航高，顶边被视口裁掉。
   inset 的百分比纵向按高度算、横向按宽度算，所以 1 个公式通用。控件自己是 position: relative。
   导航链接之间是 24px：相邻 2 个链接的文字宽度之和 ≥ 40px 时，扩出的点击区不重叠（75 种语言里最窄的是 ms 的 "Ciri"，18.6px） */
:is(.cta.small, .nav a, .tablist button, .brand)::after {
  content: "";
  position: absolute;
  inset: min(0px, (100% - var(--tap)) / 2);
}

/* 读屏播报：视觉隐藏，读屏仍能读出 */
.busy {
  position: absolute;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

/* 排版级别：全站组件在这里挂到级别上，页面专属元素在各页的 css 里挂。每级的字号、行高、字距见 DESIGN.md 第 6 节 */
.hero.page h1,
.lockup h2 {
  font-size: var(--fs-super);
  line-height: var(--lh-super);
  letter-spacing: var(--ls-super);
}

.hero h1 {
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
}

.head h2,
.band h2,
.root h1,
.steps > li::before {
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-section);
  letter-spacing: var(--ls-section);
}

.eyebrow,
.grid h3,
.steps h3,
.sheet h2 {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}

/* 品牌名同 Apple 子导航的产品名：S 19px，M 和 L 21px */
.lead,
.brand {
  font-size: var(--fs-intro);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-intro);
  letter-spacing: var(--ls-intro);
}

.lead {
  color: var(--muted);
}

.note,
.tablist button,
.panel a {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-small);
}

.nav a,
.cta.small,
.foot {
  font-size: var(--fs-fine);
  line-height: var(--lh-fine);
  letter-spacing: var(--ls-fine);
}

/* 导航：1 层吸顶，样式取 Apple 的子导航。毛玻璃、1px 底线，不加阴影。展开面板相对它定位 */
.top {
  position: relative;
  z-index: 2;
  border-block-end: 1px solid var(--line);
}

/* 毛玻璃画在伪元素上，不画在 .top 上（同 Apple 的 .ac-ln-background）：带 backdrop-filter 的元素会成为
   position: fixed 子元素的包含块，展开面板的幕布就只能铺满导航自己，盖不住正文。
   z-index -1：在导航的层叠上下文里画在导航的内容下面 */
.top::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

/* 不支持毛玻璃、或开启"减少透明度"时，用更不透明的底色，正文不会透出来干扰文字 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .top::before {
    background: var(--glass-solid);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .top::before {
    background: var(--glass-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

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

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

/* 内容区最宽 980px，两侧内边距 22px（S 档 16px），同 Apple 子导航 */
.bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  max-width: calc(980px + 2 * var(--nav-pad));
  height: var(--bar);
  margin-inline: auto;
  padding-inline: var(--nav-pad);
}

/* 盒子和品牌名一样高。点击区见上方的伪元素规则 */
.brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-inline-end: auto;
  color: var(--brand-text);
}

/* 图标按钮：导航的语言按钮和展开箭头、对话框的关闭按钮 */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  color: var(--nav-text);
  background: none;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

/* 导航里的图标按钮：焦点环画在按钮里面（同 Apple 全局导航），直径 34px。
   画在外面时直径 54px，比导航高，顶边被视口裁掉 */
.bar .btn:focus-visible {
  outline-offset: -7px;
}

/* M、L 档的横排链接；S 档用展开面板 */
.nav {
  display: none;
}

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

/* 链接的盒子和文字一样大。点击区见上方的伪元素规则 */
.nav a {
  position: relative;
  display: block;
  color: var(--nav-text);
  transition: color var(--dur) var(--ease);
}

/* 当前页：文字加深，下方 1px 线和文字一样宽，贴着导航底边。
   链接在导航里垂直居中：50% 是链接高度的一半，再减半个导航高，线的底边落在导航底边 */
.nav a[aria-current] {
  color: var(--fg);
}

.nav a[aria-current]::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: calc(50% - var(--bar) / 2);
  height: 1px;
  background: var(--fg);
}

/* S 档的展开箭头：details 实现，没有 JS 也能展开。
   展开和收起的动画同 Apple 子导航的菜单（DESIGN.md 第 9 节"展开面板"）：page.js 在展开前和收起时给 .menu 加 .shut，
   面板、链接、幕布过渡到收起的样子，箭头翻回向下。没有 JS 时没有 .shut，收起没有过渡 */

/* 箭头先压平再翻成向上（同 Apple 的 chevron）：path 在竖直方向从 1 缩放到 -1。
   non-scaling-stroke：线宽不随缩放变细，所以按屏幕像素写，1.5 × 16 / 24 = 1px */
.menu summary path {
  transform-box: fill-box;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
  stroke-width: 1px;
}

.menu[open]:not(.shut) summary path {
  animation: chevron-up var(--dur) both;
}

/* 收起途中（.shut）箭头翻回向下。没有 JS 时收起不播放 */
.menu.shut summary path {
  animation: chevron-down var(--dur) both;
}

/* 前半段和后半段的曲线取自 Apple。压平时缩放到 0.001：缩放到 0 时矩阵不可逆，浏览器不画这条线 */
@keyframes chevron-up {
  from {
    animation-timing-function: cubic-bezier(0.12, 0, 0.38, 0);
  }

  50% {
    scale: 1 0.001;
    animation-timing-function: cubic-bezier(0.2, 1, 0.68, 1);
  }

  to {
    scale: 1 -1;
  }
}

@keyframes chevron-down {
  from {
    scale: 1 -1;
    animation-timing-function: cubic-bezier(0.2, 0, 0.68, 0);
  }

  50% {
    scale: 1 0.001;
    animation-timing-function: cubic-bezier(0.2, 1, 0.68, 1);
  }
}

/* 面板在导航下方，全宽，不推挤正文。从上往下显露；用 clip-path，不用 Apple 的 max-height：布局属性不加过渡 */
.panel {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  padding-block: var(--s-2) var(--s-4);
  background: var(--bg-soft);
  border-block-end: 1px solid var(--line);
  clip-path: inset(0);
  transition: clip-path var(--dur) var(--ease);
}

/* 收起：链接先淡出，面板和幕布推迟 --menu-out 再收。
   收起状态（没有 open）也写成收起的样子：WebKit 在收起的 details 里也计算面板的样式，展开时从这里起步 */
.menu:is(.shut, :not([open])) .panel {
  clip-path: inset(0 0 100%);
  transition-delay: var(--menu-out);
}

/* 幕布：盖住面板下方的正文。画在 details 自己的伪元素上，点它时事件目标是 details 本身，page.js 据此关闭面板。
   z-index -1：在导航的层叠上下文里画在导航的内容（含面板）下面；它从导航下边缘开始，不盖导航的毛玻璃。
   收起时也生成，只是透明并且 hidden（不绘制，也不接收点击）：WebKit 不给刚生成的伪元素播放过渡，只在展开时生成就不会淡入。
   visibility 随 opacity 过渡：淡入时立刻可见，淡出时到结束才隐藏 */
.menu::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: var(--bar) 0 0;
  background: var(--curtain);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transition:
    opacity var(--dur) var(--ease),
    visibility var(--dur) var(--ease);
}

.menu:is(.shut, :not([open]))::after {
  opacity: 0;
  visibility: hidden;
  transition-delay: var(--menu-out);
}

/* 没有 JS 时 details 直接收起，幕布也直接消失：推迟淡出的话，幕布还会挡住点击 560ms。
   有 JS 时收起途中有 .shut，收完才同时去掉 open 和 .shut，这时幕布已经隐藏 */
.menu:not([open], .shut)::after {
  transition: none;
}

/* 链接的序号（从 0 起），用来错开动画。导航只有 2 个链接（PAGES 里 nav: true 的页面），增加时按序号补规则 */
.panel li:nth-child(2) {
  --i: 1;
}

/* 链接每行 44px，起始侧留出竖线的位置。当前项：600 字重和 1px 竖线，不只靠颜色。
   两侧用外边距和面板边缘隔开 --nav-pad，焦点环才不会伸出面板（面板的 clip-path 会裁掉伸出的部分）。
   展开时从上方 --s-1 处下移并淡入，第 1 项推迟 --menu-in，之后每项多推迟 --menu-stagger（同 Apple） */
.panel a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  margin-inline: var(--nav-pad);
  padding-inline-start: var(--s-4);
  border-inline-start: 1px solid transparent;
  color: var(--nav-text);
  transition-property: opacity, translate;
  transition-duration: var(--dur);
  transition-timing-function: var(--ease);
  transition-delay: calc(var(--menu-in) + var(--i, 0) * var(--menu-stagger));
}

/* 收起时立刻淡出，越靠前的越慢：第 1 项 --dur 加 4 个 --menu-stagger（400ms），之后每项少 1 个（同 Apple） */
.menu:is(.shut, :not([open])) .panel a {
  opacity: 0;
  translate: 0 calc(-1 * var(--s-1));
  transition-duration: calc(var(--dur) + (4 - var(--i, 0)) * var(--menu-stagger));
  transition-delay: 0s;
}

.panel a[aria-current] {
  font-weight: var(--fw-semibold);
  color: var(--fg);
  border-color: var(--fg);
}

@media (width >= 735px) {
  .nav {
    display: block;
    margin-inline-end: var(--s-2);
  }

  .menu {
    display: none;
  }
}

/* 主按钮：Apple 的 elevated 胶囊，高 44px（1 行文字时由最小高度撑开，换行时由内边距撑开）。
   没有过渡，悬停时直接换色（同 Apple） */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: var(--s-2) 21px;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  text-align: center;
  color: var(--on-accent);
  background: var(--accent);
}

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

/* 导航里的小胶囊：内边距 3px 10px 加 1px 透明边框，视觉高 24px（同 Apple）。点击区见上方的伪元素规则 */
.cta.small {
  position: relative;
  min-height: 0;
  padding: 3px 10px;
  white-space: nowrap;
}

/* 没有 App Store 链接时，下载页的按钮禁用。不用 Apple 的 0.42 透明度：白字只剩 1.85。浅蓝底、蓝字 4.86 */
.cta[aria-disabled] {
  color: var(--link);
  background: var(--accent-soft);
  cursor: not-allowed;
}

/* 按钮组：主按钮在前，文字链接在后。放不下时换行，居中 */
.ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 var(--s-6);
}

/* 带 › 箭头的文字链接，例如"查看全部功能 ›"。箭头在文字的 span 里，换行时跟着最后一个词；箭头有方向含义，RTL 下翻转。
   inline-flex 撑开 44px 的点击高度。长复合词在窄屏要能断行：inline-flex 按内容算宽度，先限制不超过行宽；
   文字是 flex 子元素，最小宽度设为 0，overflow-wrap 兜底才生效 */
.more {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: var(--tap);
  color: var(--link);
}

main p a.more {
  text-decoration: none;
}

.more > span {
  min-width: 0;
}

/* 箭头和文字一样大小随字号变化，底边略低于基线，视觉上和小写字母居中 */
.more svg {
  width: 0.7em;
  height: 0.7em;
  margin-inline-start: 0.24em;
  vertical-align: -0.05em;
}

.more:dir(rtl) svg {
  scale: -1 1;
}

/* 语言对话框：S 档为底部抽屉，M、L 档居中。网格列数 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: 0;
  border-radius: var(--r-card) var(--r-card) 0 0;
  box-shadow: 0 12px 48px 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-4);
  padding-inline: var(--s-6) var(--s-4);
}

/* 关闭按钮：36px 圆形底（同 Apple 的圆形按钮），点击区是 .btn 的 44px */
.close {
  position: relative;
}

.close::before {
  content: "";
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--fill);
}

.close svg {
  position: relative;
}

/* 滚动容器（语言列表）：滚动到底时不带动页面。自身不加内边距：容器的自绘滚动条放在内容区里，
   有内边距时滚动条不贴边，sticky 的起点也会下移 */
.vs {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sheet ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-1);
  padding: 0 var(--s-4) var(--s-6);
}

/* overflow-wrap: anywhere：单个长单词（Lëtzebuergesch）在 320 宽时比可用宽度长，允许它断开，不压住对勾 */
.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);
  overflow-wrap: anywhere;
}

.sheet a[aria-current] {
  font-weight: var(--fw-semibold);
}

@media (width >= 735px) {
  .langs {
    width: min(720px, 100% - 2 * var(--nav-pad));
    max-height: min(80dvh, 640px);
    margin: auto;
    border-radius: var(--r-card);
  }

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

  /* 对话框有圆角，列表的底边就是对话框的底边：轨道下端让出圆角，滑块拖到底时不被圆角裁掉 */
  .langs .sb-rail {
    inset-block-end: var(--r-card);
  }
}

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

/* 区块：只有下内边距，相邻白色区块的距离等于上一个区块的下内边距（Apple 产品页的写法）。
   灰色区块上下都有内边距；灰色区块后面的白色区块也要补上内边距 */
.sec {
  padding-block: 0 var(--section);
}

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

.sec.alt + .sec:not(.alt) {
  padding-block-start: var(--section);
}

/* 段标题色：区块上的类决定段标题和淡彩卡的颜色（DESIGN.md 第 3 节） */
.c-blue {
  --hl: var(--hl-blue);
  --tint: var(--tint-blue);
}

.c-purple {
  --hl: var(--hl-purple);
  --tint: var(--tint-purple);
}

.c-pink {
  --hl: var(--hl-pink);
  --tint: var(--tint-pink);
}

/* 首屏：居中。首页的首屏见 home.css；内容页的首屏（.page）只有标题和描述 */
.hero {
  padding-block: var(--gap-head) var(--section);
  text-align: center;
}

/* 内容页的首屏：上内边距 --gap-media。后面接灰色区块时，下内边距也是 --gap-media：
   灰色区块自己有 --section 的上内边距，两者相加空白太大。后面接白色区块时，下内边距是 --section（同其他区块） */
.hero.page {
  padding-block-start: var(--gap-media);
}

.hero.page:has(+ .sec.alt) {
  padding-block-end: var(--gap-media);
}

.hero .lead {
  max-width: var(--lead-w);
  margin: var(--lead-gap) auto 0;
}

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

/* 段标题（Apple 的 section-header）：黑色、起始侧对齐。
   S 档单列：标题、引导段、结束侧链接依次排列（模板也是这个顺序）。单列网格显式写 minmax(0, 1fr)：默认的 auto 列按内容的最小宽度撑开，
   德语长单词（Systemanforderungen）会撑出横向滚动，overflow-wrap 兜底也不生效。
   M、L 档：标题和结束侧链接在同一行，链接和标题底部对齐；放不下时链接换到标题下方。引导段总在新的一行 */
.head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-block-end: var(--gap-head);
}

.head .lead {
  margin-block-start: var(--lead-gap);
}

/* 居中的引导段（首屏、段标题组）各行长度平衡：pretty 不处理末行只剩 2 个字（例如"安装 / 步骤。"） */
:is(.hero, .lockup) .lead {
  text-wrap: balance;
}

/* 结束侧链接：S 档用 small 字号（Apple 实测 14px），M、L 档用 body */
.head .more {
  justify-self: start;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-small);
}

@media (width >= 735px) {
  .head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    column-gap: var(--s-6);
  }

  /* 标题最宽为整个段标题的 75%（Apple 实测）。不用网格：网格的 auto 列先按链接撑开，长译文的标题会被挤成 3、4 行 */
  .head h2 {
    max-width: 75%;
  }

  .head .more {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
  }

  /* 引导段总在新的一行：伪元素占满 1 整行，排在标题和链接之后（模板里引导段在链接前面，靠 order 排到后面） */
  .head::after {
    content: "";
    flex-basis: 100%;
    order: 1;
  }

  .head .lead {
    order: 2;
    max-width: var(--lead-w);
  }
}

/* 段标题组（Apple 的产品段标题）：彩色大标题 + 灰色引导段。M、L 居中，S 起始侧对齐 */
.lockup {
  margin-block-end: var(--gap-media);
}

.lockup h2 {
  color: var(--hl);
}

.lockup .lead {
  max-width: var(--lead-w);
  margin-block-start: var(--lead-gap);
}

@media (width >= 735px) {
  .lockup {
    text-align: center;
  }

  .lockup .lead {
    margin-inline: auto;
  }
}

/* 媒体卡：放示意图，28px 圆角，用区块的淡彩色，没有时用 --bg-alt。不加边框和阴影。
   示意图居中，最宽 640px：像 Apple 的产品图一样四周留出大片底色，不撑满 1260px 的卡片 */
.media-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: var(--gap-head);
  border-radius: var(--r-card);
  background: var(--tint, var(--bg-alt));
}

.media-card > .window {
  max-width: 640px;
}

/* 应用图标的白色底板：内边距是图标尺寸的 14%，圆角 22.5%（macOS 图标的比例）。
   尺寸由使用处设 --icon。不用百分比内边距：它按容器宽度计算，不按图标宽度 */
.app-icon {
  display: block;
  width: var(--icon);
  height: auto;
  margin-inline: auto;
  padding: calc(var(--icon) * 0.14);
  border-radius: calc(var(--icon) * 0.225);
  background: var(--card);
  box-shadow:
    0 0 0 1px var(--shadow-color),
    0 8px 24px var(--shadow-color);
}

/* 功能卡片（Apple 的图标卡）：灰色区块里的白卡，不能点击。S 1 列；M 2 列，卡片数为奇数时第 1 张跨 2 列；L 3 列 */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
}

.grid li {
  padding: var(--pad);
  border-radius: var(--r-card);
  background: var(--card);
}

/* 图标是块：行内的 svg 落在基线上，下面多出行框的空隙，间距会随语言变化 */
.grid svg {
  display: block;
  margin-block-end: var(--s-4);
}

.grid h3 {
  margin-block-end: var(--s-3);
}

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

  .grid.odd > :first-child {
    grid-column: 1 / -1;
  }
}

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

  .grid.odd > :first-child {
    grid-column: auto;
  }
}

/* 媒体卡 + 下方说明的并排列表，例如下载页的芯片说明。S 上下排列，M、L 并排 */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-head) var(--gap);
}

.duo h3 {
  margin-block: var(--s-6) var(--s-2);
}

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

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

/* 分段控件（Apple 的 tabnav）：没有 JS、S 档、或者标签放不下时，各项依次排列：媒体卡、h3、说明。
   M、L 档有 JS 时（page.js 加 .on 和控件）：所有项叠在同一格里，每项用 subgrid 共用 3 行：媒体、控件、说明。
   高度取最高的一项，切换时页面不跳。只在屏幕上生效：打印时依次排列，全部印出来 */
.tabs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-media);
}

.tab-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
}

.tab-text h3 {
  margin-block-end: var(--s-2);
}

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

@media (width >= 735px) {
  .tab-text {
    max-width: 736px;
    margin-inline: auto;
    text-align: center;
  }
}

@media screen and (width >= 735px) {
  .tabs.on {
    grid-template-rows: auto auto auto;
    row-gap: var(--s-7);
  }

  .tabs.on .tab-item {
    grid-area: 1 / 1 / 4 / 2;
    grid-template-rows: subgrid;
    row-gap: var(--s-7);
    /* 旧项先用 --dur-fast 淡出，新项等它淡出后再用 --dur 淡入（见 .now）：两项同时半透明叠在一起，画面会糊 */
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--dur-fast) var(--ease),
      visibility var(--dur-fast);
  }

  .tabs.on .tab-item.now {
    opacity: 1;
    visibility: visible;
    transition:
      opacity var(--dur) var(--ease-out) var(--dur-fast),
      visibility 0s var(--dur-fast);
  }

  .tabs.on .media-card {
    grid-row: 1;
  }

  /* 说明贴住文字，不拉伸到最高一项的高度：焦点环四周等距。行高仍取最高的一项，切换时页面不跳 */
  .tabs.on .tab-text {
    grid-row: 3;
    align-self: start;
  }

  /* 面板（tabpanel）能用 Tab 聚焦。焦点环只画在说明上：整项的盒子跨 3 行，框住媒体卡和控件，圆角也和卡片对不上。
     读屏读的正是说明 */
  .tabs.on .tab-item:focus-visible {
    outline: none;
  }

  .tabs.on .tab-item:focus-visible > .tab-text {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--r-sm);
  }

  /* 控件排在第 2 行，盖在当前项的空白行上面：当前项的盒子跨 3 行，会挡住控件的点击 */
  .tabs.on .tablist {
    position: relative;
    z-index: 1;
    grid-area: 2 / 1;
    justify-self: center;
  }
}

/* 控件：底板 --fill，内边距 4px；标签高 36px，点击区扩到 44px。当前项是深色胶囊、白字，不只靠颜色 */
.tablist {
  display: flex;
  max-width: 100%;
  padding: var(--s-1);
  border-radius: var(--r-full);
  background: var(--fill);
}

.tablist button {
  position: relative;
  min-height: 36px;
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--r-full);
  white-space: nowrap;
  color: var(--nav-text);
  background: none;
  cursor: pointer;
  transition:
    color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}

.tablist [aria-selected="true"] {
  color: var(--on-accent);
  background: var(--fg);
}

/* 示意图：窗口外框 + 调用方画的内容。窗口是"放在表面上的产品图"，加 1 层柔和阴影 */
.window {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 24px var(--shadow-color));
}

/* 规格表（Apple 的技术规格）：每项上方 1px 细线，最后一项下方也有。M、L 术语占 1/3，说明占 2/3 */
.reqs > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2) var(--gap);
  padding-block: var(--s-6);
  border-block-start: 1px solid var(--line);
}

.reqs > div:last-child {
  border-block-end: 1px solid var(--line);
}

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

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

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

/* 步骤：3 列，不用卡片。序号用计数器画，section 级 */
.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-head) var(--s-7);
  counter-reset: step;
}

.steps > li {
  counter-increment: step;
}

.steps > li::before {
  content: counter(step);
  display: block;
  margin-block-end: var(--s-4);
}

.steps h3 {
  margin-block-end: var(--s-2);
}

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

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

/* FAQ：details 折叠。每条上方 1px 细线，最后一条下方也有 */
.faq details {
  border-block-start: 1px solid var(--line);
}

.faq details:last-child {
  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 svg {
  color: var(--muted);
  transition: rotate var(--dur) var(--ease);
}

.faq details[open] summary svg {
  rotate: 180deg;
}

/* 高度过渡：只有支持 interpolate-size 的浏览器生效（Chrome 129+），其他浏览器瞬间展开 */
@supports (interpolate-size: allow-keywords) {
  .faq details {
    interpolate-size: allow-keywords;
  }

  .faq details::details-content {
    block-size: 0;
    overflow: clip;
    transition:
      block-size var(--dur) var(--ease),
      content-visibility var(--dur) allow-discrete;
  }

  .faq details[open]::details-content {
    block-size: auto;
  }
}

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

/* CTA：灰色区块，居中。应用图标 → h2 → 主按钮 */
.band {
  padding-block: var(--section);
  text-align: center;
  background: var(--bg-alt);
}

.band .app-icon {
  --icon: 56px;
}

.band h2 {
  margin-block: var(--s-6) var(--s-7);
}

@media (width >= 735px) {
  .band .app-icon {
    --icon: 64px;
  }
}

@media (width >= 1069px) {
  .band .app-icon {
    --icon: 80px;
  }
}

/* 页脚：精简版的 Apple 页脚。商标声明作脚注，下方 1px 细线；最后一行是版权、页面链接和语言入口 */
.foot {
  color: var(--foot-text);
  background: var(--bg-alt);
}

.foot-in {
  max-width: calc(980px + 2 * var(--nav-pad));
  margin-inline: auto;
  padding: var(--s-4) var(--nav-pad) var(--s-6);
}

.foot-note {
  padding-block-end: var(--s-3);
  border-block-end: 1px solid var(--line);
}

/* S 档上下排列；M、L 档版权和链接在起始侧，语言入口在结束侧 */
.foot-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-block-start: var(--s-2);
}

/* 链接之间是 1×10px 的竖线（同 Apple）。链接两侧各留 8px，列表向外偏移同样的距离，第 1 个链接的文字和版权对齐。
   竖线画在前一项的后面：换行时留在上一行末尾，不出现在下一行开头（同 Apple） */
.foot ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-inline: calc(-1 * var(--s-2));
}

.foot li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 10px;
  vertical-align: middle;
  background: var(--foot-sep);
}

/* 点击区不小于 44×44：2 个字的链接（例如"功能"）只有约 24px 宽，用最小宽度撑开 */
.foot a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-width: var(--tap);
  min-height: var(--tap);
  color: var(--foot-link);
}

.foot li a {
  padding-inline: var(--s-2);
}

@media (width >= 735px) {
  .foot-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--s-7);
  }

  .foot-row .lang {
    margin-inline-start: auto;
  }
}

/* 根页（选择语言）和 404：居中的图标、标题。根页的语言链接 2 / 3 / 4 列 */
.root {
  padding-block: var(--gap-media) var(--section);
  text-align: center;
}

.root > img {
  display: block;
  margin: 0 auto var(--s-6);
}

.root .lead {
  margin-block: var(--lead-gap) var(--s-6);
}

.root ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--gap);
  margin-block-start: var(--gap-head);
  text-align: start;
}

.root ul a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--link);
}

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

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

/* hover 只给能悬停的设备，避免触屏上粘住 */
@media (hover: hover) {
  .btn:hover,
  .nav a:hover,
  .panel a:hover,
  .tablist button:not([aria-selected="true"]):hover {
    color: var(--fg);
  }

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

  .more:hover > span,
  .root ul a:hover,
  .foot a:hover {
    text-decoration: underline;
  }

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

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

/* 动效：只在没有开启"减少动效"时生效。只动 transform 和 opacity，不改变布局 */
@media (prefers-reduced-motion: no-preference) {
  /* 首屏的文字和按钮不加动效：Apple 首屏的按钮晚 2.5 秒才出现，照搬会推迟下载入口。只有主图上移淡入 */
  .hero figure {
    animation: rise-in var(--dur-reveal) var(--ease-out) both;
  }

  /* 滚动显现：进入视口时上移淡入（Apple 上移 30px）。不支持滚动驱动动画的浏览器（Firefox）直接显示。
     animation-timeline 必须写在 animation 简写之后，否则被简写重置 */
  @supports (animation-timeline: view()) {
    /* 进入 60% 时完全显示，最多滚动 200px：高的元素不会长时间半透明。
       锚点目标（:target）不做显现：浏览器按动画起点定位锚点，动画结束后目标上移，被吸顶的导航挡住一部分。
       分段控件有控件时（.on）整组显现，不给单项加：动画的 opacity 会盖过切换时的淡入淡出。
       用 :where 让列表的优先级为 0：下面按列错开的规则、首页系统标签的规则只写 animation-range，必须能覆盖它 */
    :where(.head, .lockup, .grid > li, .duo > li, .tabs:not(.on) > .tab-item, .tabs.on, .steps > li, .reqs > div, .faq details, .rv):not(:target) {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry min(60%, 200px);
    }

    /* 同一行的卡片同时进入视口，按列错开，看起来依次出现 */
    :is(.grid, .steps, .duo) > li:nth-child(3n + 2) {
      animation-range: entry min(10%, 30px) entry min(70%, 230px);
    }

    :is(.grid, .steps) > li:nth-child(3n) {
      animation-range: entry min(20%, 60px) entry min(80%, 260px);
    }
  }
}

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

/* 加载指示：macOS 的 12 辐条菊花。第 n 根旋转 n × 30°，顺时针越往后越亮（0.15 到 1）；整体按 12 步顺时针旋转，
   最亮的辐条在前，变淡的辐条拖在后面。辐条由 +spinner 输出，style 里写序号 --n。
   只用在换页时的视口正中（.wait），辐条的包含块是 .wait 的 position: fixed */
.spinner {
  width: 32px;
  height: 32px;
  color: var(--foot-text);
}

.spinner i {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 46%;
  width: 8%;
  height: 27%;
  border-radius: var(--r-full);
  background: currentcolor;
  transform-origin: 50% 185%;
  rotate: calc(var(--n) * 30deg);
  opacity: calc(0.15 + 0.85 * var(--n) / 11);
}

@media (prefers-reduced-motion: no-preference) {
  .spinner {
    animation: spin 1s steps(12) infinite;
  }
}

@keyframes spin {
  to {
    rotate: 1turn;
  }
}

/* 自绘滚动条（page.js 加 .sb）：有 JS 的鼠标设备上隐藏原生滚动条，macOS 和 Windows 显示一致。
   .js 由 page.js 在 head 里同步加上，第一次绘制前就隐藏：等脚本运行后再隐藏，Windows 上内容会突然变宽 15px。
   滚动仍是原生的。触屏设备和没有 JS 时用原生滚动条 */
@media (pointer: fine) {
  .js,
  .js .vs {
    scrollbar-width: none;
  }

  /* Safari 18.2 以前不支持 scrollbar-width */
  .js::-webkit-scrollbar,
  .js .vs::-webkit-scrollbar {
    display: none;
  }
}

/* 共用：可操作宽度和显隐。位置见下面 2 条，都在行内结束侧，RTL 下在左边。
   clip：滑块不能伸出滚动条。容器的滚动条在容器的内容里，伸出的滑块会撑大容器的 scrollHeight，
   不能滚动的容器被当成能滚动。clip 不产生滚动容器，sticky 不受影响 */
/* touch-action: none：触屏笔记本用触控板时也是 pointer: fine，手指按在滚动条上拖动，
   浏览器不接管成平移，拖动不会被 pointercancel 打断 */
.sb {
  overflow: clip;
  width: var(--sb);
  opacity: 0;
  cursor: var(--cur-scroll);
  touch-action: none;
  transition: opacity var(--dur) var(--ease);
}

/* 容器里的滚动条：sticky 停在可视区域顶部，高度等于可视高度（--sb-view，page.js 测量），
   负外边距抵消高度，不占内容空间 */
.vs > .sb {
  position: sticky;
  z-index: 1;
  inset-block-start: 0;
  height: var(--sb-view);
  margin-block-end: calc(-1 * var(--sb-view));
  margin-inline-start: auto;
}

/* 页面的滚动条固定在视口边上，盖在导航（2）上面、换页时的加载指示（4）下面 */
body > .sb {
  position: fixed;
  z-index: 3;
  inset-block: 0;
  inset-inline-end: 0;
}

/* 滚动、拖动时显示（.on、.drag），停止 1 秒后淡出 */
.sb.on,
.sb.drag {
  opacity: 1;
}

/* 滑块移动的范围：上下各留 --s-1。悬停时的轨道底色画在这里 */
.sb-rail {
  position: absolute;
  inset-block: var(--s-1);
  inset-inline: 0;
  border-radius: var(--r-full);
}

/* 滑块位置和长度由 page.js 设置（translate、height），水平居中 */
.sb-thumb {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  width: var(--sb-thumb);
  min-height: var(--sb-min);
  margin-inline: auto;
  background: var(--sb-fill);
  border: 1px solid var(--sb-edge);
  border-radius: var(--r-full);
}

.sb.drag .sb-thumb {
  width: var(--sb-thumb-hover);
}

/* 拖动时整页显示抓手：指针会离开 12px 宽的滚动条。设到每个元素上：链接、按钮自己的 cursor 优先于继承值。
   important：压过各组件的 cursor，不用逐个比优先级 */
:root:has(.sb.drag) * {
  cursor: var(--cur-grab) !important;
}

@media (hover: hover) {
  .sb:hover {
    opacity: 1;
  }

  .sb:hover .sb-rail {
    background: var(--sb-track);
  }

  .sb:hover .sb-thumb {
    width: var(--sb-thumb-hover);
  }
}

/* 换页反馈：page.js 在点击站内链接后给 html 加 .loading。正文和页脚变淡、不能点击，视口正中显示加载指示。
   导航不变淡，可以改点其他页面 */
.wait {
  position: fixed;
  z-index: 4;
  inset: 0;
  display: none;
  margin: auto;
}

.loading .wait {
  display: block;
}

.loading :is(main, .foot) {
  opacity: 0.4;
  pointer-events: none;
}

/* 换页过渡：旧页面和新页面交叉淡入淡出，纯 CSS。前后两页都要声明。不支持的浏览器直接切换 */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-group(*) {
    animation-duration: var(--dur);
  }
}

/* 强制颜色模式：分段控件的当前项只靠背景色区分，会消失，加外框 */
@media (forced-colors: active) {
  .tablist [aria-selected="true"] {
    outline: 2px solid CanvasText;
  }

  /* 高对比度模式会把背景色换成系统色，滑块看不见，改用系统的文字色和背景色 */
  .sb-thumb {
    forced-color-adjust: none;
    background: CanvasText;
    border-color: Canvas;
  }
}

/* 打印时关闭动画：滚动显现的元素会停在透明状态。加载指示、分段控件和滚动条不印，正文不变淡 */
@media print {
  .loading .wait,
  .tablist,
  .sb {
    display: none;
  }

  .loading :is(main, .foot) {
    opacity: 1;
  }

  *,
  ::before,
  ::after {
    animation: none !important;
  }
}

/* 示意图的类：窗口外框、内容的填充色和半透明叠层。规范见 DESIGN.md 第 9 节"示意图"。
   构建时拼在 style.css 后面，供内联的示意图使用；同时把 var(--x) 换成值，写进每张示意图文件的 style 元素。
   所以这里用到的 token 在全部样式里只能定义 1 次，值必须是字面值，见 spec/static-cdn.md 第 6.2 节 */

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

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

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

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

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

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

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

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

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

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

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

.a-blue {
  fill: var(--ill-blue);
}

.a-purple {
  fill: var(--ill-purple);
}

.a-pink {
  fill: var(--ill-pink);
}

.a-orange {
  fill: var(--ill-orange);
}

.a-green {
  fill: var(--ill-green);
}

/* 半透明叠层，代替 SVG 渐变：例如壁纸的波浪 */
.o-1 {
  fill-opacity: 0.2;
}

.o-2 {
  fill-opacity: 0.35;
}

.o-3 {
  fill-opacity: 0.5;
}

/* 首页专用样式。所有选择器以 .p-home 开头，构建时拼在 style.css 后面。布局说明见 DESIGN.md 第 13 节"首页" */

/* 首屏：小标题到 h1 8px，h1 到屏幕 40px，屏幕到描述 --gap-head，按钮组到系统要求 16px */
.p-home .eyebrow {
  margin-block-end: var(--s-2);
}

/* 描述紧跟屏幕，间距只取屏幕的下外边距 --gap-head，不再叠加引导段的上外边距 */
.p-home .hero .lead {
  margin-block-start: 0;
}

.p-home .hero .note {
  margin-block-start: var(--s-4);
  color: var(--muted);
}

/* 屏幕主图：深色边框、18px 圆角，上边框中间有摄像头点。不画支架、下巴和标志。
   边框厚 --bz：约为屏幕宽度的 2.5%（S 8px、M 17px、L 24px）。不用百分比：它按容器宽度计算，不按屏幕宽度。
   最宽 L 972px、M 685px、S 100%（同 Apple 首屏视频）。浮动窗口相对屏幕定位 */
.p-home .screen {
  --bz: 8px;
  position: relative;
  margin: var(--s-8) auto var(--gap-head);
  padding: var(--bz);
  border-radius: var(--r-md);
  background: var(--bezel);
}

/* 摄像头点：直径是边框厚度的 1/3，在上边框的正中 */
.p-home .screen::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--bz) / 3);
  inset-inline-start: calc(50% - var(--bz) / 6);
  width: calc(var(--bz) / 3);
  aspect-ratio: 1;
  border-radius: var(--r-full);
  background: var(--muted);
}

/* 桌面本身是屏幕，不加窗口阴影；浮动窗口保留阴影 */
.p-home .screen > .window {
  filter: none;
}

/* 浮动窗口：S 档屏幕只有约 340px 宽，浮动窗口会挡住客户机窗口，隐藏 */
.p-home .float {
  display: none;
}

@media (width >= 735px) {
  .p-home .screen {
    --bz: 17px;
    max-width: 685px;
  }

  /* 2 个浮动窗口叠在桌面两侧的壁纸上：终端在起始侧靠下，macOS 桌面在结束侧靠上，避开右上角的文件夹 */
  .p-home .float {
    position: absolute;
    z-index: 1;
    display: block;
    width: 18%;
  }

  .p-home .f-term {
    inset-block-end: 14%;
    inset-inline-start: 4%;
  }

  .p-home .f-mac {
    inset-block-start: 30%;
    inset-inline-end: 4%;
  }
}

@media (width >= 1069px) {
  .p-home .screen {
    --bz: 24px;
    max-width: 972px;
  }
}

/* 能做什么：3 张 --bg-alt 卡片。S 1 列；M 第 1 张占满 1 行、文字和图左右并排，另外 2 张并排；
   L 2 列，第 1 张在起始侧占 2 行，另外 2 张在结束侧上下叠放 */
.p-home .bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
}

/* 下内边距为 0：示意图贴着底边，窗口的下半部分画在 viewBox 外面，看起来从底边出血 */
.p-home .bento > li {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--pad) var(--pad) 0;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--bg-alt);
  transition: scale var(--dur) var(--ease-out);
}

.p-home .bento h3 {
  margin-block-end: var(--s-2);
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}

/* 标题链接用 +more：文字是标题色，只有 › 箭头是链接色 */
.p-home .bento h3 .more {
  min-height: 0;
  color: var(--fg);
}

.p-home .bento h3 .more svg {
  color: var(--link);
}

/* 整卡可以点击：标题链接的伪元素铺满整卡。z-index：示意图有阴影，会形成层叠上下文，盖住伪元素 */
.p-home .bento h3 a::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
}

/* 键盘聚焦时整卡显示焦点环，标题自己不显示 */
.p-home .bento h3 a:focus-visible {
  outline: none;
}

.p-home .bento > li:has(a:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

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

/* 示意图贴底：文字少的卡片，空白留在文字和图之间 */
.p-home .bento figure {
  margin-block-start: auto;
  padding-block-start: var(--s-6);
}

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

  /* M：第 1 张占满 1 行，文字和图左右并排，图贴底。图是竖长的，上下排列时卡片会高过 700px */
  .p-home .bento > li:first-child {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: var(--s-6);
  }

  .p-home .bento > li:first-child > * {
    flex: 1;
  }

  .p-home .bento > li:first-child > div {
    align-self: center;
    padding-block-end: var(--pad);
  }
}

@media (width >= 1069px) {
  .p-home .bento > li:first-child {
    grid-column: auto;
    grid-row: span 2;
    flex-direction: column;
  }

  .p-home .bento > li:first-child > * {
    flex: none;
  }

  .p-home .bento > li:first-child > div {
    align-self: auto;
    padding-block-end: 0;
  }
}

/* 悬停时整卡放大到 1.0161（同 Apple 的卡片），只在鼠标设备上 */
@media (hover: hover) and (pointer: fine) {
  .p-home .bento > li:hover {
    scale: 1.0161;
  }
}

/* 可以安装的系统：7 个不可交互的胶囊，跟随段标题组对齐（S 起始侧，M、L 居中）。
   标签是行内块，列表用 text-wrap: balance 平衡各行长度；flex 是贪心排列，最后 1 行会只剩 1 个。
   胶囊四周各留 6px，列表向外偏移同样的距离：胶囊和标题起始侧对齐，引导段到第 1 行胶囊仍是 --gap-media */
.p-home .os {
  margin: calc(-1 * var(--s-3) / 2);
  text-wrap: balance;
}

.p-home .os li {
  display: inline-block;
  margin: calc(var(--s-3) / 2);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-full);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  background: var(--bg-alt);
}

/* 共享、快照和自动化：分段控件下方的"查看全部功能 ›"跟随段标题组对齐 */
.p-home .all {
  margin-block-start: var(--s-6);
}

@media (width >= 735px) {
  .p-home :is(.os, .all) {
    text-align: center;
  }
}

/* 能做什么的卡片：同一行的卡片按列错开（同 style.css 的网格第 2 列）。M 档第 3 张和第 2 张在同一行；
   L 档第 2、3 张在结束侧那一列，和占 2 行的第 1 张并排 */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @media (width >= 735px) and (width < 1069px) {
      .p-home .bento > li:nth-child(3) {
        animation-range: entry min(10%, 30px) entry min(70%, 230px);
      }
    }

    @media (width >= 1069px) {
      .p-home .bento > li:nth-child(n + 2) {
        animation-range: entry min(10%, 30px) entry min(70%, 230px);
      }
    }
  }
}

/* 系统标签依次显现：第 i 个标签的显现范围推后 i × 20%（标签高约 50px，相当于晚约 10px 的滚动距离） */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .p-home .os .rv {
      animation-range: entry calc(var(--i) * 20%) entry calc(100% + var(--i) * 20%);
    }
  }
}

/* 功能页。所有选择器以 .p-features 开头，构建时拼在 style.css 后面 */

/* 进度条进入视口时从起点伸长，只动 transform。示意图不随 RTL 镜像，起点固定在 SVG 的左端 */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .p-features .grow {
      transform-box: fill-box;
      transform-origin: 0 50%;
      animation: features-grow linear both;
      animation-timeline: view();
      animation-range: entry 40% cover 50%;
    }
  }
}

/* 关键帧名是全局的，加页面前缀，避免和其他页面重名 */
@keyframes features-grow {
  from {
    scale: 0 1;
  }
}

/* 下载页。所有选择器以 .p-download 开头，构建时拼在 style.css 后面。规范见 DESIGN.md 第 13 节"下载页" */

/* 首屏的应用图标：S 64px、M 80px、L 96px，下方 24px */
.p-download .hero .app-icon {
  --icon: 64px;
  margin-block-end: var(--s-6);
}

@media (width >= 735px) {
  .p-download .hero .app-icon {
    --icon: 80px;
  }
}

@media (width >= 1069px) {
  .p-download .hero .app-icon {
    --icon: 96px;
  }
}

/* 还有疑问：1 行 intro 级文字和链接，居中 */
.p-download .ask {
  text-align: center;
}

/* 常见问题页。所有选择器以 .p-faq 开头，构建时拼在 style.css 后面。规范见 DESIGN.md 第 9 节"页内导航"、第 13 节 */

/* 页内导航：S 档是问答上方的一排胶囊，换行排列，不吸顶 */
.p-faq .toc {
  margin-block-end: var(--gap-head);
}

.p-faq .toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* 上下内边距让 1 行的项正好 44px 高（1lh 是 1 行的高度）；换行的项上下也留出同样的空白，不和下一项贴在一起 */
.p-faq .toc a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: calc((var(--tap) - 1lh) / 2) var(--s-4);
  border-radius: var(--r-full);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-small);
  color: var(--nav-text);
  background: var(--bg-alt);
}

/* 当前分组：S 档深色底、白字，不只靠颜色区分 */
.p-faq .toc a[aria-current] {
  color: var(--on-accent);
  background: var(--fg);
}

/* 分组标题：sub 级，起始侧对齐 */
.p-faq .group h2 {
  margin-block-end: var(--s-6);
  font-size: var(--fs-sub);
  line-height: var(--lh-sub);
  letter-spacing: var(--ls-sub);
}

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

/* M、L 两栏 1 : 3：起始侧是竖排的分组导航，每行 44px；当前项 600 字重和起始侧 1px 竖线 */
@media (width >= 735px) {
  .p-faq .cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    align-items: start;
    gap: var(--gap-media);
  }

  .p-faq .toc {
    margin: 0;
  }

  .p-faq .toc ul {
    display: block;
  }

  .p-faq .toc a {
    padding-inline-end: 0;
    border-inline-start: 1px solid transparent;
    border-radius: 0;
    color: var(--muted);
    background: none;
  }

  .p-faq .toc a[aria-current] {
    font-weight: var(--fw-semibold);
    color: var(--fg);
    background: none;
    border-color: var(--fg);
  }
}

/* 吸顶条件和导航一致：视口高度 ≥ 500px。位置在导航下方，再留 --s-7 */
@media (width >= 735px) and (height >= 500px) {
  .p-faq .toc {
    position: sticky;
    inset-block-start: calc(var(--bar) + var(--s-7));
  }
}

@media (hover: hover) {
  .p-faq .toc a:not([aria-current]):hover {
    color: var(--fg);
  }
}

/* 隐私页（占位页）。所有选择器以 .p-privacy 开头，构建时拼在 style.css 后面。白底，起始侧对齐 */
.p-privacy .sec {
  padding-block-start: var(--gap-media);
}

.p-privacy h1 {
  margin-block-end: var(--s-6);
  font-size: var(--fs-section);
  line-height: var(--lh-section);
  letter-spacing: var(--ls-section);
}

.p-privacy p {
  max-width: 692px;
}