/*
 * 纯粹翻译 / Crosslate — 站点样式
 *
 * 全部取值来自 web/DESIGN.md 的 token 表。三处刻意的偏离，各有理由：
 *
 * 1. 中文正文不用负字距、行距放宽到 1.76。DESIGN.md 的 body（1.47 /
 *    -0.374px）提取自 Apple 的英文页面；负字距会让本已全角紧排的汉字相撞，
 *    1.47 对中文也偏挤。Apple 自己的中文站同样不对中文正文施加负字距。
 *    做法是按 :lang 分流——默认严格照规范（服务英文页），
 *    html[lang^="zh"] 下切换为中文排版。
 *
 * 2. 内容栏 692px，而非规范的 ~980px。980px 是 environment 页那类大字号
 *    编辑排版的宽度；17px 正文配 980px 一行近 110 个西文字符，法律文档
 *    读起来太累。692px 对应中文约 40 字/行。
 *
 * 3. 不加载任何网络字体。规范建议非 Apple 平台用 Inter（Google Fonts），
 *    但从 Google Fonts 取字体会把访客 IP 送给 Google——在一个声明「不收集
 *    任何数据」的页面上引入第三方请求，是实质问题而不只是观感问题。
 *
 * 无深色模式：DESIGN.md 记录的是 light-dominant 变体，Apple 官网本身
 * 也没有深色模式。
 */

:root {
  /* ── 颜色 ───────────────────────────────────────── */
  --primary: #0066cc;
  --primary-focus: #0071e3;
  --primary-on-dark: #2997ff;
  --ink: #1d1d1f;
  --surface-tile-1: #272729;
  --body-muted: #cccccc;
  --ink-muted-80: #333333;
  --ink-muted-48: #7a7a7a;
  --canvas: #ffffff;
  --canvas-parchment: #f5f5f7;
  --hairline: #e0e0e0;
  --surface-black: #000000;
  --on-dark: #ffffff;

  /* ── 间距（8px 制）──────────────────────────────── */
  --sp-xs: 8px;
  --sp-sm: 12px;
  --sp-md: 17px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-xxl: 48px;
  --sp-section: 80px;

  /* ── 圆角 ───────────────────────────────────────── */
  --r-sm: 8px;
  --r-lg: 18px;
  --r-pill: 9999px;

  /* ── 字体 ───────────────────────────────────────── */
  --font-display: "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont,
                  "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-text: "SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont,
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  --measure: 43.25rem; /* 692px */
}

@media (prefers-contrast: more) {
  :root { --ink-muted-48: var(--ink-muted-80); --hairline: currentColor; }
}

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

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-text);
  /* {typography.body} — 17px / 400 / 1.47 / -0.374px */
  font-size: 17px;
  font-weight: 400;
  line-height: 1.47;
  letter-spacing: -0.374px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 中文排版：取消负字距，放宽行距。见文件头注释 1。 */
html[lang^="zh"] body { line-height: 1.76; letter-spacing: 0; }
html[lang^="zh"] h1,
html[lang^="zh"] h2,
html[lang^="zh"] h3,
html[lang^="zh"] .lede { letter-spacing: 0; }

/* ── 全局导航 {component.global-nav} ──────────────── */

.global-nav {
  background: var(--surface-black);
  color: var(--on-dark);
  height: 44px;
}

.global-nav__inner {
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
  padding-left: max(var(--sp-lg), env(safe-area-inset-left));
  padding-right: max(var(--sp-lg), env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
}

/* {typography.nav-link} — 12px / 400 / -0.12px */
.global-nav a {
  color: var(--on-dark);
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.12px;
  text-decoration: none;
  opacity: 0.88;
}
.global-nav a:hover { opacity: 1; }

.global-nav__brand { font-weight: 600; opacity: 1; }

.global-nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}

/* ── 页面主体 ───────────────────────────────────── */

.page {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--sp-section) var(--sp-lg) var(--sp-section);
  padding-left: max(var(--sp-lg), env(safe-area-inset-left));
  padding-right: max(var(--sp-lg), env(safe-area-inset-right));
}

.eyebrow {
  /* {typography.caption-strong} — 非交互元素，故不用 Action Blue */
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.29;
  letter-spacing: -0.224px;
  color: var(--ink-muted-48);
  margin: 0 0 var(--sp-sm);
}

/* {typography.hero-display} — 56px / 600 / 1.07 / -0.28px */
h1 {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.28px;
  margin: 0 0 var(--sp-md);
}

.updated {
  /* {typography.caption} */
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: -0.224px;
  color: var(--ink-muted-48);
  margin: 0 0 var(--sp-xxl);
}

/* {typography.lead-airy} — 24px / 300 / 1.5 */
.lede {
  font-family: var(--font-text);
  font-size: 24px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0;
  margin: 0 0 var(--sp-xxl);
  padding-bottom: var(--sp-xxl);
  border-bottom: 1px solid var(--hairline);
}
html[lang^="zh"] .lede { line-height: 1.62; }

/* ── 章节 ───────────────────────────────────────── */

section { margin-bottom: var(--sp-xxl); }
section:last-of-type { margin-bottom: 0; }

/* {typography.tagline} — 21px / 600 / 1.19 */
h2 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.19;
  letter-spacing: 0.231px;
  margin: 0 0 var(--sp-md);
}

p { margin: 0 0 var(--sp-md); }
p:last-child { margin-bottom: 0; }

ul {
  margin: 0 0 var(--sp-md);
  padding-left: var(--sp-lg);
}
li { margin-bottom: var(--sp-sm); }
li:last-child { margin-bottom: 0; }
li::marker { color: var(--ink-muted-48); }

/* {typography.body-strong} — 17px / 600 */
strong { font-weight: 600; }

