/*
 * 采采官网公共样式 · 极光之幕初稿（2026-11-02）
 *
 * 视觉值的来源：doc/设计/02-初版界面规范·极光之幕·2026-10-29.md 与 packages/shared/tokens/index.ts。
 * App 的 tokens 用 rpx（375 设计稿 ×2），官网是普通网页，按 px = rpx ÷ 2 换算。
 * 标「官网专用」的变量 App 里没有，是这次为网页补的，打磨阶段再定。
 *
 * 规则（tools/check.mjs 会查）：
 * 1. 颜色只写在 tokens:start 与 tokens:end 之间，规则里一律 var()。
 * 2. 字号、外边距、内边距、间隙一律 var()（0、auto、env() 除外）。
 * 3. 页面只用这里的公共类，不写行内样式。
 */

/* tokens:start */
:root {
  color-scheme: dark;

  /* ---- 颜色：暖夜（同 App 主题色，拍板 10.34 / 10.35；变量名沿用初稿，--c-mint 现在装的是主色玫瑰） ---- */
  --c-bg: #150b10;
  --c-deep: #24141d;
  --c-surface: rgba(40, 22, 32, 0.66);
  --c-line: rgba(255, 200, 222, 0.14);
  --c-ink: #fbf1f4;
  --c-ink-2: #e2cdd5;
  --c-mute: #a38b96;
  --c-mint: #f2668c;
  --c-ice: #ed7bab;
  --c-lilac: #c18aee;
  --c-moon: #f6dde6;
  --c-pink: #f2a4c3;
  --c-on-moon: #3b1a28;
  --c-on-aurora: #3a0b1f;
  --g-aurora: linear-gradient(100deg, #f0557f, #f47c9b 50%, #f2a4c3);

  /* ---- 官网专用语义色 ---- */
  --c-accent: #f2668c; /* 文字强调、编号、列表点 */
  --c-ph-ink: #c18aee; /* 占位符【……】 */
  --c-ph-bg: rgba(193, 138, 238, 0.14);
  --c-todo-ink: #f3a6cf; /* 【待律师核】【待黎拍】等，以及草稿提示条 */
  --c-todo-bg: rgba(243, 166, 207, 0.1);
  --c-todo-line: rgba(243, 166, 207, 0.28);
  --c-focus: rgba(242, 102, 140, 0.6);
  --c-bubble-ta-line: rgba(255, 200, 222, 0.15);
  --c-orb: radial-gradient(circle at 30% 28%, #fbf2f5, #f2668c 38%, #c18aee 100%);
  --mask-fill: #000; /* 遮罩只看透明度，颜色本身无所谓 */

  /* ---- 极光幕（官网专用） ---- */
  --aurora-mint: rgba(127, 242, 210, 0.13);
  --aurora-ice: rgba(168, 230, 240, 0.1);
  --aurora-lilac: rgba(193, 138, 238, 0.2);
  --aurora-ray: rgba(246, 221, 230, 0.05);
  --aurora-star: rgba(251, 241, 244, 0.75);
  --hero-glow: 0 0 48px rgba(241, 51, 95, 0.22);
  /* 首屏以下的两团淡光：玻璃卡后面有一点明暗，才看得出是玻璃 */
  --glow-lilac: rgba(193, 138, 238, 0.07);
  --glow-mint: rgba(242, 102, 140, 0.06);

  /* ---- 液态玻璃（规范 §5） ---- */
  --glass-bg: rgba(20, 9, 15, 0.44);
  --glass-bg-lite: rgba(20, 9, 15, 0.86);
  --glass-blur: blur(10px) saturate(1.35);
  --glass-edge: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.08) 28%,
    rgba(255, 255, 255, 0.05) 55%,
    rgba(255, 255, 255, 0.42) 82%,
    rgba(255, 255, 255, 0.95) 100%
  );
  --glass-glow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 16px rgba(255, 255, 255, 0.06);
  --glass-sheen:
    radial-gradient(90% 70% at 100% 100%, rgba(255, 255, 255, 0.12), transparent 50%),
    radial-gradient(70% 50% at 0% 0%, rgba(255, 255, 255, 0.06), transparent 55%);

  /* ---- 按钮（规范 §6.1） ---- */
  --btn-primary-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 6px rgba(58, 11, 31, 0.12),
    0 10px 28px -10px rgba(241, 51, 95, 0.55);
  --btn-primary-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 6px rgba(58, 11, 31, 0.12),
    0 14px 36px -10px rgba(241, 51, 95, 0.75);
  --btn-secondary-bg: rgba(255, 255, 255, 0.04);
  --btn-secondary-bg-hover: rgba(242, 102, 140, 0.08);
  --btn-secondary-ink: #f6dde6;

  /* ---- 字体（规范 §3）：中文走系统字体；Poiret One 只给数字与西文 ---- */
  --f-ui:
    -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Noto Sans SC', 'Noto Sans CJK SC',
    'Source Han Sans SC', 'HarmonyOS Sans SC', 'MiSans', 'Microsoft YaHei', sans-serif;
  --f-lat:
    'Poiret One', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Noto Sans SC',
    'Noto Sans CJK SC', 'Source Han Sans SC', 'HarmonyOS Sans SC', 'MiSans', 'Microsoft YaHei',
    sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fw-thin: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;

  /* ---- 字号：App 阶梯 ÷ 2 ---- */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-aux: 12.5px;
  --fs-md: 13.5px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --fs-3xl: 26px;
  --fs-display: 40px;
  /* 官网专用 */
  --fs-btn: 15px;
  --fs-prose: 15px;
  --fs-code: 0.92em;
  --fs-section: clamp(24px, 6.4vw, 34px);
  --fs-hero: clamp(64px, 21vw, 132px);
  --fs-age: clamp(60px, 17vw, 96px);
  --fs-lost: clamp(72px, 24vw, 140px);

  /* ---- 行高与字距（规范 §3） ---- */
  --lh-tight: 1.15;
  --lh-body: 1.65;
  --lh-prose: 1.85;
  --ls-soft: 0.06em;
  --ls-mid: 0.1em;
  --ls-wide: 0.18em;
  --ls-hero: 0.22em;

  /* ---- 间距：App 阶梯 ÷ 2，再补官网用的大间距 ---- */
  --sp-2xs: 2px;
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 24px;
  --sp-2xl: 32px;
  --sp-3xl: 48px;
  --sp-4xl: 72px;
  --sp-section: clamp(64px, 14vw, 128px);
  --gutter: clamp(16px, 5vw, 32px);

  /* ---- 尺寸 ---- */
  --max-w: 1040px;
  --max-w-prose: 760px;
  --max-w-copy: 34em;
  --demo-w: 400px;
  --line-w: 1px;
  --quote-w: 2px;
  --glass-edge-w: 1.3px;
  --focus-w: 2px;
  --focus-offset: 3px;
  --star-size: 22px;
  --orb-size: 34px;
  --badge-h: 24px;
  --btn-h-l: 48px;
  --btn-h-s: 34px;
  --btn-min-w: 220px;
  --btn-px: 26px;
  --btn-px-s: 16px;
  --step-num-w: 44px;
  --table-min-w: 600px;
  --press-scale: 0.965;
  --toast-rise: 12px;

  /* ---- 圆角（规范 §4） ---- */
  --r-pill: 999px;
  --r-card: 24px;
  --r-dialog: 32px;
  --r-bubble-ta: 6px 18px 18px 18px;
  --r-bubble-me: 18px 6px 18px 18px;
  --r-mark: 6px;

  /* ---- 动效（规范 §4） ---- */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-press: 120ms;
  --dur-move: 450ms;
  --dur-pop: 500ms;
  --dur-toast: 2600ms;
  --dur-aurora: 22s;
  --dur-sway: 16s;

  --z-toast: 1100;
}
/* tokens:end */

