/* ===============================================================
   EasyNotes — 首页样式 (home.css)
   区块底色取自 Figma「官网建设」EasyNotes 桌面稿 3623:1931：
     Hero #FFFBE7 · Social proof #FFFCF5 · Features #FFF
     Use Cases #FFFCF5 · Personalization #FFF
     Reviews #FFFCF5 · FAQ #FFF · CTA #48B0FD · Footer #FFFCF5
   =============================================================== */

body {
  background: var(--color-white);
}

.home-page .section-head .section-subtitle {
  font-size: var(--fs-18);
}

/* ===============================================================
   1. HERO + SOCIAL PROOF
   =============================================================== */
.first-screen {
  display: flex;
  flex-direction: column;
  padding-top: var(--nav-h);
}

.hero {
  background: var(--color-cream-yellow);
  overflow: hidden;
  display: flex;
  position: relative;
  min-height: clamp(430px, 40vw, 576px);
}

.hero-grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  width: min(100%, 1344px);
  max-width: 1344px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

.hero-copy {
  position: relative;
  z-index: 1;
  /* 设计稿文案块宽 590px，60px 标题在此宽度内维持两行 */
  max-width: 590px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.2375;         /* 设计稿 74.25 / 60 */
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.hero-badges {
  margin-top: clamp(36px, 5vw, 72px);
}

.hero-art {
  position: absolute;
  bottom: 0;
  right: 0;
  width: min(74vw, 1060px);
  z-index: 0;
}

.hero-art img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

@media (min-width: 1441px) {
  .hero {
    min-height: clamp(600px, 35vw, 720px);
  }

  .hero-grid {
    max-width: 1344px;
  }

  .hero-art {
    /* 1600 设计画布：插画宽 1130 = 70.625% x 1600，右缘贴画布右边。
       宽度必须在 1600 处封顶——继续跟着 vw 长会把插画的左半边往标题里推：
       Personal 便签左缘 = 画布左 + 23.89% x 插画宽，原来的 1356px 上限让它
       从 1877px 视口起就压住标题（1920/2560 实测压 56px）。
       封顶后 >1600 的屏幕就是「1600 稿整体居中」：标题字尾到便签的间距
       恒为 116px，和 1440 设计稿的 118px 一致。
       改宽度要连着 right 一起改，两者共用同一块 1600 画布。 */
    width: min(70.625vw, 1130px);
    right: max(0px, calc((100vw - 1600px) / 2));
  }

  .hero-copy { max-width: 660px; }
}

/* ===============================================================
   2. SOCIAL PROOF
   =============================================================== */
.social-proof {
  background: var(--color-cream);
  /* buglist 第 8/26 条：上下留白一致；
     第 9 条标注桌面此条带约 100px，高度由内容+对称 padding 得出，不写死。
     第 7 条：18px 观感偏挤，上下同步放到 28（条带总高约 132）。
     注意这份留白与 hero 共用 .first-screen 的 100vh 预算，改 hero 高度时要连着复核。 */
  padding: 28px 0;
}

.proof-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 46px;
  flex-wrap: wrap;
}

.proof-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 桌面端用对称侧列锁住中轴：左右数据块等宽，中间数据块不受文案宽度影响。 */
@media (min-width: 900px) {
  .proof-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    max-width: 800px;
  }

  .proof-item {
    width: 100%;
    justify-content: center;
  }

  .proof-item-lg {
    width: max-content;
  }

  .proof-item:not(.proof-item-lg) .proof-body {
    width: 132px;
    min-width: 132px;
  }
}

.laurel {
  width: auto;
  height: 66px;
  flex-shrink: 0;
}

.proof-item-lg .laurel {
  height: 84px;
}

.proof-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 118px;
}

.proof-icon {
  width: 26px;
  height: 26px;
  color: #763D03;
  margin-bottom: 2px;
}

.proof-icon-star {
  color: var(--color-star);
}

.proof-avatars {
  display: flex;
  margin-bottom: 4px;
}

.proof-avatars img {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-cream);
}

.proof-avatars img + img {
  margin-left: -9px;
}

/* buglist 8/31 第 4/12 条：中文数值形如「3000万+」，CJK 之间到处是断行点，
   窄屏上「+」会被甩到下一行。数值是一个整体，任何语言都不许拆。 */
.proof-value {
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: 800;
  color: #763D03;
  line-height: 1.2;
}

.proof-value-lg {
  font-size: var(--fs-28);
}

