/* ============================================================
   回响 · 未登录首页 Landing
   ------------------------------------------------------------
   这一页的规矩（自测会读这个文件，别顺手破）：
   ① 不许出现 backdrop-filter——访客页首屏最贵，糊一层就是白掉的帧。
   ② 不许出现 infinite / animation-iteration-count——常驻循环动画在营销页上是干扰。
      （所以这里的环全是**播一次**的：入场荡一圈就停，不转。）
   ③ 装饰性 ::before/::after 的 left/right 一律不许为负（窄屏会横向溢出）。
   ④ 窄屏目录不许换行、不许折成两排；目录只在 min-width 断点里出现。
   ⑤ 没有 JS 时内容必须原样可见（html:not(.ld-js) 那条兜底）。
   ------------------------------------------------------------
   2026-10 第五轮：这一页**回到明亮**。
   第四轮把它按进黑里，理由是「签名是暗处才会发光的环」——那个前提是错的：
   签名看不见的真正原因是**线只有 1px**，不是底色太亮。这一轮把环加到 1.5px、
   Thread 加到 2.5px 并补上两端节点、--echo 钉成亮橙，它在暖纸底上就立得住，
   于是既保住了签名，也不用再拿"压抑"换"看得见"。
   亮底的代价是签名色不能再当文字用：亮橙压纸 2.28:1，一律换 --echo-ink。
   仍然不要的：手机外框、悬浮卡、眉标胶囊、渐变字、四宫格、蓝紫。
   ============================================================ */

body.ld{display:block;height:auto;overflow:visible;overflow-x:clip;
  background-color:var(--bg);background-image:var(--glow),var(--grain);
  background-attachment:fixed}

/* ---------- 栅格与留白：一个 --ld-pad 管全站横向内缩 ----------
   --ld-pad 挂在 body.ld 上而不是 .ld-wrap 上，这样小节之间那条分隔线也能
   用同一个数把左右内缩算进去（见下面 .ld-sec + .ld-sec::before）。 */
body.ld{--ld-pad:20px}
.ld-wrap{
  width:100%;max-width:1120px;margin-inline:auto;
  padding-inline:var(--ld-pad)}
.ld-hero,.ld-sec{padding-block:clamp(48px,9vw,96px)}
.ld-hero{padding-top:clamp(32px,6vw,64px)}
/* 小节之间的线跟着正文内缩，不通铺到屏幕两头——通铺的细线在宽屏上像表格分隔行。 */
.ld-sec{position:relative}
.ld-sec + .ld-sec{border-top:0}
.ld-sec + .ld-sec::before{content:"";position:absolute;top:0;height:1px;
  left:calc(var(--ld-pad));right:calc(var(--ld-pad));background:var(--sep2)}

/* ---------- 顶部导航：一层实底 + 一条线，不糊、不投影 ---------- */
.ld-nav{position:sticky;top:0;z-index:20;background:var(--bg);
  transition:border-color var(--dur-fast)}
.ld-nav{border-bottom:1px solid transparent}
.ld-nav.stuck{border-bottom-color:var(--sep)}
.ld-nav-in{display:flex;align-items:center;gap:var(--s-4);height:60px}
.ld-brand{display:flex;align-items:center;gap:9px;min-width:0;color:var(--ink)}
.ld-brand img{width:28px;height:28px;display:block;border-radius:8px;flex:0 0 auto}
.ld-brand b{font-size:var(--fs-sub);font-weight:600;letter-spacing:var(--ls-label);
  white-space:nowrap}
.ld-brand i{font-style:normal;font-size:var(--fs-cap);color:var(--ink2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ld-spacer{flex:1}
/* 目录：窄屏整条藏起来（不换行、不折排），只在够宽时出现 */
.ld-anchors{display:none;gap:var(--s-5)}
.ld-anchors a{font-size:var(--fs-foot);color:var(--ink2);font-weight:500;
  transition:color var(--dur-fast)}
.ld-anchors a:hover{color:var(--ink)}
.ld-acts{display:flex;align-items:center;gap:var(--s-3);flex:0 0 auto}
.ld-acts .btn{padding:8px 16px;font-size:var(--fs-foot)}
.ld-link{font-size:var(--fs-foot);color:var(--ink2);font-weight:500}
.ld-link:hover{color:var(--ink)}

/* ---------- 首屏 ----------
   标题走衬线：这是"有人记得你"那句话该有的声音，
   不是后台面板的标题。字重压到 500，靠字号和行距立层级，不靠加粗。 */
.ld-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,6vw,56px);
  align-items:center}