/* ---------- 字体文件：只覆盖拉丁字符，中文不会去下载它 ---------- */
@font-face {
  font-family: 'Poiret One';
  src: url('fonts/PoiretOne-Regular.ttf') format('truetype');
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-201D, U+2022, U+2026;
}

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

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

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(70% 40% at 100% 55%, var(--glow-lilac), transparent 70%),
    radial-gradient(60% 35% at 0% 85%, var(--glow-mint), transparent 70%), var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-ui);
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

svg {
  display: block;
}

a {
  color: inherit;
  text-decoration-color: var(--c-line);
  text-underline-offset: 0.28em;
}

:focus-visible {
  outline: var(--focus-w) solid var(--c-focus);
  outline-offset: var(--focus-offset);
}

/* 标题折行时两行尽量等长，避免最后一行只剩一两个字（不支持的浏览器照常折行） */
h1,
h2,
h3 {
  text-wrap: balance;
}

.lat {
  font-family: var(--f-lat);
  letter-spacing: var(--ls-soft);
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: calc(-1 * var(--sp-4xl));
  z-index: var(--z-toast);
  padding: var(--sp-sm) var(--sp-lg);
  border-radius: var(--r-pill);
  background: var(--c-deep);
  color: var(--c-ink);
}

.skip:focus {
  top: var(--sp-sm);
}

