/* ==========================================================================
   人人礼簿 · 官网落地页
   设计体系：参照「doubao_html」参考页全站换肤 ——
   深红绸缎夜：全页只有红与金两种面，深红渐变带（#5c0610→#8a0a14→#6b0812）
   与深红夜面（#3a050c）交替，内容一律落在奶油金卡（#fff7e1→#ffefc4）上；
   标题楷体烫金（#fff4c4→#f2d37a→#d4a521→#a57416），金饰与金边贯穿全站
   ========================================================================== */

/* ---------- 底图字体 ----------
   衡山毛笔行书（衡山毛筆フォント行書 · Kouzan Brush Font，青柳衡山作，免费商用）。
   原始 TTF 原样自托管，不做修改（5.4MB，font-display: swap 兜底） */
@font-face {
  font-family: "KouzanBrushGyousyo";
  src: url("assets/fonts/KouzanBrushGyousyo.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- 设计令牌 ----------
   色彩体系：全站只有红与金两种面 —— 深红渐变带 / 深红夜面交替，
   内容一律落在奶油金卡上；金色既是描边也是标题烫金 */
:root {
  --canvas: #1a0308; /* 页面基色：近黑的酒红，页脚透出 */

  /* 红面三档 */
  --red-deep: #3a050c; /* 夜面：最深的段落带 */
  --red-mid: #5c0610; /* 渐变带起止 */
  --red-main: #8a0a14; /* 主红：渐变带中段 */
  --red-ink: #6b0812; /* 卡上正文 */
  --red-bright: #b51220; /* 徽标、数字、表头 */
  --surface-white: #ffffff; /* 二维码牌底 */

  /* 描边：红面上走金线，奶油卡内走暗红发丝线 */
  --border-red: rgba(232, 197, 92, 0.3); /* 红面上的金发丝线 */
  --border-gold: rgba(232, 197, 92, 0.45); /* 金卡描边 */

  /* 文字：卡上深红字，红面上奶油/淡金字 */
  --ink: #8a0a14; /* 奶油卡标题 */
  --body: #6b0812; /* 奶油卡正文 */
  --muted: rgba(107, 8, 18, 0.68); /* 奶油卡弱化 */
  --on-red: #fff7e1; /* 红面奶油正文 */
  --on-red-soft: rgba(255, 247, 225, 0.88);
  --on-red-mute: rgba(247, 231, 161, 0.78);
  --on-red-wash: rgba(232, 197, 92, 0.12); /* 红面上的次级按钮底 */

  /* 强调：金梯度按钮是唯一主电压；朱红亮档专司徽标与数字 */
  --interactive: #b51220;
  --gold: #e8c55c;
  --gold-light: #f7e7a1;
  --gold-bright: #ffe79a;

  /* 底图墨迹与金饰：墨迹暖棕压印（亮于底色），金饰细线贯穿封面 */
  --ink-press: rgba(226, 132, 74, 0.42);
  --gold-orn: rgba(232, 197, 92, 0.5);

  /* 字体：正文单一 system 无衬线栈；标题与数字用楷体（参考稿 font-kai）；
     等宽只留给拉丁技术标签与日期数字 */
  --f-kai: "KaiTi", "STKaiti", "楷体", "Kaiti SC", "华文楷体", "AR PL UKai CN", serif;
  --f-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  --f-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", monospace;
  /* 底图字体：衡山毛笔行书（自托管，见文件头 @font-face），
     缺失时依次兜底本机同名字体与系统书法字体 */
  --f-brush: "KouzanBrushGyousyo", "衡山毛筆フォント行書",
    "Alimama DongFangDaKai", jiangxizhuokai, "STXingkai", "华文行楷",
    "STKaiti", "华文楷体", KaiTi, "楷体", "Kaiti SC", "AR PL UKai CN", STSong,
    "Songti SC", SimSun, serif;

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

  /* Notion 栅格：1280px 容器 + 32px 沟槽，比 1440 更收束的编辑式行宽 */
  --page: 1280px;
  --gut: 32px;
  --nav-h: 64px;

  /* 圆角：金卡 16px / 面板 24px / 全胶囊 */
  --r-md: 10px;
  --r-card: 16px;
  --r-panel: 24px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--on-red-soft);
  font-family: var(--f-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

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

img {
  max-width: 100%;
  height: auto;
}

::selection {
  background: var(--gold);
  color: var(--red-main);
}

:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}

/* 奶油卡内的焦点：金线看不清，换深红 */
.card :focus-visible,
.story__row :focus-visible,
.split__item :focus-visible,
.creed__item :focus-visible,
.faq__item :focus-visible,
.table :focus-visible,
.plate :focus-visible {
  outline-color: var(--interactive);
}

.skip-link {
  position: absolute;
  left: 50%;
  top: var(--s-3);
  transform: translate(-50%, -200%);
  z-index: 100;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  background: var(--surface-white);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 14px;
  text-decoration: none;
  transition: transform 0.2s var(--ease);
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

/* ---------- 排版 ----------
   libu-design 的纪律：单一 system 无衬线栈、字重只有 400 / 600 两级、
   正字距一律归 0（Apple 无 tracking）。中文没有小写字母、字形是满格方块，
   标题字距封顶在 -0.04em，正文行高放宽到 1.6（拉丁是 1.5）。 */
.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gut);
}

.display-xl,
.display-lg,
.display-md,
.display-sm {
  font-family: var(--f-sans);
  font-weight: 600;
  color: var(--ink);
}

.display-xl {
  font-size: clamp(56px, 11.5vw, 185px);
  line-height: 1.05; /* Notion hero-display 行高 */
  letter-spacing: -0.04em;
}

.display-lg {
  max-width: 15em;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.14;
  letter-spacing: -0.03em;
}

.display-md {
  max-width: 15em;
  font-size: clamp(23px, 2.3vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.display-sm {
  max-width: 17em;
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.26;
  letter-spacing: -0.01em;
}

/* ---------- 烫金标题（参考稿 .gold-title）----------
   楷体 + 金梯度 + 金光投影：只在红面上的大标题使用 */
.gilt {
  font-family: var(--f-kai);
  font-weight: 700;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #fff4c4 0%, #f2d37a 35%, #d4a521 60%, #a57416 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #f2d37a; /* 不支持 clip 的浏览器兜底 */
  filter: drop-shadow(0 4px 18px rgba(232, 197, 92, 0.35));
}

/* 拉丁标签：参考稿的金边胶囊（tag）—— 金描边 + 金色淡底 */
.caption {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-5);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-pill);
  background: var(--on-red-wash);
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
}

/* 中文标签：跟着拉丁标签走，去掉大写与圆点 */
.caption__cn {
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: none;
  color: var(--on-red-mute);
}

.caption__cn::before {
  content: none;
}

.fine {
  font-family: var(--f-sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--on-red-mute);
}

/* 奶油卡内的细字回到暗红系 */
.card .fine,
.story__row .fine,
.split__item .fine,
.creed__item .fine,
.faq__item .fine,
.plate .fine {
  color: var(--muted);
}

.lead {
  margin-top: var(--s-6);
  max-width: 22em;
  font-family: var(--f-sans);
  font-size: clamp(17px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--on-red-soft);
}

.body {
  max-width: 30em;
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
}

.note {
  margin-top: var(--s-8);
  /* 单行显示（用户指定）：不设行宽上限、禁止换行；窄屏在断点处恢复换行 */
  max-width: none;
  white-space: nowrap;
}

.head {
  position: relative;
  max-width: 100%;
}

/* 窄栏容器：保留给未来需要收束行宽的段落 */

.head .display-lg {
  margin-top: var(--s-5);
}

/* 段首发丝线已按参考稿收起（统一在 .band::before, .head::before 处 display:none），
   main.js 仍会写 --rule 变量，无副作用 */
html.js .head {
  --rule: 0;
}

/* Notion 式居中段头：栅格段（痛点/功能/场景/价格/信任）开场白居中，
   叙事段（办礼现场/收尾）保持左对齐；段首短线随之居中 */
.head--center {
  text-align: center;
}

.head--center .display-lg,
.head--center .lead {
  margin-left: auto;
  margin-right: auto;
}

.head--center::before {
  left: 50%;
  transform: translateX(-50%) scaleX(var(--rule, 1));
  transform-origin: 50% 50%;
}

/* ---------- 按钮：胶囊。朱红只给最高优先级 CTA ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.btn--cta {
  background: linear-gradient(180deg, #ffe79a, #e8c55c);
  border-color: rgba(255, 231, 154, 0.9);
  color: var(--red-main);
  font-weight: 700;
}

.btn--cta:hover {
  background: linear-gradient(180deg, #fff0b8, #f0d06e);
  border-color: #fff0b8;
  color: var(--red-main);
}

/* 朱红封面上的主 CTA：金梯度 + 呼吸金光（参考稿 .btn-glow） */
.hero .btn--cta,
.nav .btn--cta {
  background: linear-gradient(180deg, #ffe79a, #e8c55c);
  border-color: rgba(255, 231, 154, 0.9);
  color: var(--red-main);
}

.hero .btn--cta:hover,
.nav .btn--cta:hover {
  background: linear-gradient(180deg, #fff0b8, #f0d06e);
  border-color: #fff0b8;
  color: var(--red-main);
}

/* 呼吸金光 */
@keyframes goldGlow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(232, 197, 92, 0.55), 0 10px 25px -10px rgba(232, 197, 92, 0.6);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(232, 197, 92, 0), 0 10px 25px -10px rgba(232, 197, 92, 0.85);
  }
}

.hero .btn--cta {
  animation: goldGlow 2.4s var(--ease) infinite;
}

/* ---------- 全局导航：字标居左 / 链接居中 / CTA 居右 ----------
   参考稿：全程深红毛玻璃 + 金发丝底线，字标楷体烫金 */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(44, 4, 9, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-red);
  transition: background-color 0.3s var(--ease);
}