/* {component.text-link} — Action Blue 只用于可交互元素 */
a {
  color: var(--primary);
  text-decoration: none;
}
a:hover { text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--primary-focus);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── 卡片 {component.store-utility-card} ─────────── */

.cards {
  display: grid;
  gap: var(--sp-sm);
  margin: var(--sp-lg) 0;
}

.card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-lg);
}

/* {typography.body-strong} */
.card h3 {
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.374px;
  margin: 0 0 var(--sp-xs);
}

.card p {
  margin: 0;
  color: var(--ink-muted-80);
}

/* ── 整幅 tile {component.product-tile-*} ────────── */
/*
 * 规范的招牌节奏：浅色 → 深色 → 帕金色页脚，tile 之间无间隙、不圆角，
 * 换色本身就是分隔线（"the color change IS the divider"）。
 */

.tile {
  padding: var(--sp-section) var(--sp-lg);
  padding-left: max(var(--sp-lg), env(safe-area-inset-left));
  padding-right: max(var(--sp-lg), env(safe-area-inset-right));
  border-radius: 0;
}

.tile--light { background: var(--canvas); color: var(--ink); }

.tile--dark { background: var(--surface-tile-1); color: var(--on-dark); }
.tile--dark a { color: var(--primary-on-dark); }

.tile__inner {
  max-width: var(--measure);
  margin: 0 auto;
}

.tile--hero .tile__inner { text-align: center; }

/*
 * 应用图标。规范里 tile 的内容栈是「名称 → tagline → CTA → product render」，
 * 但那个 render 指的是整幅产品摄影；一个 180px 的图标不是摄影，是身份标识，
 * 放在 tagline 之后会显得零碎。此处按 App Store 自身的层级把它放在标题之前。
 *
 * 圆角是 iOS 超椭圆的近似值。图标本身不透明（hasAlpha: no），白色 tile 上
 * 若不遮罩就没有边界，会糊成一团悬空的图形。
 *
 * 阴影是 {elevation.product-shadow}，全系统唯一的一个，规范限定只用于
 * 「放置在表面上的产品图」——这里正是它唯一该出现的地方。
 */
.hero-icon {
  display: block;
  width: 180px;
  height: 180px;
  margin: 0 auto var(--sp-lg);
  border-radius: 22.37%;
  box-shadow: rgba(0, 0, 0, 0.22) 3px 5px 30px 0;
}

/* {typography.lead} — 28px / 400 / 1.14 */
.hero-tagline {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 0.196px;
  margin: 0 auto var(--sp-xl);
  max-width: 34rem;
}
html[lang^="zh"] .hero-tagline { line-height: 1.5; letter-spacing: 0; }

/* {component.button-primary} — 唯一的行动信号：Action Blue + 全圆角 */
.button-primary {
  display: inline-block;
  background: var(--primary);
  color: #ffffff;
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.374px;
  border-radius: var(--r-pill);
  padding: 11px 22px;
  text-decoration: none;
}
.button-primary:hover { text-decoration: none; }
/* 规范的全系统微交互 */
.button-primary:active { transform: scale(0.95); }
@media (prefers-reduced-motion: reduce) {
  .button-primary:active { transform: none; }
}

/* ── 特性列 ─────────────────────────────────────── */

.features {
  display: grid;
  gap: var(--sp-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.features h3 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.19;
  letter-spacing: 0.231px;
  margin: 0 0 var(--sp-xs);
}

.features p {
  margin: 0;
  color: var(--body-muted);
}

.tile__note {
  margin: var(--sp-xxl) 0 0;
  padding-top: var(--sp-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--body-muted);
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: -0.224px;
}

/* ── 页脚 {component.footer} ─────────────────────── */

.footer {
  background: var(--canvas-parchment);
  color: var(--ink-muted-80);
  padding: 64px var(--sp-lg);
  padding-left: max(var(--sp-lg), env(safe-area-inset-left));
  padding-right: max(var(--sp-lg), env(safe-area-inset-right));
}

.footer__inner {
  max-width: var(--measure);
  margin: 0 auto;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
  margin: 0 0 var(--sp-md);
  padding: 0;
  list-style: none;
}

/* {typography.fine-print} — 12px / 400 / -0.12px */
.footer,
.footer a {
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: -0.12px;
}

.footer__legal {
  margin: 0;
  padding-top: var(--sp-md);
  border-top: 1px solid var(--hairline);
  color: var(--ink-muted-48);
}

/* ── 响应式 ─────────────────────────────────────── */
/* 断点取自 DESIGN.md：1068 / 640 / 419 */

@media (max-width: 1068px) {
  /* {typography.display-lg} */
  h1 { font-size: 40px; line-height: 1.1; letter-spacing: 0; }
}

/* 规范：641–735px 起 tile 纵向内边距由 80px 收到 48px */
@media (max-width: 735px) {
  .tile { padding-top: var(--sp-xxl); padding-bottom: var(--sp-xxl); }
}

@media (max-width: 640px) {
  h1 { font-size: 34px; letter-spacing: -0.374px; }
  .hero-tagline { font-size: 21px; }
  .features { gap: var(--sp-lg); }
  .hero-icon { width: 120px; height: 120px; }
  html[lang^="zh"] h1 { letter-spacing: 0; }
  .page { padding-top: var(--sp-xxl); padding-bottom: var(--sp-xxl); }
  .lede { font-size: 21px; margin-bottom: var(--sp-xl); padding-bottom: var(--sp-xl); }
  section { margin-bottom: var(--sp-xl); }
  .global-nav__inner { gap: var(--sp-sm); }
  .global-nav__links { gap: var(--sp-sm); }
}

@media (max-width: 419px) {
  h1 { font-size: 28px; }
}