.proof-label {
  font-size: var(--fs-label);
  font-weight: 700;
  color: #763D03;
}

/* ===============================================================
   3. FEATURES — 4 个图文交替块
   =============================================================== */
.features {
  background: var(--color-white);
  padding: var(--section-padding);
}

.feature-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  padding: 40px 56px;
  margin-bottom: 28px;
  background: var(--color-cream);
  border-radius: var(--radius-xl);
}

.feature-block:last-child {
  margin-bottom: 0;
}

/* 反转左右：用 direction 翻转列序，子元素恢复 ltr */
.feature-block.reverse {
  direction: rtl;
}

.feature-block.reverse > * {
  direction: ltr;
}

.feature-media {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 四张配图统一高度（设计稿各卡片等高，不同纵横比按 contain 缩放居中） */
.feature-media img {
  width: auto;
  max-width: 100%;
  height: 440px;
  object-fit: contain;
}

.feature-badge {
  display: inline-block;
  padding: 4px 12px;
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--color-ink);
  border-radius: var(--radius-full);
  margin-bottom: 14px;
}

.badge-organize { background: #FFD919; }
.badge-edit     { background: #94E130; }
.badge-widget   { background: #FAD0F6; }
.badge-sync     { background: #FFA24D; }

.feature-copy h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-ink);
  margin-bottom: 14px;
  /* buglist 第 9 条：原来的 max-width:14ch 把标题硬掐在 14 字符，英文四条全被迫折行。
     去掉限制后英文单行；德/葡/法译文本来就超出列宽，balance 保证折行时两行长度均匀。 */
  text-wrap: balance;
}

.feature-copy p {
  font-size: var(--fs-md);   /* buglist 第 11 条：正文 18（移动端断点降回 16） */
  line-height: 1.7;
  color: var(--color-ink);
  max-width: 46ch;
}

/* ===============================================================
   4. USE CASES — 6 张场景卡
   =============================================================== */
.use-cases {
  background: var(--color-cream);
  padding: var(--section-padding);
}

/* use-cases 独立页：三列静态网格（换行）。
   首页由 .home-page 前缀的规则改成连续轮播轨道，见下。 */
.usecase-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.usecase-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px 22px 0;
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  flex: 0 0 calc((100% - 48px) / 3);
}

/* 首页 Use Cases：与 User Reviews 移动端同一套连续滚动（无分页圆点）。
   轨道 width:max-content 溢出容器，两侧由 .container 裁掉，
   平移由 JS 负责（main.js 第 7 节 initMarquee）。 */
.home-page .use-cases .container { overflow: hidden; }

.home-page .usecase-grid {
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
}

/* 轨道是 max-content，百分比基准失效，得给定宽 */
.home-page .usecase-card {
  flex: 0 0 min(384px, 84vw);
}

/* 补位克隆体默认被 .marquee-clone{display:none} 藏起（那条规则服务 Reviews 桌面网格），
   Use Cases 的轨道所有宽度都在滚，克隆体要一直可见 */
.home-page .usecase-grid .marquee-clone { display: flex; }

/* 减少动效时不自动平移，改成能自己横滑的一行 */
@media (prefers-reduced-motion: reduce) {
  .home-page .use-cases .container { overflow: visible; }

  .home-page .usecase-grid {
    width: auto;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .home-page .usecase-grid::-webkit-scrollbar { display: none; }
  .home-page .usecase-card { scroll-snap-align: start; }
  .home-page .usecase-grid .marquee-clone { display: none; }
}

.usecase-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.usecase-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.usecase-emoji {
  font-size: var(--fs-22);
  line-height: 1;
}

.usecase-card h2,
.usecase-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--color-ink);
}

.usecase-card p {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--color-slate);
  margin-bottom: 20px;
}

/* buglist 8/31 第 1 条：六张 use case 配图原先是 1.777 / 1.509 / 1.333 三种比例，
   而这里的框写死 16/10(1.6)，contain 就按各自比例做信箱留白 —— 有的贴底、有的
   底部空一截，横向留白也从 0 到 27px 不等。现在六张已统一重出为 1168x824，
   框比例跟着改成一样，contain 正好铺满，一点留白都不产生。
   改图必须同步改这里和 <img> 的 width/height 三处。 */
.usecase-card img {
  width: 100%;
  max-width: 100%;
  margin: auto 0 0;
  aspect-ratio: 1168 / 824;
  object-fit: contain;
  object-position: center;
}

/* ===============================================================
   5. PERSONALIZATION
   =============================================================== */