.nav--scrolled {
  background: rgba(26, 3, 8, 0.92);
}

.nav__bar {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gut);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}

.nav__menu {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.nav__right {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.nav__link {
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.4;
  color: var(--gold-light);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.nav__link:hover {
  color: var(--gold-bright);
}

.nav__cta {
  height: 36px;
  padding: 0 var(--s-5);
  font-size: 14px;
}

.nav__toggle {
  display: none;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.4;
  color: var(--on-red);
  cursor: pointer;
}

.nav__toggle-label--close {
  display: none;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-label--open {
  display: none;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-label--close {
  display: inline;
}

/* ---------- 1 / 首屏：朱红封面 —— 参考稿式双栏构图 ----------
   左栏：金字标 + 主打语 + 竖排双按钮；右栏：鎏金框账簿卡。
   背景压暗红「随」「礼簿」与金饰层，整体垂直居中 */
.hero {
  position: relative;
  /* 首屏高度 = 视口 - 导航 - 150px（用户指定压矮一档） */
  min-height: calc(100vh - var(--nav-h) - 150px);
  min-height: calc(100svh - var(--nav-h) - 150px);
  display: flex;
  flex-direction: column;
  /* 丝绸深红背景（参考稿 .silk-bg）：金光 + 红光两团渐晕，压在深红渐变上 */
  background:
    radial-gradient(1400px 700px at 20% 10%, rgba(232, 197, 92, 0.18), transparent 60%),
    radial-gradient(1100px 600px at 90% 90%, rgba(217, 30, 43, 0.35), transparent 60%),
    linear-gradient(180deg, var(--red-mid) 0%, var(--red-main) 40%, var(--red-ink) 100%);
  color: var(--on-red-soft);
}

/* 首屏双栏：左文字右卡片，垂直居中于封面（上下留白收紧，内容团更大） */
.hero__stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  padding: var(--s-8) 0 var(--s-7);
}

.hero__grid {
  display: grid;
  /* 参考稿比例：文字栏 : 账簿卡 ≈ 1.11 : 1，沟槽约 5% 行宽 */
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

.hero__col {
  /* 参考图：文字栏约占视口宽 1/3，主打语单行 —— 不再用 em 死顶卡窄；
     整体右移 100px、上移 310px（用户指定） */
  margin-left: 100px;
  margin-top: -310px;
  max-width: 34em;
  text-align: center;
}

/* 字标：参考图一为奶白实色楷体大字（非烫金），栏内居中成轴；
   「人人」两字累计下移 50px（由主打语上边距 -50 抵消，模块其他元素不动） */
.hero__wordmark {
  font-family: var(--f-kai);
  font-weight: 700;
  color: var(--on-red);
  margin-top: 50px;
  text-align: center;
}

/* 主打语：参考图单行大字，与字标同级醒目；行距在参考图基础上 +20px（用户指定） */
.hero__promise {
  margin-top: calc(var(--s-5) - 30px);
  font-family: var(--f-sans);
  font-size: clamp(20px, 2.1vw, 34px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--on-red);
}

/* 细字副题行（参考图一）：紧跟主打语，奶油弱化色 */
.hero__sub {
  margin-top: var(--s-6);
  font-size: clamp(13px, 1.05vw, 16px);
  color: var(--on-red-mute);
}

/* 双按钮竖排：主 CTA 在上，金描边幽灵在下（参考图二）；行距 +20px，两按钮间距 +30px */
.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--s-4) + 30px);
  margin-top: calc(var(--s-7) + 20px);
}

.hero__actions .btn {
  min-width: 200px;
  height: 52px;
  font-size: 17px;
}

/* 金描边幽灵按钮：金边 + 金色淡底 */
.btn--ghost {
  background: var(--on-red-wash);
  border-color: rgba(232, 197, 92, 0.55);
  color: var(--on-red);
}

.btn--ghost:hover {
  background: rgba(232, 197, 92, 0.18);
  border-color: var(--gold-bright);
  color: var(--on-red);
}

/* 视觉锚：鎏金框账簿卡（图一「我的账簿」）—— 淡金外框 + 居中金题带 +
   环点行卡 + 底部双结算；.ink ~ * 已给本卡 position:relative + z-index:1 */
.board {
  flex: none;
  min-width: 0;
  width: 100%;
  max-width: 460px;
  justify-self: end;
  /* 左移 50px（用户指定） */
  margin-right: 50px;
}

/* 金色外框：淡金梯度包边 + 柔和暖投影 */
.board__frame {
  padding: var(--s-3);
  background: linear-gradient(180deg, #f6e9c4, #e4ca92);
  border: 1px solid rgba(255, 240, 200, 0.9);
  border-radius: var(--r-panel);
  box-shadow: 0 24px 56px rgba(40, 0, 6, 0.35);
}

/* 内层：暖瓷白底盘 */
.board__inner {
  overflow: hidden;
  background: #fbf5e7;
  border: 1px solid rgba(145, 115, 0, 0.28);
  border-radius: var(--r-card);
}

/* 金题带：账簿名居中，深红楷体字 */
.board__title {
  padding: var(--s-4);
  background: linear-gradient(180deg, #f6dc9e, #e2ba66);
  border-bottom: 1px solid rgba(145, 115, 0, 0.25);
  font-family: var(--f-kai);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--interactive);
}

.board__list {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
}

/* 单行环点行卡：环点 + 姓名 + 事由 + 金额 + 日期（图一行结构，行高约卡宽 10%） */
.board__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--surface-white);
  border: 1px solid rgba(145, 115, 0, 0.16);
  border-radius: var(--r-md);
}

.board__row::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--gold);
  border-radius: var(--r-pill);
}

