/* 赞来生活官网 v1.1 —— 上线质感版
   设计语言：墨 #101418 / 纸 #F4F1EA / 赭 #DE5B33 / 灰 #9A948A
   宋体标题 + 黑体正文；硬阴影印刷感；无摄影图、全结构化 SVG；零外链字体、零图片文件（首屏 <1s @4G） */
:root{
  --ink:#101418; --ink2:#2A2F35; --paper:#F4F1EA; --paper2:#EDE9E0;
  /* --mid 原是 #857F73，纸底对比 3.4:1 低于 WCAG AA（4.5:1）；
     2026-10-26 压暗到 #6C675D = 4.98:1，小字（lede/pnote/facts）才够读 */
  --red:#DE5B33; --red-d:#C74D28; --mid:#6C675D; --line:#DDD8CE;
  --bd:rgba(16,20,24,.09); --bd-h:rgba(16,20,24,.16);
  --shadow-s:0 1px 2px rgba(16,20,24,.05),0 10px 28px -14px rgba(16,20,24,.14);
  --shadow-m:0 2px 4px rgba(16,20,24,.06),0 18px 40px -16px rgba(16,20,24,.22);
  --serif:"Noto Serif SC","Songti SC","STSong","SimSun",serif;
  --sans:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.75;-webkit-font-smoothing:antialiased}
/* 纸面细网格底纹（极淡，只给质感不吃性能） */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    repeating-linear-gradient(0deg,transparent 0 35px,rgba(16,20,24,.022) 35px 36px),
    repeating-linear-gradient(90deg,transparent 0 35px,rgba(16,20,24,.022) 35px 36px);}
body>*{position:relative;z-index:1}
a{color:inherit}
img,svg{display:block;max-width:100%}
h1,h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:.02em}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2.5px solid var(--red);outline-offset:2px;border-radius:4px}

/* ── 导航（毛玻璃吸顶） ── */
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 24px;
  border-bottom:1px solid rgba(16,20,24,.10);background:rgba(244,241,234,.88);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);position:sticky;top:0;z-index:20;
  box-shadow:0 8px 24px -18px rgba(16,20,24,.30)}