.personalization {
  background: var(--color-white);
  padding: var(--section-padding);
}

.pers-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px;
}

.pers-card {
  display: flex;
  flex-direction: column;
  grid-column: span 6;
  background: var(--color-cream-pers);
  border-radius: var(--radius-lg);
  /* buglist 第 13/31 条：内容距各边框留白一致 */
  padding: 26px 26px 0;
  overflow: hidden;
}

.pers-card.pers-wide {
  grid-column: span 12;
}

/* Handwriting 与 Sticker 两卡等宽（8/29 反馈的参考图）：
   贴纸架与示例笔记按各自原比例并排、都不裁切，视觉体量与左卡的活页纸相当。 */
.pers-card:nth-child(2) { grid-column: span 6; }
.pers-card:nth-child(3) { grid-column: span 6; }
/* Font 1161×891（近方） : Widget 1600×712（宽） = 5 : 7 */
.pers-card:nth-child(4) { grid-column: span 5; }
.pers-card:nth-child(5) { grid-column: span 7; }

.pers-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 18px;
}

/* buglist 第 12/13/31 条：五张图都完整展示（不裁切），比例适中、留白一致。
   限高只调这一个变量，不要在别处再覆盖 .pers-card img。 */
.pers-card {
  --pers-img-max-h: 300px;
}

.pers-card img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: var(--pers-img-max-h);
  object-fit: contain;
  margin: auto auto 0;
}

/* 图挂到卡片底边：行高由最高的卡决定，多出来的空间留在标题与图之间，
   保证任何宽度（含 ≥1440）下文字与图片都有间距、图不贴文字。 */
.pers-card > picture,
.pers-card > .pers-pair {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: auto;
}

/* Note Backgrounds 横向色板整宽铺开 */
.pers-card.pers-wide img {
  width: 100%;
}

/* Sticker 卡按参考图并排放贴纸架与示例笔记：两列等分卡宽，
   各自按原比例完整显示（654×602 与 845×879，都不裁切）；
   示例笔记更高，底对齐后贴纸架自然浮在上半区，与参考图一致。
   首页与 resources 页共用（resources 也加载 home.css）。 */
.pers-card > .pers-pair {
  gap: 16px;
  width: 100%;
}

.pers-pair picture {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* 等分：两图在各自列内按 max-height 收缩，列宽不被原图宽度带偏 */
  flex: 1 1 0;
  min-width: 0;
}

.pers-pair img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: var(--pers-img-max-h);
  margin: 0;
}

/* ===============================================================
   6. TESTIMONIALS
   =============================================================== */
.testimonials {
  background: var(--color-cream);
  padding: var(--section-padding);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
  padding-top: 11px;   /* 给第一行溢出的便利贴留位置 */
}

.testimonial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 22px 20px;
  border-radius: var(--radius-lg);
}

/* 补位克隆体只服务移动端轮播。默认隐藏——在移动端建好克隆后把窗口拉回桌面，
   网格里会多出 6 张重复卡（实测 12 张卡排成 4 行）。 */
.marquee-clone { display: none; }

/* buglist 第 17/34 条：便利贴色块 83×22，对称溢出——一半在卡外、一半在纸上 */
.testimonial-card::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  width: 83px;
  height: 22px;
  border-radius: 4px;
  background: var(--tone-tab);
}