.board__name {
  flex: none;
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.board__event {
  flex: 1;
  font-family: var(--f-sans);
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board__amt {
  flex: none;
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--interactive);
}

.board__date {
  flex: none;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--muted);
}

/* 半透明样例行（图一卡顶的淡显行） */
.board__row--ghost {
  opacity: 0.45;
  background: transparent;
  border-style: dashed;
}

/* 底部双结算：本月送礼 / 礼支出，金线小瓷砖 + 金币点 */
.board__sums {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-3);
  padding: 0 var(--s-4) var(--s-4);
}

.board__sum {
  padding: var(--s-3) var(--s-4);
  background: #f8efdb;
  border: 1px solid rgba(145, 115, 0, 0.22);
  border-radius: var(--r-md);
  text-align: center;
}

.board__sum span {
  display: block;
  font-family: var(--f-sans);
  font-size: 12px;
  color: var(--muted);
}

.board__sum span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #f3d78c, #d9a83f);
  vertical-align: 1px;
}

.board__sum strong {
  display: block;
  margin-top: 2px;
  font-family: var(--f-mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--interactive);
}

/* ---------- 底图大字：衡山毛笔行书巨字，压在段落之下 ----------
   首屏封面以压暗同色系（tone-on-tone）的衡山毛笔行书印「随」与「礼簿」：
   「随」贴左缘裁切、「礼簿」竖排贴右缘裁切 —— 是封面里透出来的暗纹，不是贴图。
   .ink 自身带 overflow:hidden，因此不必给段落加裁切（那会破坏左栏的 sticky）。 */