.ld-h1{margin:0;font-family:var(--font-prose);
  font-size:clamp(38px,8.2vw,66px);font-weight:500;line-height:1.12;
  letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.ld-br{display:none}
/* 窄屏标题的断点由这一条管住：后半句不许从中间断开。
   360px 上「说过的每一句。」7 字 × 38px = 266px，容器 320px，放得下。 */
.ld-nb{white-space:nowrap}
.ld-lead{margin:var(--s-6) 0 0;font-size:clamp(18px,2.2vw,24px);line-height:1.5;
  font-weight:500;letter-spacing:-.01em;color:var(--ink2);max-width:24ch;text-wrap:balance}
.ld-sub{margin:var(--s-4) 0 0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink2);max-width:40ch}
.ld-cta{display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap;margin-top:var(--s-7)}
.ld-cta .btn{padding:14px 24px;font-size:var(--fs-body)}
/* 二级动作是「文字 + 箭头」，不是又一颗描边按钮——两颗实心并排是落地页的老毛病 */
.ld-arrow{font-size:var(--fs-sub);font-weight:600;color:var(--echo-ink);white-space:nowrap}
.ld-arrow::after{content:"→";margin-left:6px;display:inline-block;
  transition:transform var(--dur-fast)}
.ld-arrow:hover::after{transform:translateX(3px)}
.ld-note{margin:var(--s-5) 0 0;font-size:var(--fs-cap);color:var(--ink2);line-height:1.7;max-width:38ch}

/* ---------- 首屏右侧：一段真实的对话，不套手机壳 ----------
   面板不再是"一个描边的白盒子"，而是夜里有盏灯的一块纸面：
   顶光从上方落下来，边缘收掉硬描边。 */
/* 这句旁注原来是一段孤零零的窄栏文字飘在面板上方，读起来像漏排的段落。
   现在给它一条引导线和一个点，明确是"对下面这块的说明"。 */
.ld-hero-side{position:relative;min-width:0}
.ld-float{display:none;position:relative;font-size:var(--fs-cap);line-height:1.7;
  color:var(--ink2);max-width:38ch;margin:0 0 var(--s-4);padding-left:14px}
.ld-float::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;
  border-radius:50%;background:var(--echo)}
/* 这里不能开 overflow:hidden——回响演完一轮以后面板会变高，
   底部那句说明会被自己裁掉（顶光那层 ::before 本来就在内边距里，不需要裁）。 */
.ld-demo{position:relative;background:var(--bg2);border:1px solid var(--sep2);
  border-radius:var(--r-panel);padding:var(--s-5);max-width:420px;margin-inline:auto;
  box-shadow:0 24px 56px -28px rgba(120,84,44,.34)}
.ld-demo::before{content:"";position:absolute;top:0;left:0;right:0;height:140px;
  background:var(--glow);pointer-events:none}
.ld-chat{display:flex;flex-direction:column;gap:0;padding:0;overflow:visible;
  min-height:0;background:none;border:0;border-radius:0;position:relative}
.ld-chat .day{margin:0 0 var(--s-3)}
.ld-chat .row{margin:var(--s-3) 0;gap:var(--s-2)}
.ld-chat .col{max-width:76%}
.ld-chat .bubble{font-size:var(--fs-sub);line-height:1.6;padding:9px 13px}
/* 入场：pop 是初始态，shown 由 landing.js 在两帧后加上 */
.ld-chat .row.pop{opacity:0;transform:translateY(6px)}
.ld-chat .row.shown{opacity:1;transform:none;
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.ld-asks{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;
  margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--sep2)}
.ld-asks-cap{font-size:var(--fs-micro);letter-spacing:var(--ls-caps);color:var(--ink2);
  margin-right:2px}
.ld-asks .chip{padding:6px 12px;font-size:var(--fs-foot)}
.ld-demo-cap{margin:var(--s-3) 0 0;font-size:var(--fs-cap);color:var(--ink2);line-height:1.7}

/* ---------- 首屏：一次完整的回响 ----------
   这块不是一张图，是产品里那套 .row/.bubble 加上三件套的 Thread 与 Wave。
   三拍顺序播一次就停（营销页不许有停不下来的动画，自测会读 infinite）：
     0.15s 过去那句话浮上来 → 0.75s Thread 自己画下来 → 1.75s 现在这句 + 头像荡一圈
   ⚠ 装饰层不许横向探出容器：这里的 ::before 全部 left/right 非负。 */