.wrap {
  max-width: calc(var(--max-w) + 2 * var(--gutter));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- 极光幕：页面顶部的背景层，只用渐变画，不放图片 ---------- */
.aurora {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: min(92vh, 860px);
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, var(--aurora-star), transparent),
    radial-gradient(1.5px 1.5px at 28% 64%, var(--aurora-star), transparent),
    radial-gradient(2px 2px at 46% 14%, var(--aurora-star), transparent),
    radial-gradient(1.5px 1.5px at 63% 48%, var(--aurora-star), transparent),
    radial-gradient(1.5px 1.5px at 78% 28%, var(--aurora-star), transparent),
    radial-gradient(2px 2px at 91% 58%, var(--aurora-star), transparent);
  -webkit-mask-image: linear-gradient(to bottom, var(--mask-fill) 55%, transparent);
  mask-image: linear-gradient(to bottom, var(--mask-fill) 55%, transparent);
}

.aurora--low {
  height: min(56vh, 520px);
}

/* 光团 + 幕布色带：缓慢漂移 */
.aurora::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -20%;
  right: -20%;
  bottom: 0;
  background:
    radial-gradient(42% 34% at 22% 26%, var(--aurora-mint), transparent 70%),
    radial-gradient(38% 30% at 78% 18%, var(--aurora-lilac), transparent 70%),
    radial-gradient(60% 36% at 52% 44%, var(--aurora-ice), transparent 72%),
    linear-gradient(
      104deg,
      transparent 18%,
      var(--aurora-mint) 30%,
      transparent 41%,
      var(--aurora-lilac) 56%,
      transparent 70%
    );
  -webkit-mask-image: linear-gradient(to bottom, var(--mask-fill) 20%, transparent 85%);
  mask-image: linear-gradient(to bottom, var(--mask-fill) 20%, transparent 85%);
  animation: aurora-drift var(--dur-aurora) var(--ease-out) infinite alternate;
}

/* 竖向细光束：幕布的褶 */
.aurora::after {
  content: '';
  position: absolute;
  top: -10%;
  left: -10%;
  right: -10%;
  height: 80%;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 19px,
    var(--aurora-ray) 19px 21px,
    transparent 21px 37px
  );
  -webkit-mask-image: radial-gradient(70% 90% at 50% 0%, var(--mask-fill), transparent 75%);
  mask-image: radial-gradient(70% 90% at 50% 0%, var(--mask-fill), transparent 75%);
  transform-origin: 50% 0;
  animation: aurora-sway var(--dur-sway) ease-in-out infinite alternate;
}

@keyframes aurora-drift {
  from {
    transform: translate3d(-3%, 0, 0) scale(1);
    opacity: 0.85;
  }
  to {
    transform: translate3d(3%, 2%, 0) scale(1.06);
    opacity: 1;
  }
}

@keyframes aurora-sway {
  from {
    transform: skewX(-7deg);
  }
  to {
    transform: skewX(5deg);
  }
}

/* ---------- 液态玻璃（规范 §5）：轻模糊 + 渐变高光边 + 边缘透光 ---------- */
.glass {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-card);
  background: var(--glass-sheen), var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-glow);
}

.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: var(--glass-edge-w);
  background: var(--glass-edge);
  -webkit-mask:
    linear-gradient(var(--mask-fill) 0 0) content-box,
    linear-gradient(var(--mask-fill) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* 不支持背景模糊的浏览器：底色加深，高光边保留（规范 §5 低端机降级） */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: var(--glass-sheen), var(--glass-bg-lite);
  }
}