.ink {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.ink__glyph {
  position: absolute;
  display: block;
  font-family: var(--f-brush);
  font-weight: 400;
  font-size: clamp(300px, 44vw, 760px);
  line-height: 0.78;
  color: var(--ink-press);
  /* 竖排字禁折列：可用高度不足时保持单列向下延伸，而不是左右并排 */
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}

/* 底图之后的兄弟节点抬到墨迹之上 */
.ink ~ * {
  position: relative;
  z-index: 1;
}

/* 礼簿 · 首屏右缘：竖排（上下排列）如书脊，两字完整可读；
   累计下移 100px、左移 130px（用户指定） */
.ink--hero .ink__glyph--lb {
  top: calc(55% + 100px);
  right: calc(-3% + 130px);
  writing-mode: vertical-rl;
  letter-spacing: 0.06em;
  font-size: clamp(120px, calc(15vw - 20px), 240px);
  transform: translateY(calc(-50% + var(--ink-y, 0px)));
}

/* 随 · 首屏左缘：巨字右倾 10° 纵向拉长，纵贯左下象限压在文字后方
   （参考图：随高约视口 45%，是首屏的视觉压舱石；累计右移 130 / 下移 50，用户指定） */
.ink--hero .ink__glyph--sui {
  top: calc(58% + 50px);
  left: calc(-8% + 130px);
  font-size: clamp(340px, calc(36vw - 20px), 620px);
  transform: translateY(calc(-50% + var(--ink-y, 0px))) rotate(10deg) scaleY(1.15);
}

/* ---------- 金饰层：细金内框 + 祥云 + 金点 + 底角饰（参考稿装帧语言） ----------
   跟随 .ink 之后，由 .ink ~ * 抬到墨迹之上、内容之下 */
.hero__orn {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--gold-orn);
}

/* 细金内框：距页缘 14px 的一根金线 */
.hero__orn::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 206, 62, 0.2);
  border-radius: 2px;
}

.orn__cloud {
  position: absolute;
  width: 120px;
  height: 48px;
}