.ld-echo{position:relative;padding:var(--s-4) 0 0}
.ld-echo-when{display:flex;align-items:center;gap:8px;margin-bottom:var(--s-2);
  font-family:var(--font-time);font-size:var(--fs-cap);letter-spacing:var(--ls-label);
  color:var(--ink2)}
.ld-echo-when i{width:7px;height:7px;border-radius:50%;background:var(--ink3);flex:0 0 auto}
.ld-echo .row{margin:var(--s-2) 0;gap:var(--s-2)}
.ld-echo .col{max-width:80%}
.ld-echo .bubble{font-size:var(--fs-sub);line-height:1.62;padding:10px 14px}
.ld-echo .row.pro{padding-top:0}
.ld-echo .row.pro::before{display:none}
.ld-echo .av.waving{box-shadow:0 0 0 2px var(--bg2),0 0 0 3.5px var(--echo),var(--av-stroke)}
.ld-echo-gap{display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-2) 0 var(--s-2) 4px;min-height:96px}
.ld-echo-gap .thread{height:96px;width:14px;flex:0 0 auto}
.ld-echo-gap em{font-style:normal;font-size:var(--fs-cap);color:var(--ink2);
  font-family:var(--font-time);letter-spacing:var(--ls-label);
  border-left:1px solid var(--sep2);padding-left:var(--s-3)}
.ld-echo-cap{margin:var(--s-4) 0 0;padding-top:var(--s-4);border-top:1px solid var(--sep2);
  font-size:var(--fs-foot);line-height:1.8;color:var(--ink2);max-width:44ch}
/* 三拍：fill-mode 用 both，动画没跑到之前是初始态、跑完停在终态。
   省电偏好下整段直接落到终态（见文件末尾那条 reduce 块）。 */
.ld-e1{animation:ld-e-in .5s var(--ease-pop) .15s both}
.ld-echo-gap{animation:ld-e-in .5s var(--ease-pop) .55s both}
.ld-e3{animation:ld-e-in .5s var(--ease-pop) 1.6s both}
.ld-echo-cap{animation:ld-e-in .5s var(--ease-pop) 2.1s both}
@keyframes ld-e-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
/* Thread 的描边比上面那两拍晚半拍起步，看起来才像"是这句话把它画下来的" */
.ld-echo-gap .thread line{animation-delay:.9s}
.ld-echo-gap .thread .nd.now{animation-delay:1.75s}
.ld-echo-gap .thread .nd.past{animation-delay:.9s}
.ld-echo .av.waving::before{animation-delay:1.75s}
.ld-echo .av.waving::after{animation-delay:1.92s}

/* ---------- 试一句：从首屏挪到第 2 段，和「TA 为什么接得上」同题 ---------- */
.ld-demo-wide{max-width:none}
.ld-try{padding-top:0}

/* ---------- 第 3 段：三段往来，讲「TA 为什么接得上」 ---------- */
.ld-thread{display:flex;flex-direction:column;gap:var(--s-8)}
.ld-turn{display:flex;flex-direction:column;gap:var(--s-2);max-width:520px}
.ld-when{margin:0 0 var(--s-3);font-size:var(--fs-cap);letter-spacing:var(--ls-caps);
  color:var(--ink2);text-transform:none;font-family:var(--font-time)}
/* 「为什么」那一行是这一段的落点：签名色 + 一条竖线，
   它讲的是"过去连到了现在"，所以视觉上真的给它一根连接线。 */
.ld-why{margin:var(--s-3) 0 0;padding-left:var(--s-4);border-left:2px solid var(--echo);
  font-size:var(--fs-foot);line-height:1.7;color:var(--ink2);max-width:44ch}
/* 演示用的主动消息：和聊天页同一套语义（左上角一句小字说明这是 TA 先开口的） */
.ld-chat .row.pro,.ld-turn .row.pro{position:relative;padding-top:16px;margin-top:var(--s-5)}
.ld-turn .row.pro::before{content:"TA 主动想起你";position:absolute;top:0;left:2px;
  font-size:var(--fs-micro);color:var(--echo-ink);letter-spacing:var(--ls-label);font-weight:600}
.ld-turn .row.pro .av{box-shadow:0 0 0 3px var(--echo-bg)}

/* ---------- 第 4 段：你们之间 ---------- */
.ld-rel{display:flex;flex-direction:column;max-width:64ch}
.ld-relrow{display:flex;gap:var(--s-4);align-items:baseline;padding:var(--s-4) 0;
  border-top:1px solid var(--sep2)}
.ld-relrow:first-child{border-top:0;padding-top:0}
.ld-relrow .when{flex:0 0 88px;font-size:var(--fs-foot);font-weight:600;color:var(--bond-ink)}
.ld-relrow .what{flex:1;min-width:0;font-size:var(--fs-sub);line-height:var(--lh-prose);
  color:var(--ink2)}