.tone-yellow { background: #FFFAE0; --tone-tab: #FFE9A8; }
.tone-blue   { background: #EDF6FA; --tone-tab: #DDF0FF; }
.tone-green  { background: #F3FAEC; --tone-tab: #E8F7E4; }
.tone-pink   { background: #FFF0F0; --tone-tab: #FFE4EC; }
.tone-orange { background: #FFF4E5; --tone-tab: #FFEBD6; }
.tone-purple { background: #F1F2FA; --tone-tab: #E4E6F7; }

.testimonial-card .stars {
  font-size: var(--fs-12);   /* buglist 第 15/33 条 */
  letter-spacing: 0.12em;
  color: var(--color-star);
  margin-bottom: 12px;
}

.testimonial-card blockquote {
  flex: 1;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--color-navy);
  margin-bottom: 18px;
  text-wrap: pretty;
}

.testimonial-card figcaption {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-label);
  color: var(--color-navy-deep);
}

.testimonial-card figcaption img {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
}

/* ===============================================================
   7. FAQ
   =============================================================== */
.faq {
  background: var(--color-white);
  padding: var(--section-padding);
}

.faq-panel {
  max-width: 860px;
  margin: 0 auto;
  padding: 8px 34px;
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 34px rgba(7, 27, 61, 0.1);
}

.faq-item + .faq-item {
  border-top: 1px solid var(--color-primary-pale);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: 600;
  color: #071B3D;
}

/* Approved notebook-hole decoration with its original soft shadow. */
.faq .faq-question::before {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background: url('../assets/images/ui/faq-hole.webp?v=58ab915da990') center / contain no-repeat;
}

.faq .faq-question > span {
  flex: 1;
}


.faq-item.active .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.faq-answer p {
  padding: 0 0 22px;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--color-slate);
}

.faq-more,
.section-more {
  text-align: center;
  margin-top: 36px;
}

.faq-more .btn {
  border-radius: var(--radius-sm);
}

/* ===============================================================
   9. 响应式
   =============================================================== */
@media (max-width: 1180px) {
  .hero-copy { max-width: min(42vw, 480px); }
  .hero-art { width: 74vw; }
  .hero-badges { margin-top: 56px; }
  .feature-block { padding: 32px 36px; gap: 28px; }
}

@media (max-width: 1024px) {

  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }

  /* Font(1161×891) 与 Widget(1600×712) 的列宽比 5:7 是按图比例定的，
     平板上也得留着：压成 6:6 后两张图高度差 120+ px，全落在 Widget 的
     标题与图之间（8/29 反馈）。 */
  .pers-card:nth-child(2),
  .pers-card:nth-child(3) { grid-column: span 6; }
  .pers-card.pers-wide { grid-column: span 12; }

  .pers-card h3 { font-size: var(--fs-24); }

}

@media (max-width: 768px) {
  .home-page .section-head .section-subtitle {
    font-size: var(--fs-body);
  }

  /* 移动端不再拉满视口（首屏契约仅在 ≥769px 生效）：hero 高度由内容决定，
     否则 1fr 行会把文案和插画撑开成一大片空白 */
  .first-screen { min-height: 0; }
  .hero { height: auto; }

  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 0;
    text-align: center;
    /* Header 56px，标题距 Header 24px（与旧版 64+24 的观感一致，不能更大） */
    padding: 24px 24px 0;
  }

  .hero-title {
    font-size: var(--fs-hero);   /* 36px，见 common.css 断点 */
    max-width: none;
    margin: 0 auto;
  }

  /* buglist 第 25 条：移动端下载按钮改为两行堆叠；
     两枚之间与标题之间的竖向间距收紧。
     尺寸不跟 CTA 徽章走：这里沿用全站移动端 24/12/14 的基础规格。 */
  .hero-badges {
    margin: 20px auto 0;
    grid-auto-flow: row;
    justify-items: center;
    gap: 8px;
    /* 第 24 条：按内容收缩后每枚只有约 160px，观感太窄。
       定宽 240（约内容区 343 的 70%），两枚等宽堆叠居中，内容仍左对齐。 */
    width: 240px;
  }

  /* 移动端回到上下堆叠，批准的平板/手机拼贴满幅贴住 hero 底边。 */
  .hero-copy { max-width: none; }
  /* 移动端换竖版拼贴、整张完整展示，回到静态流内 */
  .hero-art {
    position: static;
    top: auto;
    width: auto;
    max-width: none;
    margin: 32px -24px 0;
  }

  .hero-art img {
    width: 100%;
    max-width: none;
    margin: 0 auto -2px;
  }

  .proof-row { gap: 10px; }
  .laurel { height: 46px; }
  .proof-item-lg .laurel { height: 56px; }
  .proof-body { min-width: 84px; }
  .proof-value-lg { font-size: var(--fs-26); }
  .proof-label { font-size: var(--fs-11); }

  /* buglist 第 28 条：移动端 features 文字靠左 */
  .feature-block {
    /* minmax(0,1fr)：1fr 的 auto 最小值 = 最宽子项的 max-content，横构图配图
       按高 310px 算宽 351px，会把整列（含文案）撑到 351px 顶出 283px 内容盒，
       再被 overflow:hidden 削掉右侧 ——「配图右缘被裁」「正文右侧被裁」同一个因。 */
    grid-template-columns: minmax(0, 1fr);
    padding: 28px 22px;
    gap: 20px;
    text-align: left;
    overflow: hidden;
  }

  .feature-block.reverse { direction: ltr; }

  /* 移动端统一图在上、文案在下 */
  .feature-media {
    order: -1;
    /* 配图吃掉卡片左右 padding，用满 327px 卡宽 */
    margin: 0 -22px;
  }

  /* 四张配图统一渲染高度（桌面同款约束搬到移动端）：竖构图（Organize/Widget）
     与横构图（Edit/Sync）等高呈现。盒子恒为 310px 高，画面用 contain 内缩，
     横构图自然留上下留白，宽度绝不超卡。 */
  .feature-media img {
    height: min(310px, 88vw);
    max-height: none;
    width: 100%;
    max-width: 100%;
  }

  .feature-copy h3,
  .feature-copy p { max-width: none; }

  /* User Reviews：移动端单行自动轮播（桌面与平板仍是网格，见基础规则）。
     轨道 width:max-content 溢出容器，两侧由 .testimonials .container 裁掉；
     平移由 JS 负责（main.js 第 7 节）。 */
  .testimonials .container { overflow: hidden; }

  .testimonial-grid {
    display: flex;
    width: max-content;
    gap: 16px;
    will-change: transform;
  }

  .testimonial-card {
    width: min(300px, 78vw);
    flex: 0 0 auto;
  }

  .testimonial-grid .marquee-clone { display: flex; }

  /* 减少动效时不自动平移，改成能自己横滑的一行，
     否则轨道停在 0 位、后面几条永远被 overflow 裁掉看不到 */
  @media (prefers-reduced-motion: reduce) {
    .testimonials .container { overflow: visible; }

    .testimonial-grid {
      width: auto;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }

    .testimonial-grid::-webkit-scrollbar { display: none; }
    .testimonial-card { scroll-snap-align: start; }
    .marquee-clone { display: none; }
  }

  .usecase-grid { gap: 16px; }

  .usecase-card,
  .home-page .usecase-card {
    flex-basis: min(320px, 84vw);
  }

  .pers-card,
  .pers-card:nth-child(n),
  .pers-card.pers-wide { grid-column: span 12; }

  /* 五张卡的图区限高 180，卡高由图自身高度决定。
     图区不再固定 180 高：横图（如 font-mobile 2.29:1）撑不满槽位时，
     多出来的空隙会全部落在标题与图之间（8/29 反馈）。移动端每行只有一张卡，
     不需要等高，让图区高度跟着图走，标题与图之间就永远只有 h3 的 18px。 */
  .pers-card {
    --pers-img-max-h: 180px;
  }

  .pers-card > picture,
  .pers-card > .pers-pair {
    width: 100%;
    margin-top: auto;
  }

  .pers-card > picture img { max-height: var(--pers-img-max-h); }

  /* 移动端 Sticker 只留贴纸架（sticker-mobile 已是合图），示例笔记那张放不下 */
  .pers-pair .pers-sticker-secondary { display: none; }
  .pers-pair img { max-height: var(--pers-img-max-h); }

  /* 移动端 Note Backgrounds 换窄版横排（note-background-mobile，1476×674，
     由 <picture> 按断点切换）：只保留中间 5 张背景卡 + Daily Plan 手机，
     整宽完整展示、不裁切。必须解除上面 --pers-img-max-h:220px 的钳制。 */
  .pers-card.pers-wide img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    margin: auto auto 0;
  }

  /* ---------------------------------------------------------------
     首页 personalization 移动端：改用「整卡去标题」配图。
     稿子 = EasyNotes手机端(3623:3207) → 个性化-手机。规则是卡片里除标题以外
     的一切（米黄底 #FFFCF5、12.75px 圆角、插画及其出血裁切）都烘进一张图，
     标题保持真实文字（i18n / SEO），按稿子里相对卡片的 top / leading 叠上去。
     top/leading 用 % 表达，跟着卡宽等比缩放。

     五张卡在稿子里的实测值（设计 px，卡宽×卡高 → 标题 top / leading）：
       Note Background       332x190   21.50 / 19.50
       Handwriting Template  332x190   23.25 / 17.50
       Sticker               339x190   23.50 / 28.75
       Font                  342x190   25.50 / 29.50
       Widget                338x190   31.50 / 28.25
     —— 卡宽和标题位置逐卡不同是稿子本身画歪了，不是测量误差；这里按稿还原，
     卡宽差异由 width:100% 抹平。

     只作用于首页：resources 页每张卡多一段描述文字，稿子里没有那个版式。
     --------------------------------------------------------------- */
  .home-page .pers-card {
    position: relative;
    display: block;
    padding: 0;
    background: transparent;
    border-radius: 0;
  }

  .home-page .pers-card > picture,
  .home-page .pers-card > .pers-pair {
    display: block;
    width: 100%;
    margin: 0;
  }

  /* aspect-ratio 必须显式给：<img> 上的 width/height 属性是桌面版原图的尺寸，
     移动端走 <source> 时，浏览器在图片真正加载完之前仍按 img 属性算高度 ——
     卡高先错一帧（标题的 top:% 跟着错），加载完再跳一次。既是 CLS，也肉眼可见。 */
  .home-page .pers-card img,
  .home-page .pers-card.pers-wide img,
  .home-page .pers-pair img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    margin: 0;
    aspect-ratio: var(--pers-card-ar);
  }

  /* 标题落点：--pers-title-top 是稿子里的「字面顶」（cap top），
     --pers-title-cap 把它换算成 CSS 的文本框顶（实测标定，见 HANDOFF）。 */
  .home-page .pers-card h3 {
    position: absolute;
    top: calc(var(--pers-title-top) - var(--pers-title-cap));
    left: var(--pers-title-left);
    max-width: calc(100% - var(--pers-title-left) - 16px);
    margin: 0;
    font-size: var(--pers-title-size);
    line-height: 1;
    font-weight: 700;
  }

  /* 18px/700 是反解出来的：把英文标题按 18px/700 画出来，墨迹宽度与稿子实测
     的偏差是 Sticker +0.07 / Font +0.66 / Widget -0.24 px。
     --pers-title-cap = 0.1717em：Plus Jakarta Sans 在 line-height:1 下，
     文本框顶到「字面顶」(cap top) 的距离。稿子量的是字面顶，CSS 的 top 定的是
     文本框顶，差这一截。 */
  .home-page .pers-grid {
    --pers-title-size: 18px;
    --pers-title-cap: 0.1717em;
  }

  /* --pers-title-top  = 稿子里字面顶相对卡片的位置 ÷ 卡高
     --pers-title-left = 稿子里墨迹左沿减去该字母的左边距(LSB) ÷ 卡宽
                         （N/H/F 的 LSB=1.29px，S=0.69，W=0.20；不减的话
                          换成别的语言首字母变了就偏） */
  .home-page .pers-card:nth-child(1) { --pers-card-ar: 332 / 190;    --pers-title-top: 11.316%; --pers-title-left: 5.485%; }
  .home-page .pers-card:nth-child(2) { --pers-card-ar: 332 / 190;    --pers-title-top: 12.237%; --pers-title-left: 4.883%; }
  .home-page .pers-card:nth-child(3) { --pers-card-ar: 339 / 190;    --pers-title-top: 12.368%; --pers-title-left: 8.277%; }
  .home-page .pers-card:nth-child(4) { --pers-card-ar: 342 / 189.75; --pers-title-top: 13.439%; --pers-title-left: 8.249%; }
  .home-page .pers-card:nth-child(5) { --pers-card-ar: 338 / 190;    --pers-title-top: 16.579%; --pers-title-left: 8.298%; }

  .faq-panel { padding: 4px 20px; }
  .faq-question { font-size: var(--fs-16); padding: 18px 0; }

}