.orn__cloud path {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.orn__cloud--tl {
  top: 7%;
  left: 4%;
}

.orn__cloud--tr {
  top: 7%;
  right: 4%;
  transform: scaleX(-1);
}

.orn__dots {
  position: absolute;
  width: 60px;
  height: 120px;
}

.orn__dots circle {
  fill: currentColor;
}

.orn__dots--l {
  left: 3%;
  bottom: 16%;
}

.orn__dots--r {
  right: 3%;
  top: 22%;
}

/* 回纹角饰（参考图四角）：双线圆角拐角 + 金点，旋转铺满四角 */
.orn__corner {
  position: absolute;
  width: 56px;
  height: 56px;
  color: var(--gold-orn);
}

.orn__corner path {
  stroke: currentColor;
  stroke-linecap: round;
}

.orn__corner--tl {
  top: 10px;
  left: 10px;
}

.orn__corner--tr {
  top: 10px;
  right: 10px;
  transform: scaleX(-1);
}

.orn__corner--bl {
  bottom: 10px;
  left: 10px;
  transform: scaleY(-1);
}

.orn__corner--br {
  bottom: 10px;
  right: 10px;
  transform: scale(-1);
}

/* 首屏墨迹：随页面载入缓缓显影，像一笔刚落下的墨 */
html.js .ink--hero {
  animation: inkIn 2s var(--ease-out) both;
}

@keyframes inkIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---------- 段落外壳：full-bleed 表面 + 居中内容容器 ----------
   翻页节奏（参考稿）：深红渐变带 ↔ 深红夜面（#3a050c）交替，
   内容一律落在奶油金卡上 */
.band {
  position: relative;
  padding: var(--section) 0;
  background: linear-gradient(180deg, var(--red-mid) 0%, var(--red-main) 52%, var(--red-ink) 100%);
  scroll-margin-top: var(--nav-h);
}

/* 段间距三档对齐 Notion 段奏：short 64px（section）/ 标准 80px / tall 96px（section-lg） */
.band--tall {
  padding: calc(var(--section) * 1.2) 0;
}

.band--short {
  padding: calc(var(--section) * 0.8) 0;
}

/* 深红夜面：最深的段落带，与渐变带交替出节奏 */
.band--dusk {
  background: var(--red-deep);
}

/* 段顶发丝线：参考稿无描线，收起（main.js 写 --rule 无副作用） */
.band::before,
.head::before {
  display: none;
}

html.js .band {
  --rule: 0;
}

/* ---------- 通用卡片：奶油金卡（参考稿 .gold-card）---------- */
.card,
.story__row,
.split__item,
.index__row,
.creed__item,
.faq__item {
  background: linear-gradient(180deg, rgba(255, 247, 225, 0.96), rgba(255, 239, 196, 0.96));
  border: 1px solid var(--border-gold);
  border-radius: var(--r-card);
  box-shadow:
    0 20px 40px -20px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s-5);
  align-items: start;
  padding: var(--s-6);
}

/* 楷体大数字（参考稿 text-5xl font-kai deepRed） */
.card__no {
  grid-row: 1 / 3;
  font-family: var(--f-kai);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: var(--red-bright);
}

.card .display-sm {
  margin-top: 0;
}

.card .body {
  margin-top: var(--s-3);
  font-size: 15px;
}

/* ---------- 2 / 痛点：2×2 卡片阵，密实的簇 ---------- */
.grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
  margin-top: var(--s-7);
}

/* ---------- 3 / 产品功能：三张奶油金卡（参考稿 md:grid-cols-3），等高对齐 ---------- */
.story {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
  /* 默认 stretch：三张卡拉到同一行高，矮卡补白在底部 */
  align-items: stretch;
}

.story__row {
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
}

/* 圆徽标数字（参考稿 w-12 h-12 rounded-full bg-deepRed） */
.story__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-pill);
  background: var(--red-bright);
  font-family: var(--f-kai);
  font-size: 20px;
  font-weight: 700;
  color: var(--gold-light);
}

.story__text .display-md {
  margin-top: var(--s-5);
}

.story__text .body {
  margin-top: var(--s-4);
  max-width: none;
}

/* 侧栏内容直接流入卡内，不再自带卡感 */
.story__aside {
  margin-top: var(--s-5);
  padding: 0;
  background: transparent;
  border: 0;
}

.story__fine {
  margin-top: var(--s-5);
}

/* 标签：深红胶囊（参考稿 bg-deepRed text-lightGold） */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.chip {
  padding: var(--s-2) var(--s-4);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--red-bright);
  color: var(--gold-light);
  font-family: var(--f-sans);
  font-size: 13px;
  line-height: 1.4;
}

/* ---------- 规格行：卡内虚线金线定义列表（参考稿 dashed 边线） ---------- */
.spec__row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--s-5);
  padding: var(--s-4) 0;
  border-bottom: 1px dashed rgba(232, 197, 92, 0.6);
}

.spec__row:first-child {
  padding-top: 0;
}

.spec__row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.spec__label {
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--red-bright);
}

.spec__value {
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--body);
}

/* ---------- 4 / 办礼现场：居中段头 + 两张金卡（参考稿 scene 上半） ---------- */
.split {
  display: block;
}

.split__lead {
  position: static;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.split__lead .lead {
  margin-left: auto;
  margin-right: auto;
}

.split__items {
  margin-top: var(--s-8);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
  align-items: stretch;
}

.split__item {
  display: flex;
  flex-direction: column;
  padding: var(--s-7) var(--s-6);
}

/* 「免费」卖点：深红小字加粗（参考稿 text-sm font-bold text-deepRed） */
.split__tag {
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--red-bright);
}