/* ---------- 第 6 段：开始 ---------- */
.ld-sec-last{padding-bottom:clamp(56px,8vw,88px)}
.ld-begin{max-width:44ch;padding-bottom:clamp(40px,6vw,64px);border-bottom:1px solid var(--sep)}
.ld-sec-last .ld-trust{margin-top:clamp(40px,6vw,64px)}

/* ---------- 小节通用 ---------- */
.ld-sec-head{max-width:44ch;margin-bottom:clamp(28px,4vw,44px)}
.ld-h2{margin:0;font-family:var(--font-prose);font-size:clamp(27px,4.6vw,42px);
  font-weight:500;line-height:1.22;
  letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.ld-sec-head .ld-sub{margin-top:var(--s-4);font-size:var(--fs-body);color:var(--ink2);
  max-width:48ch;line-height:var(--lh-prose)}

/* ---------- 记得什么：左边一张「TA 眼里的你」，右边三条说明 ----------
   这一节是记忆，所以整节坐青瓷那一档：句子用衬线（是"TA 眼里的你"，
   不是一张表），左侧分类词用等宽小字，"已忘掉"那条真的淡下去。 */
.ld-mem{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,48px)}
.ld-mem-list{background:var(--bg2);border:1px solid var(--sep2);border-radius:var(--r-card);
  padding:var(--s-5)}
.ld-mem-cap{margin:0 0 var(--s-3);font-size:var(--fs-micro);letter-spacing:var(--ls-caps);
  color:var(--mnem-ink);font-weight:600}
.ld-memrow{display:flex;gap:var(--s-2);font-family:var(--font-prose);
  font-size:var(--fs-sub);line-height:1.75;
  color:var(--ink);padding:10px 0;border-top:1px solid var(--sep2)}
.ld-memrow:first-of-type{border-top:0}
.ld-memrow>span{flex:0 0 68px;background:none;padding:0;margin:0;
  font-family:var(--font-ui);
  font-size:var(--fs-cap);font-weight:600;color:var(--ink2);letter-spacing:var(--ls-label)}
/* 「已忘掉」要淡下去，但它是**一个标签**不是装饰，所以字走 --ink2、
   淡的感觉交给删除线本身（--ink3 在 12px 上只有 4.01:1）。 */
.ld-memrow.gone{color:var(--ink3);text-decoration:line-through;
  text-decoration-color:var(--sep)}
.ld-memrow.gone>span{color:var(--ink2)}
.ld-mem-rows{display:flex;flex-direction:column;gap:0}
.ld-mem-item{padding:var(--s-5) 0;border-top:1px solid var(--sep2)}
.ld-mem-item:first-child{border-top:0;padding-top:0}
.ld-mem-item b{display:block;font-size:var(--fs-body);font-weight:600;color:var(--ink);
  letter-spacing:var(--ls-title)}
.ld-mem-item p{margin:6px 0 0;font-size:var(--fs-sub);line-height:var(--lh-prose);
  color:var(--ink2);max-width:52ch}

/* ---------- 有哪些人：卡片是「一个人」，所以只有这一节配用卡片 ---------- */
.ld-roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.ld-role-cap{margin:var(--s-5) 0 0;font-size:var(--fs-cap);color:var(--ink2);line-height:1.7;
  max-width:56ch}

/* ---------- 边界：一个列表，四行。不是四张卡。 ---------- */
.ld-trust{list-style:none;margin:0;padding:0}
.ld-trust li{padding:var(--s-5) 0;border-top:1px solid var(--sep2);
  font-size:var(--fs-sub);line-height:var(--lh-prose);color:var(--ink2);max-width:64ch}
.ld-trust li:first-child{border-top:0;padding-top:0}
.ld-trust li b{display:block;font-size:var(--fs-body);font-weight:600;color:var(--ink);
  margin-bottom:4px;letter-spacing:var(--ls-title)}

/* ---------- 收尾：一句话 + 一颗按钮。不再是深色横幅。 ---------- */
.ld-end{margin-top:clamp(32px,5vw,56px);padding-top:clamp(24px,4vw,40px);
  border-top:1px solid var(--sep)}
.ld-end p{margin:0;font-size:var(--fs-title);font-weight:500;color:var(--ink);
  letter-spacing:var(--ls-title)}
