/* 05-intro.css
   介绍页（intro.html）：暖橙氛围 + 档案纸感。桌面为主，向下兼容到 320px。
   结构：首屏（含证据带）→ 痛点 → 四件事 → 五步循环 → 中段 CTA → 客户案例（结果主导）
        → 首月免费试用 → 常见问题 → 尾部 CTA。

   英文走 intro-i18n.js 就地替换文案，字比中文宽约 1.5 倍，
   所以凡是「按中文长度定死宽度」的地方都有一条 html[lang="en"] 例外，收在文件末尾段。 */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* H5：关掉安卓点按时的灰色高亮块，按压反馈改由下面的 (hover:none) :active 提供 */
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, .metric, .stat-num {
  font-family: "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
  letter-spacing: .4px;
}

h1, h2, h3, p, figure, ol, li { margin: 0; }
ol { padding: 0; list-style: none; }
img { max-width: 100%; }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

section { padding: 88px max(20px, calc((100% - 1120px) / 2)); }

/* 吸顶导航有 66px 高：不加这一条，点导航跳到 #proof / #faq 时标题正好被盖住。 */
section[id] { scroll-margin-top: 84px; }

/* ---------- buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.button-primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 8px 20px rgba(194,65,12,.24);
}
.button-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(194,65,12,.3); }
.button-ghost {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}
.button-ghost:hover { transform: translateY(-1px); box-shadow: var(--s2); }
.button:disabled { opacity: .6; cursor: progress; transform: none; box-shadow: none; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 22px;
  width: min(100% - 40px, 1120px);
  margin: 0 auto;
  padding: 14px 0;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  /* 滚动后由 intro.js 挂 .is-scrolled：移动端没有常驻滚动条，
     不加这条 hairline，正文会从毛玻璃底下直接「贴」上来，header 和内容粘成一片。 */
  transition: border-color .3s var(--ease);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .site-header { background: var(--bg); }
}

.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--ambient-top), var(--primary));
  color: #fff;
  font-family: "Songti SC", serif;
  font-size: 19px;
  box-shadow: 0 6px 14px rgba(194,65,12,.26);
}
.brand-copy { display: grid; line-height: 1.25; }
.brand-copy b { font-size: 16px; letter-spacing: .5px; white-space: nowrap; }
.brand-copy small { color: var(--ink-3); font-size: 12px; }

.site-nav { display: flex; gap: 24px; margin-left: auto; font-size: 14px; color: var(--ink-2); }
.site-nav a { white-space: nowrap; }
.site-nav a:hover { color: var(--primary); }

.header-demo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.header-demo:hover { border-color: var(--primary); color: var(--primary); }

/* 主导航只有一个动作：免费试用。演示退到次按钮，跟首屏的两个 CTA 同一层级。 */
.header-cta {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 18px;
  border-radius: var(--r-full);
  background: var(--primary);
  color: var(--on-primary);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(194,65,12,.22);
}
.header-cta:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(194,65,12,.28); }

.lang-switch {
  flex: none;
  min-width: 44px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--ink-2);
  font: 600 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
.lang-switch:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

/* ---------- hero ---------- */
/* 两栏：左文案 + 右三张截图。
   左栏从 1.05fr 放宽到 1.12fr：h1 一行 12 个全角字，42px 时已经贴到 545px 的边，
   再放大就得先给栏宽 —— 现在 568px 能放到 46px。 */
.hero {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  align-items: center;
  gap: 44px;
  padding-top: 56px;
  padding-bottom: 72px;
  background:
    radial-gradient(120% 80% at 78% 0%, var(--ambient-soft) 0%, rgba(251,227,184,0) 60%),
    radial-gradient(90% 60% at 8% 0%, rgba(245,169,63,.22) 0%, rgba(245,169,63,0) 62%);
}

/* 首屏唯一一个标签：素字 + 一道短线，不用药丸。
   药丸底 + 圆点是 SaaS 首屏的标配，纸感那套本来就没有这个零件；
   改成细线小字之后，它跟下面每一节的 .section-kicker 是同一套零件。 */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--primary-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
}
.eyebrow i { width: 28px; height: 1px; background: currentColor; opacity: .5; }

/* 两行各 12 个字。46px 下一行要 557px，栏宽 568px —— 余 11px，再多就得先动栏宽。
   高亮从「整句」收到「一直来」这三个字，上下两行各一次：这两行是靠这个原词顶真接起来的，
   把它标出来，承接才看得见（旧版高亮挂在第一行的从句上，读者第一眼抓到的是半句话）。 */
.hero h1 {
  margin: 18px 0 20px;
  font-size: clamp(29px, 3.6vw, 46px);
  line-height: 1.24;
  font-weight: 700;
  /* 英文在窄屏会把 "steadily." 甩成单独一行（实测 375–390px 都中）。
     pretty 专治这种末行孤词；balance 试过，375px 下 "steadily." 仍孤着。
     中文两个断点都已是整行，不受影响；不支持 pretty 的浏览器退回普通断行。 */
  text-wrap: pretty;
}
.hero h1 em {
  font-style: normal;
  color: var(--primary);
  background: linear-gradient(180deg, transparent 62%, var(--primary-soft) 62%);
}
/* 窄屏断点：一行 12 个全角字 + 字距 ≈ 377px，栏宽 = vw − 40，
   视口 < ~420px 就放不下一整行，会从「来。」后面断出一个孤字。
   与其让浏览器瞎断，不如按句读断成四短行（懂客户，/ 客户才会一直来。/ 一直来，/ 生意才稳定增长。）。
   第二行拆成两个 span（em 一个、收脚一个）就是为了这四行：不拆的话
   「一直来，生意才稳定增长。」12 个字仍然超宽，会二次折行把「增长。」甩成孤行。
   只对中文生效：英文是词间换行，块级断行反倒会把 "steadily." 这种词甩到单独一行。
   桌面端 .h1-soft 是 inline，只靠上面那个 <br> 分两行。 */