/* ---------- 顶栏 ---------- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
  padding-top: calc(var(--sp-xl) + env(safe-area-inset-top));
  padding-bottom: var(--sp-xl);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-soft);
}

.nav__links a:not(.btn) {
  color: var(--c-ink-2);
  text-decoration: none;
}

.nav__links a:not(.btn):hover,
.nav__links a[aria-current='page'] {
  color: var(--c-ink);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  color: var(--c-ink);
  text-decoration: none;
}

.brand__mark {
  width: var(--star-size);
  height: var(--star-size);
  color: var(--c-accent);
  filter: drop-shadow(0 0 6px var(--c-focus));
}

.brand__name {
  font-size: var(--fs-xl);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-wide);
}

/* ---------- 按钮（规范 §6.1）：主按钮极光实心，次按钮极光描边 ---------- */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  min-height: var(--btn-h-l);
  min-width: var(--btn-min-w);
  /* 字距会在最后一个字后面多出一截，左边补同样宽度，文字才居中（规范 §3） */
  padding: 0 var(--btn-px) 0 calc(var(--btn-px) + var(--ls-wide));
  border: 0;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: var(--fs-btn);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--dur-pop) var(--ease-spring),
    box-shadow var(--dur-move) var(--ease-out),
    filter var(--dur-move) var(--ease-out),
    background-color var(--dur-move) var(--ease-out);
}

.btn:active {
  transform: scale(var(--press-scale));
  transition-duration: var(--dur-press);
}

.btn--primary {
  background: var(--g-aurora);
  color: var(--c-on-aurora);
  box-shadow: var(--btn-primary-shadow);
}

.btn--primary:hover {
  filter: brightness(1.05);
  box-shadow: var(--btn-primary-shadow-hover);
}

.btn--secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-ink);
  font-weight: var(--fw-regular);
}

.btn--secondary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: var(--line-w);
  background: var(--g-aurora);
  opacity: 0.75;
  -webkit-mask:
    linear-gradient(var(--mask-fill) 0 0) content-box,
    linear-gradient(var(--mask-fill) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity var(--dur-move) var(--ease-out);
}

.btn--secondary:hover {
  background-color: var(--btn-secondary-bg-hover);
}

.btn--secondary:hover::before {
  opacity: 1;
}

.btn--s {
  min-height: var(--btn-h-s);
  min-width: 0;
  padding: 0 var(--btn-px-s) 0 calc(var(--btn-px-s) + var(--ls-mid));
  font-size: var(--fs-md);
  letter-spacing: var(--ls-mid);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
  margin-top: var(--sp-2xl);
}

.actions .btn {
  flex: 1 1 auto;
}

@media (min-width: 560px) {
  .actions .btn {
    flex: 0 0 auto;
  }
}

/* ---------- 小胶囊 ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  min-height: var(--badge-h);
  padding: 0 var(--sp-md);
  border: var(--line-w) solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  color: var(--c-ink-2);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-soft);
  white-space: nowrap;
}

.badge--age {
  border-color: transparent;
  background: var(--g-aurora);
  color: var(--c-on-aurora);
  font-family: var(--f-lat);
  font-weight: var(--fw-medium);
}

.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-sm);
}

/* ---------- 首屏 ---------- */
.hero {
  display: grid;
  gap: var(--sp-3xl);
  align-items: center;
  padding-top: var(--sp-2xl);
}

@media (min-width: 880px) {
  .hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    padding-top: var(--sp-4xl);
  }
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  margin: 0 0 var(--sp-xl);
  color: var(--c-accent);
  font-family: var(--f-lat);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.eyebrow::before {
  content: '';
  width: var(--sp-2xl);
  height: var(--line-w);
  background: var(--g-aurora);
}

.hero__title {
  margin: 0;
  font-size: var(--fs-hero);
  font-weight: var(--fw-thin);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-hero);
  text-shadow: var(--hero-glow);
}

.hero__tag {
  margin: var(--sp-md) 0 0;
  color: var(--c-ink-2);
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-wide);
}

.hero__lead {
  max-width: var(--max-w-copy);
  margin: var(--sp-xl) 0 0;
  color: var(--c-ink-2);
  font-size: var(--fs-lg);
  line-height: var(--lh-prose);
}

.hero__note {
  margin: var(--sp-xl) 0 0;
  color: var(--c-mute);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-soft);
}

/* ---------- 聊天示意卡 ---------- */
.demo {
  display: flex;
  margin: 0;
  flex-direction: column;
  gap: var(--sp-md);
  width: 100%;
  max-width: var(--demo-w);
  justify-self: center;
  padding: var(--sp-xl) var(--sp-lg) var(--sp-lg);
  border-radius: var(--r-dialog);
}

.demo__head {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding-bottom: var(--sp-md);
  border-bottom: var(--line-w) solid var(--c-line);
}