.ld-end-acts{display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap;margin-top:var(--s-5)}
.ld-end-acts .btn{padding:13px 22px;font-size:var(--fs-sub)}
.ld-end-fine{margin-top:var(--s-5);font-size:var(--fs-cap);color:var(--ink2);line-height:1.8;
  max-width:60ch}
.ld-end-fine a{color:var(--ink2);text-decoration:underline;text-underline-offset:2px}

/* ---------- 页脚 ---------- */
.ld-foot{border-top:1px solid var(--sep);padding-block:var(--s-8) var(--s-6);
  background:var(--bg)}
.ld-foot-in{display:flex;flex-wrap:wrap;gap:var(--s-6);justify-content:space-between}
.ld-foot-brand{max-width:38ch}
.ld-foot-brand img{display:block;border-radius:7px;margin-bottom:var(--s-3)}
.ld-foot-brand b{font-size:var(--fs-sub);font-weight:600;color:var(--ink)}
.ld-foot-brand p{margin:6px 0 0;font-size:var(--fs-foot);color:var(--ink2);line-height:1.7}
.ld-foot-links{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);align-content:flex-start}
.ld-foot-links a{font-size:var(--fs-foot);color:var(--ink2)}
.ld-foot-links a:hover{color:var(--ink)}
/* 页脚两组链接竖着排：法律条款从 2 条变 6 条以后，和「注册/登录」并排横铺
   在 1440 上会被 space-between 拉到两个角落，在 360 上则挤成一团。
   上下两行、中间 16px，两边都成立。min-width:0 是必须的——flex 子项默认
   min-width:auto，一条超长链接就会把整行顶出横向滚动。 */
.ld-foot-navs{display:flex;flex-direction:column;gap:var(--s-4);flex:1 1 240px;min-width:0}
.ld-foot-legal{gap:var(--s-2) var(--s-4)}
.ld-foot-legal a{overflow-wrap:anywhere}
.ld-copy{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);
  margin-top:var(--s-7);padding-top:var(--s-4);border-top:1px solid var(--sep2);
  font-size:var(--fs-cap);color:var(--ink2)}

/* ---------- 入场：只有 0.4 的不透明度和 8px 位移，没有缩放、没有视差 ---------- */
html.ld-js .ld-rv{opacity:0;transform:translateY(8px)}
html.ld-js .ld-rv.in{opacity:1;transform:none;
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
/* 没有 JS：内容必须原样可见，观察器永远不跑就等于页面永远不出现，这是事故 */
html:not(.ld-js) .ld-rv{opacity:1;transform:none}

/* ---------- 窄屏（<900px）：旁注收掉，目录折不成两排而是整条隐藏 ---------- */
@media (max-width:899px){
  .ld-float{display:none}
  .ld-hero-side{padding-top:0}
  .ld-demo{max-width:none;padding:var(--s-4)}
  /* 首屏三处收一点，换出演示面板的露出量：标题 34px、行距 1.1、说明压成一行 */
  .ld-h1{font-size:clamp(31px,8.6vw,40px);line-height:1.1}
  .ld-lead{margin-top:var(--s-4);font-size:17px}
  .ld-cta{margin-top:var(--s-5);gap:var(--s-4)}
  .ld-cta .btn{padding:12px 20px;font-size:var(--fs-sub)}
  .ld-note{margin-top:var(--s-4);font-size:var(--fs-micro);line-height:1.6}
  .ld-hero{padding-top:20px}
}

/* ---------- 省电动效偏好：位移与淡入全部归零 ---------- */
@media (prefers-reduced-motion:reduce){
  html.ld-js .ld-rv,.ld-chat .row.pop{opacity:1;transform:none}
  .ld-arrow::after{transition:none}
  /* 回响演示整段落到终态：该看见的三样（过去 / 连线 / 现在）一律静态摆好 */
  .ld-e1,.ld-echo-gap,.ld-e3,.ld-echo-cap{animation:none;opacity:1;transform:none}
  .ld-echo .av.waving::before,.ld-echo .av.waving::after{animation:none;opacity:0}
}

/* ---------- 宽屏 ---------- */
@media (min-width:900px){
  body.ld{--ld-pad:24px}
  .ld-br{display:inline}
  .ld-hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  /* 旁注和演示面板同宽同左边，读起来是「这段的说明」而不是飘在上面的标签 */
  .ld-hero-side{width:100%;max-width:440px;margin-inline:auto}
  .ld-float{display:block}
  .ld-mem{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .ld-roles{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1040px){
  .ld-anchors{display:flex}
}
@media (min-width:1200px){
  body.ld{--ld-pad:32px}
  .ld-hero,.ld-sec{padding-block:clamp(72px,7vw,104px)}
}