@media (max-width: 460px) {
  html:not([lang="en"]) .hero h1 .h1-soft { display: block; }
  html:not([lang="en"]) .hero h1 br { display: none; }
}
/* 一行 33em：桌面上是一整行，窄屏自然折两行。
   旧版那句尾巴（「更懂客户，客户才会一直来」）是 h1 第一行的复调，
   现在 h1 自己把「一直来」说了两遍，再留就是第三次，删掉。 */
.hero-lead { max-width: 33em; color: var(--ink-2); font-size: 17px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* 证据带：三个数字钉在 CTA 正下方，第一屏读完就知道「谁在用、省多少、贵不贵」，
   不用滚到下面的客户案例节。
   旧版每项前面挂一个 ✓，三个 ✓ 竖着排下来是清单腔；改成一行细字 + 间隔点，
   读起来是一句话，不是三条卖点。 */
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-3);
  font-size: 14px;
}
.hero-proof li { display: inline-flex; align-items: baseline; gap: 6px; }
.hero-proof li + li::before { content: "·"; margin: 0 11px; color: var(--line-strong); }
.hero-proof b {
  font-family: "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
  font-size: 16px;
  color: var(--ink-2);
}

/* 手机扫码：桌面端看演示只能看个手机壳，扫一下到真机上是全屏。
   只在指针精确、宽度够的桌面显示 —— 手机上自己就是全屏，这块反而挡路。
   二维码本身是 js/qr.js 现算出来的内联 SVG（网址跟着 location 走）。
   旧版是一张 92px 码 + 大留白的白卡（120px 高），在按钮左下方跟主 CTA 抢眼睛；
   收成一条 76px 的小条，白色只剩码本身那块底。 */
.hero-scan { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 961px) {
  .hero-scan {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: fit-content;
    margin-top: 22px;
    padding: 9px 18px 9px 9px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
  }
  /* 二维码必须深色画在白底上：纸感底 #EDE6D8 会压掉对比度，扫描率变差 */
  .hero-scan svg {
    display: block;
    width: 58px;
    height: 58px;
    padding: 5px;
    border-radius: var(--r-sm);
    background: #fff;
  }
  .hero-scan .scan-copy { display: flex; flex-direction: column; gap: 2px; max-width: 15em; }
  .hero-scan .scan-copy b { font-size: 14px; }
  .hero-scan .scan-copy small { color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }
}

/* 首屏底部的循环带（.hero-loop）试过一版：跨两栏，序号 + 吃余量的细连线，
   收脚「全流程自动接上」在最右。撤掉的原因是**跟下面 #loop 那节重复** ——
   同一组步名（到店 / 客情 / 提醒 / 跟进 / 预约）在首屏报一遍、下面的流程卡再讲一遍，
   而 #loop 那节既给了名字也给了每一步在店里长什么样，首屏这条就只剩占地方。 */

/* 三张截图叠在一起，不标一行字读者认不出是哪三块屏。 */
.hero-shot-note {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
}

/* phone stack */
.hero-product { position: relative; height: 560px; }
.product-halo {
  position: absolute;
  inset: 6% 2%;
  background: radial-gradient(closest-side, rgba(245,169,63,.42), rgba(245,169,63,0));
  filter: blur(26px);
}
.phone {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 224px;
  filter: drop-shadow(0 20px 32px rgba(41,34,25,.22));
  transition: transform .5s var(--ease);
}
.phone img { display: block; width: 100%; height: auto; border-radius: 26px; }
.phone-back  { transform: translate(-50%,-50%) translateX(-104px) rotate(-9deg) scale(.9); z-index: 1; }
.phone-mid   { transform: translate(-50%,-50%) translateX(104px) rotate(9deg) scale(.9); z-index: 2; }
.phone-front { transform: translate(-50%,-50%); z-index: 3; }

/* ---------- shared section head ---------- */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 34px;
}
.section-kicker {
  display: block;
  margin-bottom: 10px;
  color: var(--primary-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
}
.section-head h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.3; }
.section-head p { max-width: 30em; color: var(--ink-3); font-size: 14px; }

/* ---------- pain ---------- */
/* 全页只有这一节没有卡片：它是「说的是不是你家的事」，一上卡片就变成功能清单了。
   四条横线（三条 + 收口）是这一节唯一的骨架，读起来像有人在跟你说话。

   上一版把「没记录、没触达、没设计下一次」当副行放在 h2 下面，三条名字紧接着又出现在
   列表标题上——同一屏里读两遍；收口那句居中飘着，跟左对齐的主体也对不上。
   现在：三条名字只在列表里出现一次，编号 + 放大到 21px 撑骨架；收口接进同一条横线系统，
   左对齐、22px 衬线，就是读完三条之后该说的那句话。 */
.pain-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pain-list li {
  display: grid;
  gap: 10px;
  align-content: start;
  padding-top: 18px;
  border-top: 2px solid var(--line-strong);
}
.pain-list b {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-family: "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
  font-size: 24px;
  line-height: 1.45;
  letter-spacing: .3px;
}
.pain-list b i {
  font-style: normal;
  font-size: 13px;
  color: var(--primary-ink);
}
.pain-list p { color: var(--ink-2); font-size: 15px; }
/* 收口：三条读完之后那句话。不能跟三条共用「上横线」那套——一共用就成了列表第四行，
   读者先当成第四件事，读完才发现是句总结，这就是它「突兀」的来源。
   改成引文块：左侧主色竖条 + 一行小标签，形状上先声明「这是收口，不是第四项」。
   这套零件现在三节共用：#pain（带小标签）、#features、#industry（都不带）——
   三节都以「你店里的事」收尾：一个说问题、一个说攒下了什么、一个说范围。 */
.pain-note,
.features-note,
.industry-note {
  margin-top: 34px;
  padding: 2px 0 2px 22px;
  border-left: 3px solid var(--primary);
  font-family: "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
  color: var(--primary-ink);
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: .3px;
}
.pain-note-label {
  display: block;
  margin-bottom: 8px;
  color: var(--ink-3);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
}

/* ---------- features ---------- */
/* 四件产品能力独立成节，不跟 #loop 的五步流程条挨着——
   两排卡片贴在一起时，读者分不清哪排是「产品有什么」、哪排是「店里一天怎么走」。 */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.feature-grid li {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 24px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--s2);
}
.feature-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.feature-ico svg { width: 19px; height: 19px; }
.feature-grid b { font-size: 16px; }
.feature-grid p { color: var(--ink-2); font-size: 13.5px; }