.nav .logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav .logo svg{width:auto;height:38px;flex-shrink:0;transition:transform .3s}
.nav .logo:hover svg{transform:translateY(-1px)}
.nav .logo-txt{font-family:var(--serif);font-weight:700;font-size:16px;letter-spacing:2px;color:var(--ink);display:flex;flex-direction:column;line-height:1.2}
.nav .logo-txt small{font-family:var(--sans);font-weight:400;font-size:9px;color:var(--mid);letter-spacing:1.5px}
.nav .links{display:flex;align-items:center;gap:24px;font-size:13px}
.nav .links a{text-decoration:none;color:#55504a;position:relative;transition:color .15s}
.nav .links a:not(.cta-mini)::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--red);transition:right .2s}
.nav .links a:not(.cta-mini):hover{color:var(--red)}
.nav .links a:not(.cta-mini):hover::after{right:0}
.nav .links a.cur{color:var(--ink);font-weight:700}
.nav .links a.cur::after{right:0}
.nav .cta-mini{background:var(--red);color:#fff!important;padding:11px 20px;border-radius:11px;font-size:14px;font-weight:700;letter-spacing:.4px;box-shadow:0 8px 20px -10px rgba(217,84,47,.8);transition:background .15s,transform .15s}
.nav .cta-mini:hover{background:var(--red);transform:translateY(-1px)}
.nav .burger{display:none;flex-direction:column;gap:4px;cursor:pointer;padding:9px;background:none;border:none}
.nav .burger i{width:20px;height:2px;background:var(--ink)}
.mobmenu{display:none;border-bottom:1px solid rgba(16,20,24,.10);padding:6px 24px 12px;background:var(--paper)}
.mobmenu.on{display:block}
.mobmenu a{display:block;font-size:14px;padding:12px 0;border-bottom:1px solid rgba(16,20,24,.07);text-decoration:none}
.mobmenu a:active{color:var(--red)}

/* ── 按钮（柔和投影） ── */
.btn{display:inline-block;background:var(--red);color:#fff;border:none;border-radius:11px;
  padding:13px 24px;font-size:14px;font-weight:700;text-align:center;text-decoration:none;cursor:pointer;
  font-family:var(--sans);box-shadow:0 10px 22px -10px rgba(222,91,51,.55);
  transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{transform:translateY(-2px);background:#E86438;box-shadow:0 14px 28px -10px rgba(222,91,51,.62)}
.btn:active{transform:translateY(0);box-shadow:0 4px 12px -6px rgba(222,91,51,.5)}
.btn.ink{background:var(--ink);box-shadow:0 10px 22px -10px rgba(16,20,24,.5)}
.btn.ink:hover{background:var(--ink2);box-shadow:0 14px 28px -10px rgba(16,20,24,.55)}
.btn.ghost{background:#fff;color:var(--ink);font-weight:400;box-shadow:inset 0 0 0 1px rgba(16,20,24,.16),0 8px 18px -12px rgba(16,20,24,.28)}
.btn.ghost:hover{color:var(--red);background:#fff;box-shadow:inset 0 0 0 1px rgba(222,91,51,.45),0 10px 20px -12px rgba(222,91,51,.3)}
.btn.block{display:block;width:100%}

/* ── 首屏 Hero ── */
.hero{display:flex;gap:44px;align-items:center;padding:60px 24px 52px;max-width:1160px;margin:0 auto}
.hero .htxt{flex:1.15}
.hero h1{font-size:42px;line-height:1.35;margin-bottom:16px}
/* slogan 句点印章 */
.hero h1::after{content:"";display:inline-block;width:.3em;height:.3em;background:var(--red);margin-left:.14em}
.hero .hsub{font-size:14px;color:#4a463f;line-height:1.95;margin-bottom:24px;max-width:34em}
.hero .hsub b{color:var(--red)}
.hero .hbtns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.hero .hnote{font-size:12px;color:var(--mid)}
/* 进场序列（纯 CSS，load 一次） */
.hero .htxt>*,.hero .hpic{animation:rise .6s cubic-bezier(.2,.7,.3,1) both}
.hero .hsub{animation-delay:.08s}.hero .hbtns{animation-delay:.16s}.hero .hnote{animation-delay:.24s}.hero .hpic{animation-delay:.15s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.hero .hpic{flex:1;min-width:300px;display:flex;flex-direction:column;gap:14px}

/* 主视觉：洛卡待机（胶囊眼+腮红 · v0.3 定稿形象，深底机身提亮 #242B31） */
.screen-card{background:var(--ink);border-radius:18px;padding:26px 18px 16px;
  box-shadow:0 28px 56px -22px rgba(16,20,24,.5);position:relative;overflow:hidden}
.screen-card::after{content:"";position:absolute;top:12px;right:14px;width:7px;height:7px;border-radius:50%;background:var(--red);
  animation:breath 4s ease-in-out infinite}
@keyframes breath{0%,100%{opacity:.35}50%{opacity:1}}
.screen-card svg{width:100%;max-width:280px;margin:0 auto}
.screen-cap{text-align:center;color:rgba(244,241,234,.55);font-size:11.5px;letter-spacing:.06em;margin-top:8px}
.screen-cap b{color:rgba(244,241,234,.85);font-weight:400}
.eye{transform-box:fill-box;transform-origin:center;animation:blink 5.5s ease-in-out infinite}
.eye.r{animation-delay:.06s}
@keyframes blink{0%,91%,100%{transform:scaleY(1)}94%{transform:scaleY(.06)}97%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.eye,.screen-card::after,.hero .htxt>*,.hero .hpic{animation:none!important}}

/* 四格 → 三小格 */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tile{background:#fff;border:1px solid var(--bd);border-radius:14px;padding:16px 12px 13px;text-align:center;
  box-shadow:var(--shadow-s);transition:transform .18s,box-shadow .18s,border-color .18s}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-m);border-color:var(--bd-h)}
.tile svg{width:100%;max-width:120px;margin:0 auto 10px;transition:transform .25s}
.tile:hover svg{transform:scale(1.06)}
.tile p{font-size:12px;color:#4a463f;line-height:1.55}
.tile p b{display:block;color:var(--ink);font-size:13px;margin-bottom:1px}
.tile .n{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:50%;
  background:var(--red);color:#fff;font-size:11px;margin-bottom:9px;font-family:var(--serif);font-weight:700}

/* ── 信任条 ── */
.trust{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:16px 24px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);background:var(--paper2);max-width:1160px;margin:0 auto;border-radius:0 0 14px 14px}
.trust span{font-size:12px;color:#4a463f;border:1px solid var(--bd);border-radius:15px;padding:5px 14px;background:#fff;box-shadow:0 1px 2px rgba(16,20,24,.04);white-space:nowrap}

/* ── 区块 ── */
.sect{padding:56px 24px;max-width:1160px;margin:0 auto}
.sect>h2{font-size:23px;margin-bottom:6px;display:flex;align-items:center;gap:12px}
.sect>h2::before{content:"";width:11px;height:11px;background:var(--red);border-radius:3px;flex-shrink:0}
.sect>.lede{font-size:13px;color:var(--mid);margin-bottom:26px;padding-left:23px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--bd);border-radius:14px;padding:20px 22px;box-shadow:var(--shadow-s);
  transition:transform .18s,box-shadow .18s,border-color .18s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-m);border-color:var(--bd-h)}
.card h3{font-size:15.5px;margin-bottom:8px}
.card p{font-size:13px;color:#4a463f;line-height:1.85}
.card .num{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:50%;
  background:var(--red);color:#fff;font-size:12px;margin-right:10px;flex-shrink:0;font-family:var(--sans)}
.card .head{display:flex;align-items:center;margin-bottom:8px}
.card .head h3{margin:0}
.card.danger{border-color:rgba(222,91,51,.4);background:#FDF6F1;box-shadow:0 1px 2px rgba(222,91,51,.05),0 12px 30px -14px rgba(222,91,51,.22)}
.card.danger:hover{border-color:rgba(222,91,51,.55);box-shadow:0 2px 4px rgba(222,91,51,.06),0 18px 40px -16px rgba(222,91,51,.3)}
.card.danger h3{color:var(--red)}
.tsize{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}

/* 生活主义（会员）说明带 —— 强调「不收费」 */
.club{background:linear-gradient(180deg,#FDF6F1,#FAF2EC);border:1px solid rgba(222,91,51,.28);border-radius:14px;
  padding:20px 24px;margin-bottom:18px;box-shadow:0 1px 2px rgba(222,91,51,.05),0 14px 34px -18px rgba(222,91,51,.28)}
.club-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.club-top h3{font-size:16px;color:var(--red)}
.club-tag{font-size:11.5px;color:var(--red);border:1px solid rgba(222,91,51,.4);background:#fff;
  border-radius:20px;padding:3px 10px;white-space:nowrap}
.club p{font-size:13px;color:#4a463f;line-height:1.9}

/* 渠道码展示 */
.chip{font-size:12px;background:#fff;border:1px solid var(--bd);border-radius:8px;padding:9px 12px;color:#4a463f;
  word-break:break-all;font-family:Consolas,"Courier New",monospace}
.chip b{color:var(--red);font-weight:400}

/* 搜索框（帮助中心） */
.search{display:flex;gap:12px;margin-bottom:26px}
.search input{flex:1;background:#fff;border:1px solid rgba(16,20,24,.14);border-radius:11px;padding:13px 17px;font-size:14px;
  font-family:var(--sans);outline:none;box-shadow:var(--shadow-s);transition:box-shadow .15s,border-color .15s}
.search input:focus{border-color:var(--red);box-shadow:0 0 0 3.5px rgba(222,91,51,.14),var(--shadow-s)}
.search .s-hint{font-size:11.5px;color:var(--mid);align-self:center;white-space:nowrap}

/* CTA（墨底反白收尾） */
.cta{padding:52px 24px;text-align:center;background:var(--ink);color:var(--paper)}
.cta p{font-size:13px;color:rgba(244,241,234,.55);margin-bottom:18px;letter-spacing:.05em}
.cta .btn{box-shadow:0 14px 30px -12px rgba(0,0,0,.6)}
.cta .btn.ghost{background:transparent;color:var(--paper);border:none;box-shadow:inset 0 0 0 1px rgba(244,241,234,.55)}
.cta .btn.ghost:hover{color:var(--red);background:transparent;box-shadow:inset 0 0 0 1px rgba(222,91,51,.7)}

/* 页脚（墨底） */
.foot{padding:30px 24px 34px;background:var(--ink);color:rgba(244,241,234,.5);font-size:11.5px;line-height:2.1}
.foot .frow{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:8px}
.foot a{color:rgba(244,241,234,.72);text-decoration:none;border-bottom:1px solid rgba(244,241,234,.25);padding-bottom:1px;transition:color .15s,border-color .15s}
.foot a:hover{color:var(--red);border-color:var(--red)}
.foot .frow a:first-child{color:var(--paper);font-weight:700}
.foot .zlockup{float:right;width:180px;height:auto;margin-left:16px;opacity:.95}
/* 备案号：工信部要求必须展示且能点开 beian.miit.gov.cn。
   故意做小、做淡——它是合规信息，不该跟页脚那排导航抢注意力。 */
.foot .icp{display:inline-block;margin-top:2px;font-size:11px;letter-spacing:.3px;opacity:.78;font-variant-numeric:tabular-nums}

/* 手机吸底下载条（毛玻璃） */
.dock{display:none;position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(244,241,234,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(16,20,24,.10);box-shadow:0 -10px 30px -18px rgba(16,20,24,.35);z-index:30}
.dock .btn{width:100%}

/* 404 */
.p404{text-align:center;padding:76px 24px 96px}
.p404 .eye-card{width:200px;margin:0 auto 26px;background:var(--ink);border-radius:20px;padding:24px 14px 10px;box-shadow:0 28px 56px -22px rgba(16,20,24,.5)}
.p404 h1{font-size:30px;margin-bottom:12px}
.p404 p{color:#6B665E;margin-bottom:26px}
.p404 .hbtns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.p404 .code{font-family:Consolas,monospace;font-size:12px;color:#6B665E;margin-top:38px}

/* 滚动 reveal（JS 加 html.js 后才启用；无 JS 时全部可见） */
html.js .rv{opacity:0;transform:translateY(16px)}
html.js .rv.in{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1)}

/* ── 竞品对比（首页 #diff） ── */
.compare{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.ccol{background:#fff;border:1px solid var(--bd);border-radius:16px;padding:20px 20px 6px;box-shadow:var(--shadow-s);
  transition:transform .18s,box-shadow .18s}
.ccol:hover{transform:translateY(-3px);box-shadow:var(--shadow-m)}
.ccol .ch{font-family:var(--serif);font-size:15.5px;font-weight:700;color:#8A8478;padding-bottom:13px;
  border-bottom:1px solid #EFEBE2;margin-bottom:2px;letter-spacing:.02em}
.ccol ul{list-style:none}
.ccol li{padding:11px 0;border-bottom:1px solid #F3EFE7;font-size:12.8px;color:#6B665E;line-height:1.7}
.ccol li:last-child{border-bottom:none}
.ccol li b{display:block;font-size:13.3px;color:var(--ink);margin-bottom:2px}
.ccol.us{background:var(--ink);border-color:var(--ink);box-shadow:0 24px 48px -22px rgba(16,20,24,.5)}
.ccol.us:hover{transform:translateY(-3px);box-shadow:0 30px 56px -22px rgba(16,20,24,.6)}
.ccol.us .ch{color:rgba(244,241,234,.55);border-color:rgba(244,241,234,.14)}
.ccol.us li{color:rgba(244,241,234,.6);border-color:rgba(244,241,234,.08)}
.ccol.us li b{color:var(--paper)}
.ccol.us li b::before{content:"";display:inline-block;width:6px;height:6px;background:var(--red);
  margin-right:7px;vertical-align:1px;border-radius:1.5px}
.pnote{font-size:12.5px;color:var(--mid);margin-top:16px}

/* ── 帮助中心：折叠分组 ── */
.hgroups{display:flex;flex-direction:column;gap:12px}
.hgroup{background:#fff;border:1px solid var(--bd);border-radius:14px;box-shadow:var(--shadow-s);overflow:hidden;
  transition:border-color .15s,box-shadow .15s}
.hgroup:hover{border-color:var(--bd-h)}
.hgroup[open]{border-color:var(--bd-h);box-shadow:var(--shadow-m)}
.hgroup>summary{display:flex;align-items:center;gap:14px;padding:16px 20px;cursor:pointer;list-style:none;user-select:none}
.hgroup>summary::-webkit-details-marker{display:none}
.hgi{width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;font-size:12.5px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-family:var(--sans)}
.hgt{flex:1;min-width:0}
.hgt b{display:block;font-family:var(--serif);font-size:15.5px;color:var(--ink);letter-spacing:.02em}
.hgt small{display:block;font-size:12px;color:var(--mid);margin-top:3px}
.rch{display:block;flex:0 0 auto;width:8px;height:8px;border-right:1.8px solid #9A948A;border-bottom:1.8px solid #9A948A;border-radius:1px;transform:rotate(-45deg);margin-right:4px;transition:transform .2s}
.hgroup>summary .rch{margin-right:2px}
.hgroup[open]>summary .rch{transform:rotate(45deg)}
.hlist{padding:0 20px 14px}
.hlist>details{border-top:1px solid #F1EDE4}
.hlist>details>summary{display:flex;align-items:center;gap:10px;padding:13px 0;cursor:pointer;list-style:none;
  font-size:13.5px;color:var(--ink)}
.hlist>details>summary::-webkit-details-marker{display:none}
.hlist>details>summary::after{content:"";flex:0 0 auto;width:7px;height:7px;margin-left:auto;margin-right:3px;
  border-right:1.6px solid #BDB7AA;border-bottom:1.6px solid #BDB7AA;border-radius:1px;transform:rotate(45deg);
  transition:transform .2s,border-color .2s}
.hlist>details[open]>summary::after{transform:rotate(225deg);border-color:var(--red)}
.hlist>details[open]>summary{color:var(--red)}
.hstep{border-left:2px solid rgba(222,91,51,.28);padding:2px 0 4px 14px;margin:0 0 12px}
.hstep p{font-size:13px;color:#4a463f;line-height:1.85;margin-bottom:6px}
.hstep p:last-child{margin-bottom:0}
.hstep b{color:var(--ink)}
.hmore{margin-top:22px;padding:24px;text-align:center;border:1px dashed #CFC8B8;border-radius:14px;background:rgba(255,255,255,.55)}
.hmore p{font-size:13.5px;color:#4a463f;margin-bottom:15px}
.hbtns2{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── 法务文档（隐私政策 / 用户协议） ── */
.doc{max-width:820px}
.doc .toc{display:flex;flex-wrap:wrap;gap:8px 20px;background:#fff;border:1px solid var(--bd);border-radius:12px;
  padding:16px 20px;margin-bottom:30px;box-shadow:var(--shadow-s)}
.doc .toc a{font-size:12.5px;color:#4a463f;text-decoration:none;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.doc .toc a:hover{color:var(--red);border-color:var(--red)}
.doc h3{font-size:17px;margin:34px 0 12px;padding-left:14px;border-left:3px solid var(--red);line-height:1.45}
.doc p{font-size:13.5px;color:#3a3730;line-height:1.95;margin-bottom:13px}
.doc ul{margin:0 0 14px;padding-left:20px}
.doc li{font-size:13.5px;color:#3a3730;line-height:1.95;margin-bottom:7px}
.doc a{color:var(--red);text-decoration:underline}
.doc b{color:var(--ink)}
.doc-table{background:#fff;border:1px solid var(--bd);border-radius:12px;overflow:hidden;margin:0 0 16px;box-shadow:var(--shadow-s)}
.doc-table .dr{display:flex;gap:16px;padding:13px 18px;border-bottom:1px solid #F1EDE4;font-size:13px;color:#4a463f;line-height:1.75}
.doc-table .dr:last-child{border-bottom:none}
.doc-table .dr b{flex:0 0 176px;color:var(--ink)}
.doc-note{background:#EDE9E0;border-radius:10px;padding:14px 16px;font-size:12.5px;color:var(--mid);line-height:1.85}

/* ── 关于页：故事 ── */
.story{max-width:760px;margin-top:8px}
.story p{font-size:14.5px;color:#3a3730;line-height:2.05;margin-bottom:16px}
.story p b{color:var(--ink)}
.story .story-end{font-family:var(--serif);font-size:16px;color:var(--ink);padding-left:16px;
  border-left:3px solid var(--red);line-height:1.85;margin-top:24px}

/* ── 平板 768–1023 ── */
@media (max-width:1023px){
  .hero{flex-direction:column;text-align:center;padding:42px 20px;gap:30px}
  .hero .hsub{margin-left:auto;margin-right:auto}
  .hero .hbtns{justify-content:center}
  .hero h1{font-size:31px}
  .hero .hpic{width:100%;max-width:600px;margin:0 auto}
  .tiles{max-width:560px;margin:0 auto;width:100%}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .nav .links{gap:15px;font-size:12.5px}
}

/* ── 手机 <768 ── */
@media (max-width:767px){
  .nav{padding:12px 16px}
  .nav .logo svg{height:34px}
  .nav .links{display:none}
  .nav .burger{display:flex}
  .hero{padding:30px 16px 44px;text-align:left;gap:22px}
  .hero h1{font-size:26px}
  .hero .hsub{font-size:13px}
  .hero .hbtns{flex-direction:column}
  .hero .hbtns .btn{width:100%}
  .tiles{grid-template-columns:1fr}
  /* 2026-10-26：中段不再统一压 78px——吸底条是 fixed 的，只有页尾会被它永久盖住，
     每节都留 78px 只会让手机版变得松散。页尾的补偿放到 .foot。 */
  .sect{padding:36px 16px 44px}
  .sect>.lede{padding-left:0}
  .grid2,.grid3,.tsize{grid-template-columns:1fr}
  .trust{padding:12px 16px 20px}
  .dock{display:block}
  .cta{padding:38px 16px 44px}
  /* 吸底条实高约 74px；留 96px 才能保证页脚最后两行（含版权行）不被压住 */
  .foot{padding:24px 16px calc(96px + env(safe-area-inset-bottom))}
  .foot .frow{gap:12px}
  .foot .zlockup{float:none;display:block;margin:0 0 14px}
  .p404{padding:56px 16px 56px}
}

/* ── 手机端改造（2026-10-23）：横排 tile / 纯文字信任条 / 对比表单列 ── */
@media (max-width:767px){
  /* 三格优势：从「竖排大卡占三屏」压成横排行，一屏看完 */
  .tiles{gap:10px}
  .tile{display:flex;align-items:center;gap:13px;text-align:left;padding:12px 14px}
  .tile .n{display:none}
  .tile svg{width:58px;height:auto;flex:0 0 58px;margin:0}
  .tile:hover{transform:none}
  .tile p{font-size:12.5px;line-height:1.6}
  .tile p b{font-size:13.5px;margin-bottom:2px}
  /* 信任条：去掉 5 个药丸边框，两列纯文字 */
  .trust{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;padding:14px 16px 20px;background:var(--paper2)}
  .trust span{border:none;background:none;box-shadow:none;padding:2px 0;font-size:12.5px;color:#4a463f;white-space:normal}
  .trust span:last-child{grid-column:1/-1}
  /* 竞品对比：单列 */
  .compare{grid-template-columns:1fr;gap:12px}
  .ccol{padding:16px 16px 4px}
  .ccol:hover{transform:none}
  /* 帮助中心折叠 */
  .hgroup>summary{padding:14px 16px;gap:11px}
  .hlist{padding:0 16px 12px}
  .hgt b{font-size:15px}
  .hbtns2 .btn{width:100%}
  /* 法务文档 */
  .doc .toc{padding:14px 16px;gap:7px 16px;margin-bottom:24px}
  .doc h3{font-size:16px;margin:28px 0 10px}
  .doc-table .dr{flex-direction:column;gap:4px;padding:12px 15px}
  .doc-table .dr b{flex:none}
  .story p{font-size:14px;line-height:2}
}

/* ── 关于页：公司信息小表 ── */
.facts{margin-top:18px;border-top:1px solid var(--line);padding-top:4px}
.facts div{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid rgba(16,20,24,.05);font-size:13px}
.facts div:last-child{border-bottom:none}
.facts b{flex:0 0 52px;color:var(--mid);font-weight:400;font-size:12.5px}
.facts span{color:#3a3730}


/* 帮助中心：每组显示问题条数（2026-10-26） */
.hcount{margin-left:auto;margin-right:10px;font-size:11.5px;color:var(--mid);white-space:nowrap}
.hgroup[open] .hcount{color:#8A8478}

/* ══════════ 2026-10-26 · P0/P1 修复 ══════════ */

/* 1) 手机端 hero 副标题的硬换行失效：避免「…家里的小 / NAS」这类断行 */
@media (max-width:767px){ .hero .hsub .br-d{display:none} }

/* 2) 生活主义说明带：三处连续加粗拆成「一句结论 + 两条短行」，层级清楚才读得下去 */
.club p+p{margin-top:9px}
.club-lines{list-style:none;margin-top:10px;display:grid;gap:7px}
.club-lines li{font-size:13px;color:#4a463f;line-height:1.8;padding-left:15px;position:relative}
.club-lines li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--red);border-radius:1.5px}
.club-lines b{color:var(--ink);margin-right:6px}

/* 3) 帮助中心：搜索无结果时的兜底（不让用户对着一片空白） */
.noresult{background:#fff;border:1px dashed #CFC8B8;border-radius:14px;padding:26px 22px;text-align:center;box-shadow:var(--shadow-s)}
.noresult p{font-size:13.5px;color:#4a463f;margin-bottom:6px}
.noresult p:last-of-type{margin-bottom:14px}
.noresult b{color:var(--ink)}
.noresult .hbtns2{justify-content:center}
/* 搜索时条数是全局数，留着会误导 */
body.searching .hcount{display:none}

/* 4) 动效降级：滚动显现的过渡也要尊重系统设置；打印时全部展开，避免打成白纸 */
@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1!important;transform:none!important}
}
@media print{
  html.js .rv{opacity:1!important;transform:none!important}
  .hero .htxt>*,.hero .hpic,.eye{animation:none!important}
  .nav,.dock,.mobmenu,.cta .btn{display:none!important}
  body::before{display:none}
  body{background:#fff}
}


/* 真机实拍那段图已从首页移除：它和首屏右上角的示意图重复，
   手机上看起来像同一张图放了两次（用户 2026-10-27 反馈）。
   样式一并删掉，不留死代码。 */

/* 手机端兜底：首屏右侧那张示意卡有固定宽度，430 宽下会被裁掉右半边。
   这里限制它到容器内，并且整页不出现横向滚动。 */
@media (max-width:600px){
  html,body{overflow-x:hidden;max-width:100%}
  .hero{padding-left:16px;padding-right:16px}
  .hero .hpic{max-width:100%;width:100%}
  .screen-card,.tiles,.facts{max-width:100%}
  .shot img{max-width:100%}
}

/* 手机端总闸：整页按视口重排。
   之前 430 宽下右侧被裁掉一截（正文、卡片、图都切边），根因是某个容器仍有固定宽度；
   与其逐个找，不如在窄屏把"任何元素都不许超出容器"写死——这一屏没有需要横向滚动的元素。 */
@media (max-width:767px){
  html,body{overflow-x:hidden;width:100%}
  body *{max-width:100%}
  .hero,.trust,.sect,.shot,.grid3,.compare{box-sizing:border-box}
}

/* ── 区块内的次级小标题：和 h2 同一套视觉，只是小一号 ──
   之前「要说实话」用的是行内 style 的 h3，字号/行距/装饰都跟别的区块不一样，看着像两张皮 */
.sect>.subh{font-size:19px;margin:34px 0 4px;display:flex;align-items:center;gap:10px}
.sect>.subh::before{content:"";width:9px;height:9px;background:var(--red);border-radius:2px;flex-shrink:0}
.sect>.subh+.lede{padding-left:19px}
/* 生活主义那段的补充说明：比正文轻一档，不要抢 */
.club-soft{font-size:13px;color:var(--mid);margin-top:10px}
/* 紧凑区块：上面那节已经有留白，这一节别再加 56px */
.sect.sect-tight{padding-top:30px}
@media (max-width:767px){.sect.sect-tight{padding-top:22px}.sect>.subh{font-size:17px;margin-top:26px}}

/* ── 致谢页（thanks.html）── */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
@media (max-width:900px){.tgrid{grid-template-columns:1fr}}
.tcard{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:20px 18px;background:#fff;border:1px solid var(--bd);border-radius:14px;box-shadow:var(--shadow-s);text-decoration:none;color:inherit;transition:box-shadow .18s,transform .18s,border-color .18s}
.tcard:hover{box-shadow:var(--shadow-m);transform:translateY(-2px);border-color:var(--bd-h)}
.tlogo{width:44px;height:44px;flex-shrink:0}
.tlogo img,.tlogo svg{width:44px;height:44px;display:block;border-radius:10px}
.tcard h3{font-size:17px;line-height:1.4}
.tcard p{font-size:13.5px;color:var(--mid);line-height:1.85}
.tgo{font-size:12.5px;color:var(--red);margin-top:auto;padding-top:8px}
/* 打赏：左边插画、右边话术。窄屏改成上下排 */
.tpay{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:center;margin-top:36px;padding:22px;background:#fff;border:1px solid var(--bd);border-radius:16px;box-shadow:var(--shadow-s)}
@media (max-width:767px){.tpay{grid-template-columns:1fr;gap:14px}}
.tpay-art svg{width:100%;max-width:300px;height:auto;display:block}
.tpay-txt h3{font-size:19px;margin-bottom:12px}
.tpay-txt p{font-size:14px;color:var(--ink2);line-height:2;margin-bottom:9px}
.tpay-txt p.tpay-ps{color:var(--mid);font-size:13px;margin-bottom:0}
/* 感谢列表：名字一列、事由一列，行线分隔 */
.tlist{margin-top:38px}
.tlist .dr{display:grid;grid-template-columns:170px 1fr;gap:16px;padding:15px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.9}
.tlist .dr:last-child{border-bottom:1px solid var(--line)}
.tlist .dr b{color:var(--ink)}
.tlist .dr span{color:var(--mid)}
.tnote{font-size:12px;color:var(--mid);line-height:1.8;margin-top:14px}
@media (max-width:767px){.tlist .dr{grid-template-columns:1fr;gap:4px}}

/* ── HA 接入页（ha.html）：命令行片段 ──
   手机上不让它横向撑破版面，所以是 overflow-x 滚动而不是自动换行：
   命令一旦折行，用户复制过去会多出空格，那是最难查的一种"照着抄却跑不通"。 */
pre.cmd{background:#1A1F23;color:#F1ECDE;border-radius:10px;padding:12px 14px;
  font:12.5px/1.8 Consolas,Menlo,"Courier New",monospace;overflow-x:auto;margin:10px 0}
/* 行内代码（设置路径、目录名、HA 里的字段名）。只作用在正文区，
   不碰 404 页那个 .code 的既有写法。 */
.sect code{font-family:Consolas,Menlo,monospace;font-size:12.5px;background:rgba(26,31,35,.07);
  padding:1px 5px;border-radius:5px;white-space:nowrap}