.demo__orb {
  flex: none;
  width: var(--orb-size);
  height: var(--orb-size);
  border-radius: 50%;
  background: var(--c-orb);
  box-shadow: var(--hero-glow);
}

.demo__who {
  display: flex;
  flex-direction: column;
  line-height: var(--lh-tight);
}

.demo__name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-mid);
}

.demo__days {
  margin-top: var(--sp-xs);
  color: var(--c-mute);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-soft);
}

.bubble {
  max-width: 84%;
  margin: 0;
  padding: var(--sp-md) var(--sp-lg);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

.bubble--ta {
  align-self: flex-start;
  border: var(--line-w) solid var(--c-bubble-ta-line);
  border-radius: var(--r-bubble-ta);
  background: var(--c-surface);
}

.bubble--me {
  align-self: flex-end;
  border-radius: var(--r-bubble-me);
  background: var(--c-moon);
  color: var(--c-on-moon);
  font-weight: var(--fw-regular);
}

.demo__narr {
  margin: 0;
  color: var(--c-ink-2);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-soft);
  text-align: center;
  opacity: 0.85;
}

.demo__foot {
  margin: var(--sp-sm) 0 0;
  color: var(--c-mute);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-soft);
  text-align: center;
}

/* ---------- 区块 ---------- */
.section {
  padding-top: var(--sp-section);
}

.section--tight {
  padding-top: var(--sp-2xl);
}

.section__head {
  max-width: var(--max-w-copy);
  margin-bottom: var(--sp-2xl);
}

.section__title {
  margin: 0;
  font-size: var(--fs-section);
  font-weight: var(--fw-thin);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
}

.section__lead {
  margin: var(--sp-lg) 0 0;
  color: var(--c-ink-2);
  font-size: var(--fs-lg);
  line-height: var(--lh-prose);
}

.grid {
  display: grid;
  gap: var(--sp-lg);
}

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

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

.card {
  padding: var(--sp-xl);
}

.card__num {
  display: block;
  color: var(--c-accent);
  font-family: var(--f-lat);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-soft);
}

.card__label {
  display: block;
  color: var(--c-accent);
  font-family: var(--f-lat);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.card__title {
  margin: var(--sp-lg) 0 var(--sp-sm);
  font-size: var(--fs-xl);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-mid);
}

.card__text {
  margin: 0;
  color: var(--c-ink-2);
  font-size: var(--fs-base);
  line-height: var(--lh-prose);
}

.card__text + .card__text {
  margin-top: var(--sp-sm);
}

.card__small {
  color: var(--c-mute);
  font-size: var(--fs-sm);
}

/* ---------- 18+ 声明 ---------- */
.age {
  display: grid;
  gap: var(--sp-xl);
  align-items: center;
  padding: var(--sp-2xl) var(--sp-xl);
  border-radius: var(--r-dialog);
}

@media (min-width: 720px) {
  .age {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-3xl);
    padding: var(--sp-3xl);
  }
}

.age__num {
  margin: 0;
  background: var(--g-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--f-lat);
  font-size: var(--fs-age);
  line-height: 1;
}

.age__title {
  margin: 0 0 var(--sp-md);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-mid);
}

/* ---------- 收尾号召 ---------- */
.cta {
  padding: var(--sp-3xl) var(--sp-xl);
  border-radius: var(--r-dialog);
  text-align: center;
}

.cta .actions {
  justify-content: center;
}

.cta .eyebrow {
  justify-content: center;
}

.cta .section__lead {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-w-copy);
}

/* ---------- 下载页 ---------- */
.page-head {
  padding-top: var(--sp-2xl);
}

.page-title {
  margin: 0;
  font-size: var(--fs-section);
  font-weight: var(--fw-thin);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
}

.page-head .badges {
  margin-top: var(--sp-lg);
}

.spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-lg) var(--sp-xl);
  margin: 0;
}

.spec dt {
  color: var(--c-mute);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-soft);
}

.spec dd {
  margin: var(--sp-xs) 0 0;
  color: var(--c-ink);
  font-family: var(--f-lat);
  font-size: var(--fs-lg);
  overflow-wrap: anywhere;
}