/* ---------- proof ---------- */
/* 这一节原本是三张数卡（100+ / 12 小时 / 10 秒）+ 四张案例卡。
   数卡整块删掉了：100+ 首屏证据行已经说过，节标题还是同一句（一屏两遍、全页三遍）；
   12 小时也是首屏说过的；剩下的 10 秒是产品性能不是客户价值。
   腾出来的位置给了案例卡 —— 全页最硬的证据是那四个数，它们原来压在卡片右下角。 */

/* ---------- cases ---------- */
/* 结果主导：数字从卡脚提到卡头，21px → 44px；卡头的店名与头像相应收小，
   读者第一眼看到的是「+52% 洗护召回」，第二眼才是哪家店。 */
.case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.case-card {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--s2);
}
.case-result {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 15px;
  border-bottom: 1px dashed var(--line-strong);
}
.case-result b {
  color: var(--primary);
  font-family: "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
}
.case-result span { color: var(--ink-2); font-size: 14px; }
.case-head { display: flex; align-items: center; gap: 10px; }
.case-head h3 { font-size: 16px; line-height: 1.3; }
.case-head p { color: var(--ink-3); font-size: 12.5px; }
.case-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px; height: 34px;
  border-radius: 10px;
  font-family: "Songti SC", serif;
  font-size: 16px;
  font-weight: 700;
}
.avatar-clay   { background: #F2E2D5; color: #8A4B2A; }
.avatar-amber  { background: var(--primary-soft); color: var(--primary); }
.avatar-rose   { background: #F6E2E5; color: #9C3B52; }
.avatar-teal   { background: #DEEAE6; color: #2C6357; }
.avatar-plum   { background: #F4E0DC; color: #8E3B34; }
/* 「断在 0X」是把案例接回 #loop 五步的钩子，之前没样式、跟正文一个样，读者读不出它是标签。 */
.case-break { color: var(--primary-ink); font-size: 12.5px; font-weight: 600; letter-spacing: .5px; }
.case-copy { color: var(--ink-2); font-size: 14px; }

/* 通栏主案例：五张卡在 2 列栅格里会空出一格（4 张是满的，5 张是 2+2+1）。
   第一张是五类里排第一的行业、断点又是 01，做成通栏正好——顺序 01→05 不变，
   也不必有谁被删掉。宽度换成内部两栏：结果/店名/断点占左，正文占右，
   不然正文会拉成一千多像素一行。
   ⚠ 卡本身是 flex 列（.case-card 在 441 行），这里必须显式改回 grid：
   只写 grid-template-columns 不生效，而 align-items 会把整张卡的内容居中。 */
@media (min-width: 961px) {
  .case-card--lead {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 400px) 1fr;
    column-gap: 44px;
    row-gap: 13px;
    align-content: center;
    align-items: start;
  }
  .case-card--lead .case-copy { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}

/* ---------- industry ---------- */
/* 五类店的清单。形状选「一行一类的菜单」，不做五张卡：
   这一节回答的是「我的店在不在里面」，扫名字比读卡快；也已经有两排卡
   （#features 四张、#loop 五张），再来一排会长成一个卡阵。
   清单从 #proof 的案例卡下面接过来 —— 看完「别人店里数动了」，
   下一句自然是「那我的店算不算」。 */
.industry-list { margin: 0; padding: 0; list-style: none; }
.industry-list li {
  display: grid;
  grid-template-columns: minmax(0, 200px) 1fr;
  gap: 6px 28px;
  align-items: baseline;
  padding: 15px 0;
  border-top: 1px solid var(--line);
}
.industry-list li:last-child { border-bottom: 1px solid var(--line); }
.industry-list b {
  font-family: "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: .3px;
}
.industry-list p { color: var(--ink-2); font-size: 15px; }

/* ---------- workflow ---------- */
/* 闭环是这页的骨架，两层：
   上层 = 文案 + 环（地图）
   下层 = 五步注释条：一位客人走一圈，每一步在店里长什么样
   暖色光晕把它和后面冷静的数字区分开。 */
.workflow-section {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 40px;
  align-items: center;
  background: radial-gradient(76% 64% at 50% 42%, rgba(251,227,184,.46), rgba(251,227,184,0) 72%);
}
.workflow-copy h2 { margin: 0 0 16px; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.22; }
.workflow-copy p { max-width: 30em; color: var(--ink-2); font-size: 17px; line-height: 1.75; }
/* 五步注释条：整幅铺在下面，一格一步，写「店里那一刻具体是什么样」。
   环讲结构，这里讲一天——不再重复环上已经画出来的东西。 */
.flow-steps {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.flow-steps li {
  display: grid;
  gap: 5px;
  align-content: start;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.flow-steps b { display: flex; align-items: baseline; gap: 6px; font-size: 14px; }
.flow-steps b i { font-style: normal; font-family: "Songti SC", serif; font-size: 12.5px; color: var(--primary-ink); }
.flow-scene { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
/* 阶段指标（`.flow-metric`）：挂在环**下面**这五条卡片里，不在环上。
   环上放不下 —— 环带径向只有约 46px，标签已经吃掉 32px；而「名字下方」在标签自己的
   旋转坐标系里正好是径向，一换行就被顶出环带；内圈的灰环带更窄（竖向约 46px）。
   放在卡片右上角，用 flex 跟标题同一行 —— 绝对定位会压到正文。 */
.flow-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.flow-metric {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: -.3px;
  white-space: nowrap; font-variant-numeric: tabular-nums;
  background: var(--primary-soft); color: var(--primary-ink);
  box-shadow: 0 1px 3px rgba(58,44,26,.12), 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
}
/* 变动时跳一下：先冲大、回坐一点、再落定，同时淡底转实心橙。
   实心橙只在跳的那 0.44 秒里出现，所以不违反「圆心是全图唯一的高饱和色块」。 */
/* 变动时跳一下（360ms，微交互上限是 400ms）：冲上去 → 回坐 → 小过冲 → 落定，
   像弹簧；实心橙只在前面一小段闪一下，比缩放更早退，所以不跟缩放抢注意力。
   实心橙只在跳的这 0.36 秒里出现，所以不违反「圆心是全图唯一的高饱和色块」。 */
@keyframes flow-metric-pop {
  0%   { scale: 1;    background: var(--primary-soft); color: var(--primary-ink); }
  12%  { background: var(--primary); color: var(--on-primary); }
  22%  { scale: 1.38; }
  52%  { scale: .95;  background: var(--primary-soft); color: var(--primary-ink); }
  76%  { scale: 1.04; }
  100% { scale: 1; }
}
.flow-metric.is-tick { animation: flow-metric-pop .36s cubic-bezier(.22,1,.3,1) both; }
/* 涨满一轮后的「刷新」：整枚淡出再淡入回到起点。
   数不能无限涨，但回落不该长成下跌的样子 —— 用一次刷新盖过去，不飘数、不闪橙。 */
@keyframes flow-metric-refresh {
  0%   { opacity: 1; scale: 1; }
  42%  { opacity: 0; scale: .9; }
  58%  { opacity: 0; scale: .9; }
  100% { opacity: 1; scale: 1; }
}
.flow-metric.is-reset { animation: flow-metric-refresh .76s var(--ease) both; }
/* 变动时从徽标上方飘一个「+N」出来，慢慢淡掉。
   形状是有意的：先冒头（快）→ 满不透明停一会儿 → 后半段才慢慢淡出去。
   不在 0.2 以下磨蹭（那样看着像脏点而不是消失）；进入用 ease-out、退出用 ease-in，
   两段分开写在关键帧里 —— 一条 animation 只有一个 timing-function，靠逐帧的
   animation-timing-function 拆。
   朝下走的那一步不飘（见 intro.js）：数跌了却飘个「+」，是假话。
   注：这里**故意违背** skill §7 的 exit-faster-than-enter —— 用户要的是「慢慢消失」。 */
@keyframes flow-delta-rise {
  0%   { opacity: 0; translate: -50% 10px; scale: .82; animation-timing-function: cubic-bezier(.2,.9,.3,1); }
  12%  { opacity: 1; scale: 1.12; animation-timing-function: cubic-bezier(.45,0,.75,.6); }
  46%  { opacity: 1; scale: 1; }
  100% { opacity: 0; translate: -50% -22px; scale: 1; }
}
.flow-delta { position: absolute; left: 50%; bottom: 100%; margin-bottom: -2px;
  translate: -50% 0; animation: flow-delta-rise 1.7s linear both;
  font-size: 13.5px; font-weight: 800; color: var(--primary); white-space: nowrap;
  font-variant-numeric: tabular-nums; pointer-events: none; }
/* 闭环的出口：月底回报表看结果，把这一节接到下面四个数上。 */
.flow-note { grid-column: 1 / -1; margin: 0; text-align: center; color: var(--ink-3); font-size: 14px; }
.text-link { display: inline-block; margin-top: 18px; color: var(--primary-ink); font-weight: 600; }
.text-link:hover { text-decoration: underline; }

/* 经营闭环：手机 = 竖排链路 + 左轨（箭头朝上收回第一步）；
   ≥760px = 五段弧首尾相扣的环，标签贴弧旋转，圆心一张「客户档案」 */
.flow-chain { position: relative; display: grid; gap: 10px; padding-left: 46px; --flow-loop: var(--surface); }
.flow-chain::before { content: ''; position: absolute; left: 12px; top: 34px; bottom: 34px; width: 2px; border-radius: 2px; background: var(--primary); }
.flow-chain::after { content: ''; position: absolute; left: 8px; top: 29px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 7px solid var(--primary); }
.flow-step { position: relative; display: flex; align-items: baseline; gap: 9px; min-height: 54px; padding: 15px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.flow-step:not(.n1)::before, .flow-hub::before { content: ''; position: absolute; left: 50%; top: -10px; width: 2px; height: 10px; margin-left: -1px; background: var(--line-strong); }
.flow-step:not(.n1)::after, .flow-hub::after { content: ''; position: absolute; left: 50%; top: -1px; margin-left: -4px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid var(--line-strong); }
.flow-step > span { flex: none; font-family: "Songti SC", serif; font-size: 19px; line-height: 1.2; color: var(--primary-ink); }
/* 不能写死 flex:none —— 英文标签最宽到 "Follow-up reminder"，会顶破 1fr 的
   min-content 下限把整页撑出横向滚动；可收缩后标签按需换行，桌面宽度仍是一行。 */
.flow-step b { flex: 1 1 auto; font-size: 16px; }

.flow-hub {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  width: fit-content; margin: 2px auto; padding: 12px 24px; box-shadow: var(--s2);
  border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);
  border-radius: var(--r-lg);
  background: var(--primary-soft);
}
.flow-hub b { font-size: 15px; color: var(--primary-ink); white-space: nowrap; }
.flow-hub span { font-size: 11px; color: color-mix(in srgb, var(--primary-ink) 65%, var(--ink-2)); white-space: nowrap; }

.flow-flow, .flow-ico, .flow-trail { display: none; }
/* 环上高亮的绕行。静止偏好下不动（高亮停在原处，画面与静态版一致） */
@keyframes flow-circulate { to { rotate: 1turn; } }

@media (min-width: 360px) {
  /* 椭圆环：让「循环」由形状本身表达，而不是靠折线暗示。
     节点 / 箭头 / 标签的角度按参数方程算好后写成百分比——容器锁死宽高比
     (aspect-ratio)，所以换语言、换宽度都不跑位。
     居中一律用 translate 属性而不是 transform：.reveal 的入场动画占用 transform。
     断点 360px：环是「到店循环」本身的样子，窄屏也不该换成另一套图去讲同一件事。
     390px 屏的内容区有 350px，环本身 max-width 就是 440px —— 缩到 350 装得下，
     只需要把标签 / 图标 / 圆心按同一比例缩小（见下面 360–759px 那条），
     几何不用重算（全是百分比 + 锁死的宽高比）。<360px（含 320px 老设备）才退成竖排链路。 */
  /* 上限压在栏宽之下：图不再吃满一整栏，整体大小和左侧文案那块对上——
     它是配文的图，不是压文的图。 */
  .flow-chain { display: block; position: relative; width: 100%; max-width: 440px; justify-self: center; padding-left: 0; aspect-ratio: 1.3; }
  .flow-chain::before, .flow-chain::after { display: none; }

  /* 循环 = 五段粗箭头首尾相扣：段本身就是内容——标签沿弧向旋转贴在段上，
     圆心是全图唯一的高饱和色块。粗环靠「体量」当主角，不靠颜色。 */
  .flow-flow { display: block; position: absolute; inset: 3% 6%; border-radius: 50%; overflow: hidden;
    --flow-arc: conic-gradient(from 0deg,
      transparent 0deg 4deg, var(--flow-loop) 4deg 68deg,
      transparent 68deg 76deg, var(--flow-loop) 76deg 140deg,
      transparent 140deg 148deg, var(--flow-loop) 148deg 212deg,
      transparent 212deg 220deg, var(--flow-loop) 220deg 284deg,
      transparent 284deg 292deg, var(--flow-loop) 292deg 356deg,
      transparent 356deg 360deg); }
  /* 五段弧交给 SVG：一段一条路径，末端收成尖角（尖角与环段同一个 path，
     所以是「长」在段上的，不是贴上去的三角）；尖角前探 22°，插进下一段的起点。
     方向靠形状 + 叠压读出来，不靠换色。 */
  .flow-arcs { display: block; width: 100%; height: 100%; }
  .flow-seg { fill: var(--surface); stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 1px 2px rgba(58,44,26,.08)); }
  /* 扇面扫光（2026-09-24 改）：顶点在圆心，从里往外射、绕一圈。三处一起改：
     ① 抬到盖片之上（z-index:1）—— 内圈也见光，「从内部发出」才读得出来；
        圆心那块仍由 .flow-hub 压着（它是 .flow-flow 的兄弟 + z-index:1），橙圆不会被扫花。
     ② 去掉弧遮罩：光现在整条穿过椭圆，不再只在五段弧上跳。
     ③ 加一层径向衰减：圆心附近只留一点，到环带才实 —— 方向就是「由内向外」。
     转的仍是正方形内层，椭圆形状不受影响。 */
  .flow-glow { position: absolute; inset: 0; z-index: 1;
    -webkit-mask-image: radial-gradient(ellipse closest-side, transparent 7%, rgba(0,0,0,.26) 32%, rgba(0,0,0,.64) 60%, #000 86%);
            mask-image: radial-gradient(ellipse closest-side, transparent 7%, rgba(0,0,0,.26) 32%, rgba(0,0,0,.64) 60%, #000 86%); }
  .flow-glow::before { content: ''; position: absolute; left: 50%; top: 50%; width: 130%; aspect-ratio: 1; translate: -50% -50%;
    background: conic-gradient(from 0deg, transparent 0turn, transparent 0.80turn,
      color-mix(in srgb, var(--ambient-top) 0%, transparent) 0.84turn,
      var(--ambient-top) 0.965turn, transparent 1turn);
    animation: flow-circulate 8s linear infinite; }
  /* 盖掉中心：高亮只剩环带那一段（两个轴向取不同百分比，环带在椭圆上才等厚） */
  .flow-cover { position: absolute; inset: 14.6% 12%; border-radius: 50%; background: var(--bg); }

  .flow-step, .flow-hub { position: absolute; translate: -50% -50%; }

  /* 步骤 = 图标 + 名称，整体沿弧向旋转，落在这段弧的中点上。
     旋转角取该点的切向；左半边翻 180° 以免文字倒置。 */
  .flow-step { padding: 0; border: 0; background: none; box-shadow: none; width: max-content; min-height: 0; align-items: center; gap: 9px; }
  .flow-step > span { display: none; }
  .flow-ico { display: block; width: 32px; height: 32px; flex: none; color: var(--primary-ink); }
  .flow-step b { white-space: nowrap; font-size: 15px; }

  /* 标签落在这段弧的中点上。注意坐标系：left/top 是相对 .flow-chain 的百分比，
     而环盒只占 chain 的 88%×94%，所以要先换算（38.74 / 40.14 = 环带中线在这些百分比下的半径），
     否则标签会整体漂到环带外面（之前实测偏出 32–36px）。切向旋转，左半边翻 180° 防倒置。 */
  .flow-step.n1 { left: 72.77%; top: 17.52%; rotate: 28deg; }
  .flow-step.n2 { left: 84.82%; top: 67.60%; rotate: -59deg; }
  .flow-step.n3 { left: 50%;    top: 90.14%; rotate: 0deg; }
  .flow-step.n4 { left: 13.15%; top: 62.40%; rotate: 66deg; }
  .flow-step.n5 { left: 27.23%; top: 17.52%; rotate: -28deg; }

  /* 圆心：全图唯一的高饱和色块，白字。三段式（图标 / 标题 / 副标题）用 margin 控距，
     gap 归零——统一个 gap 会让标题和副标题等距，读起来不像一组。
     副标题用纯白而非半透明白：11px + 76% 时对比度只有 4.06，不到 AA。 */
  .flow-hub { left: 50%; top: 50%; width: 150px; height: 150px; border-radius: 50%; padding: 0; gap: 0;
    justify-content: center; box-shadow: none; border: 0; z-index: 1;
    background: var(--primary); color: var(--on-primary); }
  .flow-hub .flow-ico { color: var(--on-primary); width: 40px; height: 40px; margin-bottom: 10px; }
  .flow-hub b { color: var(--on-primary); font-size: 17px; line-height: 1.3; }
  .flow-hub span { color: var(--on-primary); font-size: 12px; line-height: 1.3; margin-top: 3px; }

  .flow-step:not(.n1)::before, .flow-step:not(.n1)::after,
  .flow-hub::before, .flow-hub::after { display: none; }
}

/* 360–759px：环按同一套几何缩小，不是换一张图。
   缩放的是「贴在环上的东西」（标签字号 / 图标 / 圆心直径），
   位置百分比和旋转角一个都不动 —— 所以两个断点画出来是同一个环。
   数值按 350px（390px 屏的内容区）÷ 440px ≈ 0.8 取，再按实测微调。 */
@media (min-width: 360px) and (max-width: 759px) {
  .flow-step { gap: 7px; }
  .flow-ico { width: 26px; height: 26px; }
  /* 标签 13px：再小就读不清了。最长的是「服务&客情」5 字 ≈ 68px + 图标 26 + 间距 7，
     沿 -59° 切向摆出去水平只占约 52px，350px 的环上排得开（实测 360px 屏也不越界）。 */
  .flow-step b { font-size: 13px; }
  .flow-hub { width: 118px; height: 118px; }
  .flow-hub .flow-ico { width: 30px; height: 30px; margin-bottom: 7px; }
  .flow-hub b { font-size: 14px; }
  .flow-hub span { font-size: 11px; margin-top: 2px; }
}

/* ---------- cta + waitlist ---------- */
/* 中段与尾部各一条重复 CTA。原先从首屏按钮到 #trial 表单之间 2900px 没有任何入口，
   FAQ 读完页面就结束了；两条细带（一句话 + 一个按钮）不铺卡片、不铺渐变，
   跟 #trial 那块大表单拉开层级，读者知道「这只是再问一次」。 */
.cta-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  width: min(100% - 40px, 1120px);
  margin: 0 auto;
  padding: 26px 0 30px;
  border-top: 1px solid var(--line);
}
.cta-strip p { color: var(--ink-2); font-size: 15.5px; }
.cta-strip p b { color: var(--ink); }
.cta-strip .button { flex: none; }

.cta-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
  width: min(100% - 40px, 1120px);
  margin: 0 auto 88px;
  padding: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 130% at 0% 0%, var(--ambient-soft), rgba(251,227,184,0) 62%),
    var(--surface);
  box-shadow: var(--s3);
}
.cta-badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 13px;
  border-radius: var(--r-full);
  background: var(--primary);
  color: var(--on-primary);
  font-size: 12px;
  font-weight: 600;
}
.cta-copy h2 { margin-bottom: 14px; font-size: clamp(26px, 3vw, 34px); line-height: 1.3; }
.cta-copy p { color: var(--ink-2); font-size: 15px; }
/* 怎么开始：留了手机号之后会发生什么。之前只收表单不说流程，是最后一跳的阻力。 */
.cta-steps { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.cta-steps li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; }
.cta-steps b {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-ink);
  font-size: 11.5px;
}
.cta-steps span { color: var(--ink-2); font-size: 14px; }

.waitlist-form { display: grid; gap: 10px; }
.waitlist-form label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.phone-input {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: #fff;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.phone-input:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.phone-input.has-error { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.phone-input > span { color: var(--ink-3); font-size: 15px; }
.phone-input input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  letter-spacing: .5px;
}
.phone-input input:focus { outline: none; }
.phone-input input::placeholder { color: var(--ink-3); letter-spacing: 0; }
.form-error { min-height: 18px; color: var(--danger); font-size: 12px; }
.submit-button { width: 100%; }
.form-privacy { color: var(--ink-3); font-size: 12px; }
.form-success {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--success);
  border-radius: var(--r-md);
  background: var(--success-soft);
}
.form-success[hidden] { display: none; }
.success-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  font-size: 16px;
}
.form-success b { font-size: 15px; }
.form-success p { color: var(--ink-2); font-size: 13px; }

/* ---------- faq ---------- */
/* 左题右答：问题最多 14 个字，撑不满 1120px，铺满会读成两截；
   整幅铺开又会在右边空出一大片。两栏各占一头，左边那栏跟着滚动停住。 */
.faq-section {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 24px 56px;
  align-items: start;
}
.faq-head { position: sticky; top: 96px; }
.faq-head h2 { margin-bottom: 14px; font-size: clamp(26px, 3vw, 36px); line-height: 1.3; }
.faq-head p { max-width: 24em; color: var(--ink-3); font-size: 14px; }
/* 原生 details：不用 JS，键盘和读屏开箱可用。 */
.faq-list { display: grid; gap: 12px; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--s2);
  overflow: hidden;
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 15px 22px;
  font-family: "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .3px;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: none;
  color: var(--primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  transition: transform .2s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--primary-ink); }
.faq-item[open] { border-color: var(--line-strong); }
.faq-item p {
  padding: 0 22px 20px;
  color: var(--ink-2);
  font-size: 14.5px;
}

/* ---------- footer ---------- */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  width: min(100% - 40px, 1120px);
  margin: 0 auto;
  padding: 30px 0 44px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 13px;
}
.site-footer > p { margin-left: auto; }