@media (max-width: 480px) {
  /* 三组数据必须排在同一行（对齐移动端设计稿）。
     buglist 第 26 条：桂冠之间留出间距，30M 字号调小一档 */
  /* buglist 8/31 第 14 条：窄屏放不下三组数据时，.proof-body 被压到内容宽度
     以下，标签就横着压过左右两side的麦穗（印尼语 "Pilihan Pengguna" 最明显）。
     实测 375px 下标签要 218px 才排得开，比现状多 52px —— 先从间距和容器
     内边距里挤出 58px，让绝大多数语言仍是一行；再给标签解除 nowrap 作为兜底，
     真排不下就折行，而不是溢出去盖住麦穗。数值本身仍禁止折行（第 4/12 条）。 */
  .proof-row { gap: 8px; flex-wrap: nowrap; }
  .social-proof .container { padding-inline: 8px; }
  .proof-item { gap: 3px; }
  .laurel { height: 32px; }
  .proof-item-lg .laurel { height: 44px; }
  .proof-body { min-width: 0; padding: 0; }
  .proof-icon { width: 20px; height: 20px; }
  .proof-avatars img { width: 22px; height: 22px; }
  .proof-value { font-size: var(--fs-15); }
  .proof-value-lg { font-size: var(--fs-20); }
  .proof-label { font-size: var(--fs-10); white-space: normal; }
}