.fineprint {
  margin: var(--sp-lg) 0 0;
  color: var(--c-mute);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.fineprint a,
.card__text a {
  color: var(--c-accent);
}

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

.steps > li {
  display: grid;
  grid-template-columns: var(--step-num-w) minmax(0, 1fr);
  gap: var(--sp-md);
  counter-increment: step;
}

.steps > li::before {
  content: counter(step, decimal-leading-zero);
  color: var(--c-accent);
  font-family: var(--f-lat);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
}

.steps h3 {
  margin: 0 0 var(--sp-xs);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-soft);
}

.steps p {
  margin: 0;
  color: var(--c-ink-2);
  line-height: var(--lh-prose);
}

/* 折叠项：各品牌手机提示、协议目录 */
.fold {
  padding: 0 var(--sp-xl);
}

.fold + .fold {
  margin-top: var(--sp-md);
}

.fold > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  min-height: var(--btn-h-l);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-soft);
}

.fold > summary::-webkit-details-marker {
  display: none;
}

.fold > summary::after {
  content: '+';
  color: var(--c-accent);
  font-family: var(--f-lat);
  font-size: var(--fs-2xl);
  line-height: 1;
  transition: transform var(--dur-move) var(--ease-spring);
}

.fold[open] > summary::after {
  transform: rotate(45deg);
}

.fold__body {
  padding-bottom: var(--sp-lg);
  color: var(--c-ink-2);
  line-height: var(--lh-prose);
}

.fold__body p {
  margin: 0 0 var(--sp-sm);
}

/* ---------- 协议页 ---------- */
.notice {
  margin: var(--sp-xl) 0 0;
  padding: var(--sp-lg) var(--sp-xl);
  border: var(--line-w) solid var(--c-todo-line);
  border-radius: var(--r-card);
  background: var(--c-todo-bg);
  color: var(--c-ink);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

.notice strong {
  color: var(--c-todo-ink);
  font-weight: var(--fw-medium);
}

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

.toc {
  margin-top: var(--sp-xl);
  margin-bottom: var(--sp-2xl);
  max-width: var(--max-w-prose);
}

.toc ol {
  margin: 0;
  padding: 0 0 var(--sp-lg) var(--sp-lg);
  columns: 2 14em;
  column-gap: var(--sp-xl);
  font-size: var(--fs-md);
}

.toc li {
  break-inside: avoid;
  padding: var(--sp-2xs) 0;
}

.toc a {
  color: var(--c-ink-2);
  text-decoration: none;
}

.toc a:hover {
  color: var(--c-accent);
}

.summary {
  margin-top: var(--sp-xl);
  padding: var(--sp-xl);
}

/* 要压过后面的 .prose h2 / .prose p，所以写成两个类 */
.summary.prose > :first-child {
  margin-top: 0;
}

.summary.prose > :last-child {
  margin-bottom: 0;
}

.prose {
  max-width: var(--max-w-prose);
  color: var(--c-ink-2);
  font-size: var(--fs-prose);
  line-height: var(--lh-prose);
  overflow-wrap: anywhere;
}

.prose h2 {
  margin: var(--sp-3xl) 0 var(--sp-lg);
  color: var(--c-ink);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-soft);
  scroll-margin-top: var(--sp-xl);
}

.prose h3 {
  margin: var(--sp-2xl) 0 var(--sp-md);
  color: var(--c-ink);
  font-size: var(--fs-xl);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-soft);
  scroll-margin-top: var(--sp-xl);
}

.prose p {
  margin: 0 0 var(--sp-lg);
}

.prose strong {
  color: var(--c-ink);
  font-weight: var(--fw-medium);
}

.prose ul {
  margin: 0 0 var(--sp-lg);
  padding-left: var(--sp-xl);
}

.prose li + li {
  margin-top: var(--sp-xs);
}

.prose li::marker {
  color: var(--c-accent);
}

.prose blockquote {
  margin: 0 0 var(--sp-lg);
  padding: var(--sp-md) var(--sp-lg);
  border-left: var(--quote-w) solid var(--c-accent);
  border-radius: 0 var(--r-mark) var(--r-mark) 0;
  background: var(--c-surface);
}

.prose blockquote p:last-child {
  margin-bottom: 0;
}

.prose hr {
  height: var(--line-w);
  margin: var(--sp-2xl) 0;
  border: 0;
  background: var(--c-line);
}

.prose a {
  color: var(--c-accent);
}

.prose code {
  padding: 0 var(--sp-xs);
  border-radius: var(--r-mark);
  background: var(--c-surface);
  font-family: var(--f-mono);
  font-size: var(--fs-code);
}