/* ---------- reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .6s var(--ease) var(--reveal-delay, 0ms),
    transform .6s var(--ease) var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- 英文例外 ---------- */
/* 英文文案比中文长约 1.5 倍：衬线显示体换回 UI 无衬线，字距归零，
   凡是「按中文宽度定死」的块都要放宽或改堆叠。 */
html[lang="en"] body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] .metric,
html[lang="en"] .stat-num,
html[lang="en"] .pain-list b,
html[lang="en"] .industry-list b,
html[lang="en"] .pain-note,
html[lang="en"] .features-note,
html[lang="en"] .industry-note,
html[lang="en"] .faq-item summary,
html[lang="en"] .hero-proof b { font-family: inherit; letter-spacing: -.01em; }
html[lang="en"] .brand-copy b { letter-spacing: 0; }
/* 行业清单的行业名比中文长（"Beauty salons & skin clinics"），200px 栏会折成两行，
   跟右边单行的说明错开；英文放宽到 320px。**必须带 min-width**：这条是 html[lang="en"]
   选择器，优先级高于 560px 那条堆叠规则，不限定宽度会把窄屏的两行版式又拉回两栏
   （实测 390px 下说明被挤成 11 行）。 */
@media (min-width: 561px) {
  html[lang="en"] .industry-list li { grid-template-columns: minmax(0, 320px) 1fr; }
}
html[lang="en"] .case-avatar { font-family: inherit; font-size: 12px; letter-spacing: .2px; }
html[lang="en"] .eyebrow,
html[lang="en"] .section-kicker,
html[lang="en"] .cta-badge,
html[lang="en"] .case-break { letter-spacing: .2px; }
/* 英文标题按 42px 封顶：中文那个 46px 是按「一行 12 个全角字」卡出来的，
   英文用不上这份余量 —— 不封顶在 961–1120px 会从 4 行涨到 5 行。 */