.split__item .display-sm {
  margin-top: var(--s-3);
}

.split__item .body {
  margin-top: var(--s-4);
  font-size: 15px;
}

/* ---------- 5 / 使用场景：四张场景卡（参考稿 md:grid-cols-4） ---------- */
.index {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
  align-items: stretch;
}

.index__row {
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
}

.index__row .display-md {
  font-size: clamp(19px, 1.6vw, 22px);
}

.index__row .body {
  margin-top: var(--s-3);
  max-width: none;
  font-size: 14px;
}

.index__chips {
  margin-top: var(--s-4);
}

/* ---------- 6 / 免费 vs 会员：奶油金卡规格表，表头深红、行线虚金 ---------- */
.table {
  margin-top: var(--s-7);
  background: linear-gradient(180deg, rgba(255, 247, 225, 0.96), rgba(255, 239, 196, 0.96));
  border: 1px solid var(--border-gold);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow:
    0 20px 40px -20px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.table__row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px dashed rgba(232, 197, 92, 0.55);
  transition: background-color 0.2s var(--ease);
}

.table__row:last-child {
  border-bottom: 0;
}

.table__row:not(.table__row--head):hover {
  background: rgba(232, 197, 92, 0.12);
}

.table__row--head {
  background: var(--red-bright);
}

.table__row--head span {
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--gold-light);
}

.table__label {
  font-family: var(--f-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--red-main);
}

.table__free,
.table__pro {
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--body);
  text-align: center;
}

/* 会员列 = 权益列，朱红亮档加粗 */
.table__pro,
.table__row--head .table__pro {
  color: var(--red-bright);
  font-weight: 600;
}

.table__free--off {
  color: var(--muted);
}

/* ---------- 7 / 信任：四张承诺金卡（参考稿 数据安全 md:grid-cols-4） ---------- */
.creed {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
  align-items: stretch;
}

.creed__item {
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  text-align: center;
}

/* 居中对齐后行宽交给容器，标题不再自带 em 上限 */
.creed__item .display-sm {
  max-width: none;
}

.creed__item .body {
  margin: var(--s-3) auto 0;
  max-width: none;
  font-size: 14px;
}

/* ---------- 8 / 收尾：答疑 + 唯一一处扫码入口 ---------- */
.close__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(36px, 5vw, 64px);
  align-items: start;
}

.faq {
  margin-top: var(--s-6);
  display: grid;
  gap: var(--s-4);
}

.faq__item {
  padding: var(--s-3) var(--s-6);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding: var(--s-4) 0;
  font-family: var(--f-sans);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--red-main);
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q:hover {
  color: var(--interactive);
}

/* 加号 → 减号：两条实色线，靠 background-size 收掉竖线 */
.faq__q::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  opacity: 0.6;
  background-image: linear-gradient(var(--red-main), var(--red-main)),
    linear-gradient(var(--red-main), var(--red-main));
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 12px 1px, 1px 12px;
  transition: background-size 0.3s var(--ease), opacity 0.2s var(--ease);
}

.faq__q:hover::after {
  opacity: 1;
}

.faq__item[open] .faq__q::after {
  background-size: 12px 1px, 1px 0;
}

.faq__a {
  padding: 0 0 var(--s-5);
  max-width: 30em;
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
}

@keyframes faqOpen {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.faq__item[open] .faq__a {
  animation: faqOpen 0.3s var(--ease-out);
}

.close__cta .display-md {
  margin-top: var(--s-5);
}

.close__lead {
  margin-top: var(--s-4);
  max-width: 22em;
  color: var(--on-red-soft);
}

/* 入口面板（参考稿 start 区块）：深红渐变 + 金边 + 上下回纹虚线 */
.close__cta {
  position: relative;
  margin-top: var(--s-6);
  padding: var(--s-8);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-panel);
  background:
    radial-gradient(800px 400px at 20% 0%, rgba(232, 197, 92, 0.28), transparent 60%),
    linear-gradient(180deg, var(--red-main), var(--red-mid));
  overflow: hidden;
}

.close__cta::before,
.close__cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(232, 197, 92, 0.5) 0 6px,
    transparent 6px 12px
  );
}

.close__cta::before {
  top: 10px;
}

.close__cta::after {
  bottom: 10px;
}

/* 小程序码牌：奶油金卡上的白色实物，整体居中（用户指定） */
.plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--s-7);
  padding: var(--s-5);
  background: linear-gradient(180deg, rgba(255, 247, 225, 0.96), rgba(255, 239, 196, 0.96));
  border: 1px solid var(--border-gold);
  border-radius: 16px;
  text-align: center;
}

.plate__qr {
  display: block;
  width: min(200px, 56vw);
  padding: var(--s-3);
  background: var(--surface-white);
  border-radius: var(--r-md);
}

.plate__caption {
  margin-top: var(--s-3);
}