.table-wrap {
  margin: 0 0 var(--sp-lg);
  overflow-x: auto;
  border: var(--line-w) solid var(--c-line);
  border-radius: var(--r-card);
  -webkit-overflow-scrolling: touch;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

.prose .table--wide {
  min-width: var(--table-min-w);
}

.prose th,
.prose td {
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: var(--line-w) solid var(--c-line);
  text-align: left;
  vertical-align: top;
}

.prose th {
  background: var(--c-surface);
  color: var(--c-ink);
  font-weight: var(--fw-regular);
}

.prose tr:last-child td {
  border-bottom: 0;
}

/* 占位符与待定标记：草稿期显眼一点，替换后自然消失 */
.ph {
  padding: 0 var(--sp-2xs);
  border-radius: var(--r-mark);
  background: var(--c-ph-bg);
  color: var(--c-ph-ink);
}

.ph--todo {
  background: var(--c-todo-bg);
  color: var(--c-todo-ink);
}

/* 协议目录 */
.doc-list {
  display: grid;
  gap: var(--sp-md);
  margin: var(--sp-xl) 0 0;
  padding: 0;
  list-style: none;
}

.doc-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
  padding: var(--sp-lg) var(--sp-xl);
  color: var(--c-ink);
  text-decoration: none;
}

.doc-link__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-soft);
}

.doc-link__meta {
  display: block;
  margin-top: var(--sp-xs);
  color: var(--c-mute);
  font-size: var(--fs-sm);
}

.doc-link::after {
  content: '→';
  flex: none;
  color: var(--c-accent);
  font-family: var(--f-lat);
  font-size: var(--fs-xl);
  transition: transform var(--dur-move) var(--ease-spring);
}

.doc-link:hover::after {
  transform: translateX(var(--sp-xs));
}

/* ---------- 404 ---------- */
.lost {
  padding-top: var(--sp-4xl);
  text-align: center;
}

.lost__num {
  margin: 0;
  background: var(--g-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--f-lat);
  font-size: var(--fs-lost);
  line-height: 1;
}

.lost .actions {
  justify-content: center;
}

/* ---------- 页脚 ---------- */
.footer {
  margin-top: var(--sp-section);
  padding-top: var(--sp-2xl);
  padding-bottom: calc(var(--sp-3xl) + env(safe-area-inset-bottom));
  border-top: var(--line-w) solid var(--c-line);
  color: var(--c-mute);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.footer__inner {
  display: grid;
  gap: var(--sp-xl);
}

@media (min-width: 880px) {
  .footer__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.2fr);
  }
}

.footer__tag {
  margin: var(--sp-sm) 0 0;
  letter-spacing: var(--ls-mid);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--sp-sm) var(--sp-lg);
}

.footer__links a {
  color: var(--c-ink-2);
  text-decoration: none;
}

.footer__links a:hover {
  color: var(--c-ink);
}

.footer__meta p {
  margin: 0;
}

.footer__meta p + p {
  margin-top: var(--sp-xs);
}

.footer__meta a {
  color: var(--c-mute);
}

/* 展示版页脚没有协议链接那一列：品牌在左，联系方式靠右 */
@media (min-width: 880px) {
  .footer__inner--brief {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* 备案行：页脚最下面居中（备案要求 ICP 备案号放在首页底部中间） */
.footer__beian {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-xs) var(--sp-lg);
  margin-top: var(--sp-xl);
  text-align: center;
}

.footer__beian a {
  color: var(--c-mute);
}

/* ---------- 轻提示（site.js 生成） ---------- */
.toast {
  position: fixed;
  top: calc(var(--sp-lg) + env(safe-area-inset-top));
  left: 50%;
  z-index: var(--z-toast);
  width: max-content;
  max-width: calc(100% - 2 * var(--gutter));
  padding: var(--sp-md) var(--sp-xl);
  border-radius: var(--r-pill);
  color: var(--c-ink);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-soft);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-1 * var(--toast-rise)));
  transition:
    opacity var(--dur-move) var(--ease-out),
    transform var(--dur-move) var(--ease-spring);
}

.toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- 减少动态效果：关掉动画，只留最终状态（规范 §4） ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .aurora::before,
  .aurora::after {
    animation: none;
  }

  .btn,
  .btn--secondary::before,
  .fold > summary::after,
  .doc-link::after,
  .toast {
    transition: none;
  }
}