html[lang="en"] .hero h1 { font-size: clamp(29px, 3.4vw, 42px); }

/* 环上的标签英文更长（"Follow-up reminder"），左右两栏分不下：
   英文改为上下堆叠（文案整幅 + 环整幅），标签保持一行。 */
html[lang="en"] .workflow-section { grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 760px) {
  /* 单列满宽后把环放大即可，角度不用另算——但同样压在文案量级之下。 */
  html[lang="en"] .flow-chain { max-width: 480px; }
  /* 圆心文案 "AI customer profile" 比中文宽，"Kept current" 也是两词：
     150px 的圆装不下，字会溢出色块。英文单独把圆放大。 */
  html[lang="en"] .flow-hub { width: 172px; height: 172px; }
  html[lang="en"] .flow-hub b { font-size: 15px; }
}
/* 英文在 360–759px 同样是环（不换图），但英文标签比中文宽约 1.5 倍：
   标签压到 12px、圆心放大到 136px，"AI customer profile" 才不溢出色块。
   只覆盖这一段 —— ≥760px 走上面那条 172px 的规则。 */
@media (min-width: 360px) and (max-width: 759px) {
  html[lang="en"] .flow-step b { font-size: 12px; }
  html[lang="en"] .flow-ico { width: 24px; height: 24px; }
  html[lang="en"] .flow-hub { width: 136px; height: 136px; }
  html[lang="en"] .flow-hub .flow-ico { width: 28px; height: 28px; margin-bottom: 6px; }
  html[lang="en"] .flow-hub b { font-size: 13px; }
  html[lang="en"] .flow-hub span { font-size: 10px; }
}