.steps {
  margin-top: var(--s-6);
  border-top: 1px solid rgba(232, 197, 92, 0.25);
}

.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) 0;
  border-bottom: 1px solid rgba(232, 197, 92, 0.25);
}

/* 步骤号：深红圆徽标（参考稿 w-8 h-8 rounded-full bg-deepRed） */
.step__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--red-bright);
  font-family: var(--f-kai);
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-light);
}

.step__text {
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--on-red-soft);
}

.close__fine {
  margin-top: var(--s-6);
}

/* ---------- 页脚：酒红基面 + 金发丝顶线（参考稿 footer） ---------- */
.footer {
  padding: var(--s-9) 0 var(--s-7);
  background: transparent;
  border-top: 1px solid rgba(232, 197, 92, 0.22);
  color: var(--on-red-soft);
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-7);
}

.footer__label {
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold-light);
}

.footer__link {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--on-red-soft);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.footer__link:hover {
  color: var(--gold);
}

/* 扫码入口是全站第二优先级转化点：墨面上靠米金提亮 + 加粗，不动用鎏金 */
.footer__link--cta {
  color: var(--on-red);
  font-weight: 600;
}

.footer__note {
  margin-top: var(--s-3);
  max-width: 22em;
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-red-soft);
}

.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(232, 197, 92, 0.18);
}

.footer__base .fine {
  color: var(--on-red-mute);
}

/* 备案链接：弱化色 + 去下划线，hover 提亮 */
.footer__beian {
  color: var(--on-red-mute);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.footer__beian:hover {
  color: var(--gold);
}

/* ==========================================================================
   动效
   母题仍是「落笔」：内容自左擦除显形，段顶与段首发丝线随滚动绘制，
   账本卡做深度视差，办礼现场左栏做黏性深度。
   ========================================================================== */

@keyframes writeIn {
  from {
    clip-path: inset(-2em 100% 0 0);
    opacity: 0;
  }
  to {
    clip-path: inset(-2em 0 0 0);
    opacity: 1;
  }
}

@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* —— 首屏入场序列 —— */
html.js .hero__wordmark,
html.js .hero__promise,
html.js .hero__sub,
html.js .hero__actions {
  animation: writeIn 0.8s var(--ease-out) both;
}

html.js .hero__wordmark {
  animation-delay: 0.14s;
  animation-duration: 1.1s;
}

html.js .hero__promise {
  animation-delay: 0.3s;
}

html.js .hero__sub {
  animation-delay: 0.4s;
}

html.js .hero__actions {
  animation-delay: 0.5s;
}

/* 账本卡整块浮起，行再逐行落笔 */
html.js .board {
  animation: riseIn 0.8s var(--ease-out) both;
  animation-delay: 0.56s;
}

html.js .board__row {
  animation: writeIn 0.6s var(--ease-out) both;
}

html.js .board__row:nth-child(1) {
  animation-delay: 0.7s;
}

html.js .board__row:nth-child(2) {
  animation-delay: 0.78s;
}

html.js .board__row:nth-child(3) {
  animation-delay: 0.86s;
}

html.js .board__row:nth-child(4) {
  animation-delay: 0.94s;
}

html.js .board__row:nth-child(5) {
  animation-delay: 1.02s;
}

html.js .board__row:nth-child(6) {
  animation-delay: 1.1s;
}

html.js .board__row:nth-child(7) {
  animation-delay: 1.18s;
}

html.js .board__row:nth-child(8) {
  animation-delay: 1.26s;
}

/* —— 滚动显现：类名由 main.js 注入，JS 不可用时内容默认可见 —— */
html.js .js-reveal {
  opacity: 0;
}

html.js .js-reveal.is-in {
  animation: writeIn 0.8s var(--ease-out) both;
  animation-delay: var(--d, 0s);
}

/* 卡片与列表行改用轻微上浮，与标题的擦除显形区分开 */
html.js .card.js-reveal.is-in,
html.js .spec__row.js-reveal.is-in,
html.js .table__row.js-reveal.is-in,
html.js .step.js-reveal.is-in,
html.js .creed__item.js-reveal.is-in {
  animation-name: riseIn;
  animation-duration: 0.7s;
}

/* 二维码：从略小处浮起，像一件实物落在页面上 */
html.js .plate.js-reveal.is-in {
  animation-name: riseIn;
  animation-duration: 0.8s;
}

/* 场景索引行：落笔慢一档，读起来更从容 */
html.js .index__row.js-reveal.is-in {
  animation-duration: 0.9s;
}

/* —— 滚动关联：账本卡深度视差（由 main.js 逐帧写入） —— */
html.js .board {
  will-change: transform, opacity;
}

/* —— 滚动关联：办礼现场左栏黏性深度 —— */
html.js .split__lead {
  will-change: opacity, transform;
}

/* —— 祥云缓漂（参考稿 cloud 动画的收敛版）—— */
@keyframes cloudDrift {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(22px);
  }
}

@keyframes cloudDriftFlip {
  0%,
  100% {
    transform: scaleX(-1) translateX(0);
  }
  50% {
    transform: scaleX(-1) translateX(22px);
  }
}