/* ---------- responsive ---------- */
/* 961–1023px：两栏 hero 还在（收窄规则要 ≤960 才生效），但视口比设计窄，
   叠在最外侧的两张截图带 9° 旋转 + 104px 横移，会顶出视口 7px 撑出横向滚动条。
   这一段把手机收小、横移收回；≤960 走下面那套单栏规则。 */
@media (min-width: 961px) and (max-width: 1023px) {
  .phone { width: 204px; }
  .phone-back { transform: translate(-50%,-50%) translateX(-84px) rotate(-9deg) scale(.9); }
  .phone-mid  { transform: translate(-50%,-50%) translateX(84px) rotate(9deg) scale(.9); }
}

/* 英文头部三个按钮（See the demo / Start free trial / 中文）比中文宽一半，
   但实测 561–700px 仍放得下（docW == vw），真正顶出视口是 ≤460px。
   窄屏收演示入口的口径两种语言统一走下面 ≤560px 那条，不再为英文单独提前到 700px——
   不然英文用户在 561–700px 少一个中文用户还有的入口。 */

@media (max-width: 960px) {
  section { padding-block: 64px; }
  .site-nav { display: none; }
  .header-demo { margin-left: auto; }
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 36px; }
  .hero-product { width: 100%; height: 440px; max-width: 520px; margin-inline: auto; }
  .phone { width: 168px; }
  .phone-back { transform: translate(-50%,-50%) translateX(-74px) rotate(-9deg) scale(.9); }
  .phone-mid  { transform: translate(-50%,-50%) translateX(74px) rotate(9deg) scale(.9); }
  .section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .pain-list { grid-template-columns: 1fr; gap: 26px; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .case-grid { grid-template-columns: 1fr; }
  .workflow-section { grid-template-columns: 1fr; gap: 32px; }
  .faq-section { grid-template-columns: 1fr; gap: 26px; }
  .faq-head { position: static; }
  .cta-section { grid-template-columns: 1fr; gap: 28px; padding: 32px 24px; margin-bottom: 64px; }
  .flow-steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .feature-grid { grid-template-columns: 1fr; }
  .flow-steps { grid-template-columns: 1fr; gap: 12px; }
  .site-header, .site-footer { width: calc(100% - 32px); }
  section { padding-block: 52px; }
  .brand-copy small { display: none; }
  /* 头部四个东西（品牌 + 演示 + 免费试用 + 语言）在 560px 以下放不下：
     品牌名会被压成两行。收掉次按钮的演示——它在首屏、闭环区、表单下面都还有入口。 */
  .header-demo { display: none; }
  .header-cta { margin-left: auto; min-height: 40px; padding: 0 16px; font-size: 13px; }
  .lang-switch { min-width: 44px; height: 40px; padding: 0 12px; font-size: 12px; }
  .hero h1 { font-size: 31px; }
  /* 收尾句降一级：它本来就是四行里唯一的「长行」（8 字 × 31px ≈ 251px，
     上面三行都只有 4 字 / 126px），加上「才会」变 9 字后是 282px，
     而 320px 屏的内容区只有 280px —— 会二次折行。
     降到 .84em（26px）后约 237px，不折行，也不再顶着右边界。
     顺带把视觉权重调对：前两句是这个标题的主张，收尾句是结果，
     结果不该占这四行里最大的一块面积。 */
  .hero h1 > .h1-soft:last-child { font-size: .84em; }
  .hero-lead { font-size: 15px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .button { width: 100%; }
  /* 证据行在窄屏会折行，行首的「·」同理收掉，改用一个固定左间距。 */
  .hero-proof { gap: 4px 0; font-size: 13px; }
  .hero-proof li + li::before { display: none; }
  .hero-proof li + li { margin-left: 14px; }
  .hero-shot-note { font-size: 12px; }
  .pain-list b { font-size: 20px; }
  .industry-list li { grid-template-columns: 1fr; gap: 6px; }
  .industry-list b { font-size: 18px; }
  .case-result b { font-size: 36px; }
  .cta-strip { flex-direction: column; align-items: stretch; gap: 14px; padding: 22px 0 26px; }
  .cta-strip p { font-size: 14.5px; }
  /* 窄屏按钮跟首屏 hero-actions 一样铺满整行：细条贴左看起来像没排完，
     而且触屏目标也太小。 */
  .cta-strip .button { width: 100%; }
  .pain-note, .features-note, .industry-note { font-size: 19px; }
  .hero-product { height: 380px; }
  .phone { width: 142px; }
  .phone-back { transform: translate(-50%,-50%) translateX(-60px) rotate(-9deg) scale(.9); }
  .phone-mid  { transform: translate(-50%,-50%) translateX(60px) rotate(9deg) scale(.9); }
  .stat-num { font-size: 38px; }
  .faq-item summary { font-size: 16px; padding: 14px 18px; }
  .faq-item p { padding: 0 18px 18px; }
  .site-footer > p { margin-left: 0; width: 100%; }
}

/* ≤759px（手机 / 折叠屏 / 小平板）：四件事那排卡改成「左图标 + 右侧标题·正文」。
   竖排版本是图标一行、标题一行、正文两行 —— 单列时每张约 174px 高，
   四张连着排要占掉一屏半，读起来像在读四段而不是扫四个点。
   图标跨两行之后它不再单独占一层，高度砍掉约 45%（实测 174px → 96px），
   一屏多一点就能看完四件事。列数不变（≤560 单列、561–759 双列），
   动的是卡内部的排布，不是改成另一种卡。 */
@media (max-width: 759px) {
  .feature-grid li {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 3px;
    align-items: start;
    padding: 16px;
  }
  .feature-ico { grid-column: 1; grid-row: 1 / span 2; width: 34px; height: 34px; }
  .feature-ico svg { width: 17px; height: 17px; }
  .feature-grid b { grid-column: 2; grid-row: 1; font-size: 15px; line-height: 1.4; }
  .feature-grid p { grid-column: 2; grid-row: 2; font-size: 13px; line-height: 1.6; }
}

/* ≤380px：品牌名 + 语言开关 + 主 CTA 也要收紧，别让品牌名换行。 */
@media (max-width: 380px) {
  .site-header { gap: 10px; }
  .brand-copy b { font-size: 14px; }
  .header-cta { padding: 0 13px; }
  .lang-switch { min-width: 40px; padding: 0 9px; }
}

/* <360px（320px 老设备）才用竖排链路——环缩到这么小标签会糊成一团。
   竖排那一版同样要「转」起来：
   补一枚沿左轨上行的光点，走的就是 .flow-chain::after 那个朝上箭头指的方向
   （05 预约 → 回到 01 到店）：闭环这一段在竖排里正是最容易读丢的那一截。
   周期取 8s，跟桌面扫光（flow-circulate）和指标跳动同一个节奏，跨断点不会各跑各的。 */
@media (max-width: 359px) {
  .flow-trail {
    display: block;
    position: absolute;
    left: 9px;          /* 左轨在 left:12px、宽 2px，光点 8px —— 居中压在轨上 */
    z-index: 1;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ambient-top);
    box-shadow: 0 0 10px color-mix(in srgb, var(--ambient-top) 70%, transparent);
    animation: flow-trail-up 8s linear infinite;
    will-change: top;
  }
  @keyframes flow-trail-up {
    0%   { top: calc(100% - 36px); opacity: 0; }
    9%   { opacity: 1; }
    88%  { opacity: 1; }
    100% { top: 34px; opacity: 0; }
  }
  /* 五步依次点亮：只动边框和底色，不动尺寸字重 —— 卡片一变大整列就跟着抖。
     8s / 5 步 = 1.6s 一步，用负延迟错开（正延迟会让第一轮先黑 6.4s）。 */
  .flow-step { animation: flow-step-lit 8s linear infinite; }
  .flow-step.n2 { animation-delay: -6.4s; }
  .flow-step.n3 { animation-delay: -4.8s; }
  .flow-step.n4 { animation-delay: -3.2s; }
  .flow-step.n5 { animation-delay: -1.6s; }
  @keyframes flow-step-lit {
    0%, 10% { border-color: var(--primary); background: var(--primary-soft); }
    34%, 100% { border-color: var(--line); background: var(--surface); }
  }
  /* 光点回到顶部的那一下，朝上的箭头同步亮一下：闭合发生在这一刻，
     不然竖排读到 05 就断了，读者以为流程到此为止。 */
  .flow-chain::after { animation: flow-arrow-flash 8s linear infinite; }
  @keyframes flow-arrow-flash {
    0%, 86% { border-bottom-color: var(--primary); }
    93%     { border-bottom-color: var(--ambient-top); }
    100%    { border-bottom-color: var(--primary); }
  }
}