.orn__cloud--tl {
  animation: cloudDrift 9s ease-in-out infinite;
}

.orn__cloud--tr {
  animation: cloudDriftFlip 11s ease-in-out infinite;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  :root {
    --section: 64px;
    --gut: 24px;
  }
}

@media (max-width: 960px) {
  .story,
  .index,
  .creed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .close__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-7);
  }

  .footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-8) var(--s-6);
  }
}

@media (max-width: 768px) {
  :root {
    --section: 48px;
    --gut: 16px;
  }

  /* 移动端首屏高度有限，撤回桌面端 120px 顶部留白 */
  .hero__stage {
    padding-top: var(--s-8);
  }

  .nav__bar {
    grid-template-columns: 1fr auto;
  }

  .nav__menu {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--nav-h);
    z-index: 49;
    justify-self: stretch;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0 var(--gut);
    background: rgba(26, 3, 8, 0.97);
    border-bottom: 1px solid var(--border-red);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  }

  .nav--open .nav__menu {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  /* 下拉面板是深红底，链接保持淡金 */
  .nav--open .nav__link {
    color: var(--gold-light);
  }

  .nav--open .nav__link:hover {
    color: var(--gold-bright);
  }

  .nav__link {
    padding: var(--s-5) 0;
    border-bottom: 1px solid rgba(232, 197, 92, 0.18);
    width: 100%;
  }

  .nav__toggle {
    display: inline;
  }

  .nav__cta {
    display: none;
  }

  .grid2 {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-4);
  }

  /* 首屏双栏改单列：文字在上，账簿卡在下；撤回桌面端 100px 右移 */
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-8);
  }

  .hero__col {
    margin-left: 0;
    margin-top: 0;
  }

  /* 墨迹：缩小 —— 礼簿竖排贴右上缘，随字探在礼簿页上方 */
  .ink--hero .ink__glyph--lb {
    top: 5%;
    right: -7%;
    font-size: clamp(90px, 20vw, 140px);
    transform: translateY(0);
  }

  .ink--hero .ink__glyph--sui {
    top: auto;
    bottom: 27%;
    left: auto;
    right: -14%;
    font-size: clamp(180px, 48vw, 280px);
    transform: translateY(0) rotate(10deg) scaleY(1.15);
  }

  /* 金饰：小屏只留细金内框与角饰，祥云金点收掉 */
  .orn__cloud,
  .orn__dots {
    display: none;
  }

  /* 账簿卡：单列下满宽铺开，撤回左移；行距收紧 */
  .board {
    justify-self: stretch;
    max-width: none;
    margin-right: 0;
  }

  .hero__wordmark {
    margin-top: 0;
  }

  .hero__promise {
    margin-top: calc(var(--s-5) + 20px);
  }

  .board__row {
    padding: var(--s-2) var(--s-3);
  }

  /* 金卡栅格全部退到单列 */
  .story,
  .index,
  .creed,
  .split__items {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 首屏按钮撑满更易点 */
  .hero__actions .btn {
    width: 100%;
  }

  .table__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2);
    padding: var(--s-5) var(--s-6);
  }

  .table__row--head {
    display: none;
  }

  .table__free::before {
    content: "免费 · ";
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--muted);
  }

  .table__pro::before {
    content: "会员 · ";
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--muted);
  }

  .spec__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2);
  }

  /* 窄屏恢复换行，避免单行溢出 */
  .note {
    white-space: normal;
  }

  .footer__cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer__base {
    flex-direction: column;
  }
}

/* ---------- 无障碍：尊重减弱动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html.js .hero__wordmark,
  html.js .hero__promise,
  html.js .hero__sub,
  html.js .hero__actions,
  html.js .board,
  html.js .board__row,
  html.js .js-reveal,
  html.js .js-reveal.is-in,
  .faq__item[open] .faq__a {
    opacity: 1;
    transform: none;
    animation: none;
    clip-path: none;
  }

  /* 呼吸金光与祥云漂移一并静止 */
  .hero .btn--cta,
  .orn__cloud--tl,
  .orn__cloud--tr {
    animation: none;
  }

  html.js .board {
    transform: none !important;
    opacity: 1 !important;
    will-change: auto;
  }

  html.js .split__lead {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
  }

  /* 墨迹：保留底图，只取消显影与视差 */
  html.js .ink--hero {
    animation: none;
    opacity: 1;
  }

  .ink__glyph {
    transform: none !important;
    will-change: auto;
  }

  .ink--hero .ink__glyph--lb {
    transform: translateY(-50%) !important;
  }

  .ink--hero .ink__glyph--sui {
    transform: translateY(-50%) rotate(10deg) scaleY(1.15) !important;
  }

  html.js .head::before,
  html.js .band::before {
    transform: scaleX(1);
  }

  .btn,
  .nav__link,
  .footer__link,
  .table__row,
  .faq__q::after {
    transition: none;
  }
}