/* 触屏（无 hover）的按压反馈：hover 位移在手指下不可见，
   按压缩小 + 底色变化是触屏端能摸到的那个反馈。桌面指针不受影响。 */
@media (hover: none) {
  .button:active { transform: scale(.98); }
  .button-primary:active { box-shadow: 0 4px 12px rgba(194,65,12,.18); }
  .header-cta:active, .header-demo:active, .lang-switch:active { transform: scale(.95); }
  .faq-item summary:active { background: color-mix(in srgb, var(--primary-soft) 60%, transparent); }
  .text-link:active { opacity: .65; }
}

/* FAQ 展开高度动画：纯渐进增强。::details-content / interpolate-size 只有
   新内核支持，不支持的浏览器整块丢弃，退回原生瞬时展开，布局不受影响。 */
@supports (interpolate-size: allow-keywords) {
  html { interpolate-size: allow-keywords; }
  .faq-item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .32s var(--ease), content-visibility .32s allow-discrete;
  }
  .faq-item[open]::details-content { block-size: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .phone, .button, .faq-item summary::after, .header-cta { transition: none; }
  .flow-glow::before { animation: none; }
  .flow-metric.is-tick { animation: none; }
  .faq-item::details-content { transition: none; }
  /* H5 循环的替代动效：光点直接收掉（它是纯装饰，静态链路没有它也完整），
     卡片保持常规底色、箭头保持常规色。 */
  .flow-trail { display: none; }
  .flow-step, .flow-chain::after { animation: none; }
}