/* ============================================================
   Earthory Pages Layer
   为 how.html / privacy.html / careers.html 三个静态页新增的组件样式。
   复用 earthory.css 的设计变量与既有类，只补充新组件。
   ============================================================ */

/* ---------- 图标：与 React 版 Phosphor 输出保持一致 ---------- */
.ic{width:1em;height:1em;fill:currentColor;flex:0 0 auto}

/* ---------- 当前页高亮 ---------- */
.nav nav a[aria-current="page"]{color:var(--sage);font-weight:650}
.nav nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

/* ---------- 子页标题里的强调词（首页有，子页原本没有） ---------- */
.subhero h1 span{color:var(--sage);position:relative}
.subhero h1 span::after{
  content:"";position:absolute;left:.02em;right:.02em;bottom:.05em;height:.055em;
  border-radius:3px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--mint),var(--sage))
}
.eo-motion .subhero h1.eo-in span::after{animation:eoUnderline .7s cubic-bezier(.22,1,.36,1) .42s forwards}

/* ---------- 各页 hero 底色 ---------- */
.how-hero{background:linear-gradient(118deg,#fff,#f7faf8 52%,#e7f1ec)}
.privacy-hero{background:linear-gradient(118deg,#fff,#f6f9f7 50%,#e4efe9)}
.careers-hero{background:linear-gradient(118deg,#fff,#fdfbf6 55%,#eef5f0)}

/* ============================================================
   1. 信号链示意（工作方式页 hero）
   ============================================================ */
.flow-stage{
  width:100%;max-width:430px;margin-left:auto;
  display:grid;align-content:center;justify-items:stretch
}
.flow-step{
  display:grid;grid-template-columns:46px 1fr;gap:16px;align-items:center;
  padding:18px 22px;border:1px solid var(--line);border-radius:18px;
  background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 14px 40px rgba(49,88,74,.07);
  transition:transform .5s var(--eo-e,cubic-bezier(.22,1,.36,1)),box-shadow .5s ease
}
.flow-step:hover{transform:translateX(6px);box-shadow:0 20px 48px rgba(49,88,74,.12)}
.flow-step i{
  width:44px;height:44px;border:1px solid var(--mint);border-radius:50%;
  display:grid;place-items:center;color:var(--sage)
}
.flow-step svg{width:22px;height:22px}
.flow-step b{display:block;font:500 21px/1.2 var(--serif)}
.flow-step span{display:block;font-size:10px;letter-spacing:.15em;color:#8a958f;margin-top:4px}
.flow-wire{
  position:relative;width:1px;height:44px;margin-left:44px;
  background:linear-gradient(180deg,var(--mint),var(--sage))
}
.flow-wire::after{
  content:"";position:absolute;left:-2.5px;top:0;
  width:6px;height:6px;border-radius:50%;background:var(--sage);
  box-shadow:0 0 10px rgba(79,146,120,.8);
  animation:eoWireFlow 2.6s linear infinite
}
.flow-wire:nth-of-type(2)::after{animation-delay:.5s}
.flow-wire:nth-of-type(3)::after{animation-delay:1s}
@keyframes eoWireFlow{
  0%{transform:translateY(-6px);opacity:0}
  18%{opacity:1}
  82%{opacity:1}
  100%{transform:translateY(44px);opacity:0}
}

/* ============================================================
   2. 数据边界示意（隐私页 hero）
   ============================================================ */
.zone-stage{
  width:100%;max-width:470px;margin-left:auto;
  display:grid;gap:0;align-content:center
}
.zone{
  border-radius:24px;padding:24px;background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)
}
.zone-device{border:1px solid var(--mint);box-shadow:0 18px 46px rgba(49,88,74,.09)}
.zone-cloud{border:1px dashed #c6d4ce;background:rgba(255,255,255,.55)}
.zone h4{
  margin:0 0 4px;font:500 19px var(--serif);
  display:flex;align-items:center;gap:9px
}
.zone h4 svg{width:19px;height:19px;color:var(--sage)}
.zone > small{display:block;color:var(--muted);font-size:12px;margin-bottom:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--line);border-radius:999px;
  padding:7px 13px;font-size:12px;color:#4b5853;background:#fff
}
.chips span::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--sage);flex:0 0 auto
}
.chips.out span::before{background:#c3ccc8}
.zone-gate{
  position:relative;justify-self:center;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 0;color:var(--sage);font-size:11px;letter-spacing:.12em
}
.zone-gate::before,.zone-gate::after{
  content:"";width:1px;height:16px;background:linear-gradient(var(--mint),var(--sage))
}
.zone-gate i{
  width:34px;height:34px;border-radius:50%;background:var(--pearl);
  border:1px solid var(--mint);display:grid;place-items:center;
  box-shadow:0 0 0 0 rgba(79,146,120,.3);animation:eoPulse 2.6s ease-out infinite
}
.zone-gate svg{width:17px;height:17px}

/* ============================================================
   2b. 人物影像舞台（招聘页 hero）
   ============================================================ */
.people-stage{
  position:relative;min-height:590px;overflow:hidden;
  border-radius:28px 0 0 28px;display:grid;place-items:center;
  background:url(/assets/bike-father.png) center calc(44% + var(--eo-py,0px))/cover no-repeat
}
.people-stage .concept-tag{bottom:24px}

/* ============================================================
   3. 数据去向对照（隐私页）
   ============================================================ */
.ledger{
  max-width:1080px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:18px
}
.ledger article{
  border:1px solid var(--line);border-radius:24px;padding:32px;background:#fff;
  box-shadow:0 18px 50px rgba(49,88,74,.06)
}
.ledger article:last-child{background:var(--ivory);box-shadow:none}
.ledger h3{
  margin:0 0 6px;font:500 25px var(--serif);
  display:flex;align-items:center;gap:10px
}
.ledger h3 svg{width:22px;height:22px;color:var(--sage)}
.ledger > article:last-child h3 svg{color:#98a49f}
.ledger article > p{color:var(--muted);font-size:13px;line-height:1.7;margin:0 0 20px}
.ledger ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.ledger li{
  display:grid;grid-template-columns:18px 1fr;gap:11px;align-items:start;
  font-size:14px;line-height:1.65;color:#4b5853
}
.ledger li svg{width:17px;height:17px;color:var(--sage);margin-top:3px}
.ledger article:last-child li svg{color:#a8b3ae}

/* ============================================================
   3b. 证据卡的「轨迹」变体
   物品定位、行为确认这类问题，证据不是照片而是一串时间地点，
   所以缩略图位置换成三块轨迹卡片。
   ============================================================ */
.evidence-thumbs.is-trace{grid-template-columns:repeat(3,1fr)}
.evidence-thumbs .trace{
  position:relative;overflow:hidden;height:100px;
  border:1px solid var(--line);border-radius:10px;background:var(--pearl);
  padding:13px 14px 13px 17px;
  display:flex;flex-direction:column;justify-content:center;gap:3px
}
.evidence-thumbs .trace::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:#d3ded9
}
.evidence-thumbs .trace.now::before{background:var(--sage)}
.evidence-thumbs .trace b{font-size:15px;font-weight:600;color:var(--ink);line-height:1.2}
.evidence-thumbs .trace span{font-size:12px;color:#5d6a65;line-height:1.4}
.evidence-thumbs .trace i{
  font-style:normal;font-size:10px;letter-spacing:.1em;color:#98a49f;margin-top:3px
}
.evidence-thumbs .trace.now i{color:var(--sage)}

/* ============================================================
   3c. 图片版式：整幅横幅 / 双联
   ============================================================ */
.photo-band{
  position:relative;overflow:hidden;
  margin:0 max(7vw,24px);min-height:440px;border-radius:30px;
  display:grid;align-items:end;
  background-position:center calc(42% + var(--eo-py,0px));
  background-size:cover;background-repeat:no-repeat
}
.photo-band::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,#0b100eed,#0b100ecc 42%,#0b100e63 72%,#0b100e1f)
}
.photo-band > div{position:relative;z-index:2;padding:44px max(4vw,28px);max-width:720px;color:#fff}
.photo-band .eyebrow{color:#a9dcc7}
.photo-band h2{font:500 clamp(30px,3.2vw,46px)/1.28 var(--serif);letter-spacing:-.03em;margin:0 0 16px}
.photo-band p{color:#dbe7e2;line-height:1.8;margin:0;max-width:560px}
.band-people{background-image:url(/assets/bike-father.png)}
.band-device{background-image:url(/assets/earthory-home-device.png)}

.photo-duo{max-width:1180px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.photo-duo figure{position:relative;overflow:hidden;border-radius:22px;margin:0}
.photo-duo img{display:block;width:100%;height:390px;object-fit:cover;transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.photo-duo figure:hover img{transform:scale(1.045)}
.photo-duo figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:52px 24px 22px;color:#fff;font-size:13px;line-height:1.6;
  background:linear-gradient(0deg,#0b100ed9,#0b100e00)
}

/* ============================================================
   4. 常见问题
   ============================================================ */
.faq{max-width:900px;margin:auto}
.faq details{border-bottom:1px solid var(--line);padding:24px 4px}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;gap:24px;
  justify-content:space-between;align-items:flex-start;
  font:500 20px/1.5 var(--serif);transition:color .3s ease
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--sage)}
.faq summary::after{
  content:"";flex:0 0 auto;width:10px;height:10px;margin-top:8px;
  border-right:1.5px solid var(--sage);border-bottom:1.5px solid var(--sage);
  transform:rotate(45deg);transition:transform .4s cubic-bezier(.22,1,.36,1)
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details > p{
  margin:14px 0 0;color:var(--muted);line-height:1.85;max-width:790px;font-size:15px
}
.faq details[open] > p{animation:eoFaq .5s cubic-bezier(.22,1,.36,1)}
@keyframes eoFaq{from{opacity:0;transform:translateY(-8px)}}

/* ============================================================
   5. 岗位列表（招聘页）
   ============================================================ */
.role-list{max-width:1120px;margin:auto}
.role-group{margin-bottom:56px}
.role-group > h3{
  font:500 26px var(--serif);margin:0 0 4px;
  display:flex;align-items:center;gap:11px
}
.role-group > h3 svg{width:22px;height:22px;color:var(--sage)}
.role-group > p{color:var(--muted);font-size:14px;margin:0 0 18px}
.role{
  display:grid;grid-template-columns:1.5fr .8fr .6fr 34px;gap:26px;align-items:center;
  padding:24px 16px;border-top:1px solid var(--line);
  position:relative;transition:background .4s ease,padding .4s cubic-bezier(.22,1,.36,1)
}
.role:last-child{border-bottom:1px solid var(--line)}
.role:hover{background:var(--pearl);padding-left:26px;padding-right:26px}
.role h4{margin:0;font:500 21px var(--serif)}
.role > div > p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.6;max-width:490px}
.role .meta{font-size:13px;color:#5d6a65;display:flex;align-items:center;gap:8px}
.role .meta svg{width:15px;height:15px;color:var(--sage);flex:0 0 auto}
.role .go{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--sage);
  transition:background .35s ease,border-color .35s ease,transform .35s cubic-bezier(.22,1,.36,1)
}
.role .go svg{width:16px;height:16px}
.role:hover .go{background:var(--sage);border-color:var(--sage);color:#fff;transform:translateX(4px)}

/* ============================================================
   6. 团队信条 / 数字条
   ============================================================ */
.creed{
  max-width:1120px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:0
}
.creed article{padding:0 34px;border-right:1px solid var(--line)}
.creed article:first-child{padding-left:0}
.creed article:last-child{border-right:0;padding-right:0}
.creed b{
  display:block;font-size:11px;letter-spacing:.16em;color:var(--sage);
  font-weight:700;margin-bottom:14px
}
.creed h3{font:500 27px/1.3 var(--serif);margin:0 0 12px}
.creed p{color:var(--muted);line-height:1.8;margin:0}

/* ============================================================
   7. 通用：居中的段落型区块
   ============================================================ */
.plain-section{max-width:1180px;margin:auto;padding:118px 28px}
.plain-section > .eyebrow{text-align:center}
.plain-section > h2{
  font:500 clamp(36px,3.9vw,58px)/1.22 var(--serif);
  letter-spacing:-.03em;margin:0 0 22px;text-align:center
}
.plain-section > h2 + p{
  color:var(--muted);line-height:1.85;max-width:720px;margin:0 auto 58px;text-align:center
}
.plain-section.tinted{max-width:none;background:var(--ivory);padding-left:max(7vw,28px);padding-right:max(7vw,28px)}
.plain-section.tinted > *{max-width:1180px;margin-left:auto;margin-right:auto}

/* ============================================================
   8. 响应式
   ============================================================ */
@media(max-width:900px){
  .flow-stage,.zone-stage{max-width:none;margin:0}
  .people-stage{grid-row:1;min-height:520px;border-radius:0 0 28px 28px}
  .ledger{grid-template-columns:1fr}
  .creed{grid-template-columns:1fr;gap:34px}
  .creed article{padding:0 0 30px;border-right:0;border-bottom:1px solid var(--line)}
  .creed article:last-child{border-bottom:0;padding-bottom:0}
  .photo-band{min-height:380px;margin:0 20px}
  .photo-band > div{padding:32px 24px}
  .photo-duo{grid-template-columns:1fr}
  .photo-duo img{height:300px}
  .role{grid-template-columns:1fr 34px;gap:14px}
  .role .meta{grid-column:1;font-size:12px}
  .role .go{grid-row:1;grid-column:2}
  .plain-section{padding:80px 22px}
}
@media(max-width:560px){
  .people-stage{min-height:430px;margin:0 -20px;border-radius:0}
  .flow-step{padding:15px 16px;grid-template-columns:40px 1fr;gap:13px}
  .flow-step i{width:38px;height:38px}
  .flow-step b{font-size:18px}
  .flow-wire{margin-left:38px}
  .zone{padding:20px}
  .ledger article{padding:24px}
  .faq summary{font-size:17px}
  .role{padding:20px 10px}
  .role:hover{padding-left:14px;padding-right:14px}
}

/* ============================================================
   精简版首屏（招聘页 / 下载页）
   ============================================================ */
.slim-hero{min-height:auto;grid-template-columns:1fr;padding:148px max(7vw,32px) 62px}
.slim-hero > div:first-child{max-width:1120px;width:100%;margin:0 auto}
.slim-hero .back-link{margin-bottom:34px}
.slim-hero h1{font-size:clamp(46px,4.6vw,66px)}
.slim-hero p{margin-bottom:30px}
.plain-section.tight{padding-top:26px}

/* ============================================================
   下载页
   ============================================================ */
.dl-hero{background:linear-gradient(118deg,#fff,#f7fbf9 52%,#e9f3ee)}
.dl-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.dl-btn{display:inline-flex;align-items:center;gap:11px;font-size:16px;padding:16px 30px}
.dl-btn svg{width:20px;height:20px;flex:0 0 auto}
.dl-meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px;color:var(--muted);font-size:13px}
.dl-meta span{display:flex;align-items:center;gap:7px}
.dl-meta b{color:var(--ink);font-weight:600}
.dl-cards{max-width:1120px;margin:auto;display:grid;grid-template-columns:1.15fr .85fr;gap:16px}
.dl-card{border:1px solid var(--line);border-radius:24px;background:#fff;padding:30px;box-shadow:0 16px 45px #31584a0d}
.dl-card h3{font:500 24px var(--serif);margin:0 0 10px}
.dl-card > p{color:var(--muted);line-height:1.75;font-size:14px;margin:0}
.dl-steps{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:14px}
.dl-steps li{display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start;color:#4c5854;font-size:14px;line-height:1.7}
.dl-steps i{width:26px;height:26px;border-radius:50%;background:var(--pearl);color:var(--sage);display:grid;place-items:center;font:600 12px var(--sans);font-style:normal}
.dl-app{display:grid;place-items:center;align-content:center;text-align:center;gap:6px}
.dl-app img{width:112px;height:112px;border-radius:26px;box-shadow:0 14px 34px #1f4a3c26;margin-bottom:14px}
.dl-app h3{margin:0}
.dl-app > p{margin:0;color:var(--muted);font-size:14px}
.dl-app .dl-ios{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;line-height:1.75;width:100%}
.dl-app .dl-ios a{color:var(--sage);font-weight:600}
.dl-hash{margin-top:18px;font-size:12px;color:#7d8a85;word-break:break-all;background:var(--ivory);border-radius:12px;padding:12px 14px;line-height:1.7}
@media(max-width:900px){
  .slim-hero{padding-top:112px}
  .dl-cards{grid-template-columns:1fr}
}
@media(max-width:560px){
  .slim-hero{padding:100px 20px 46px}
  .dl-btn{width:100%;justify-content:center}
  .dl-card{padding:24px}
}

/* ============================================================
   品牌标识
   ============================================================ */
.brand{display:inline-flex;align-items:center;gap:11px}
.brand-mark{height:30px;width:auto;display:block;flex:0 0 auto}
footer .brand-mark{height:24px}
@media(max-width:560px){.brand-mark{height:24px}footer .brand-mark{height:20px}}

/* 页尾 CTA 里的一段说明 */
.final-cta p{max-width:540px;margin:0 auto 26px;color:var(--muted);line-height:1.85;font-size:15px}

/* ============================================================
   三种日常：使用场景图
   ============================================================ */
.scene-trio{max-width:1180px;margin:52px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.scene-trio figure{margin:0}
.scene-trio .shot{overflow:hidden;border-radius:20px;background:var(--pearl)}
.scene-trio img{
  display:block;width:100%;height:288px;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.22,1,.36,1)
}
.scene-trio figure:hover img{transform:scale(1.045)}
.scene-trio figcaption{padding:18px 2px 0}
.scene-trio b{display:block;font:500 21px var(--serif);margin-bottom:8px}
.scene-trio span{display:block;color:var(--muted);font-size:14px;line-height:1.75}
.scene-dog img{object-position:58% 52%}
.scene-meeting img{object-position:50% 42%}
.scene-reunion img{object-position:42% 50%}
@media(max-width:900px){
  .scene-trio{grid-template-columns:1fr;gap:26px;margin-top:36px}
  .scene-trio img{height:260px;object-position:center}
}

/* ============================================================
   App 页的两张手机图
   原图是带白底的设计稿截图，两张摆在一起几乎看不出区别。
   现在图片已裁到手机本体（透明底），并让第二张只露出上半屏、
   底部渐隐，做成局部特写，和首屏那张整机图区分开。
   ============================================================ */
.phone-showcase img{height:640px;filter:drop-shadow(0 26px 42px rgba(24,51,41,.22))}
.phone-frame{height:560px;align-items:end;overflow:hidden}
.phone-frame img{
  width:328px;height:520px;object-fit:cover;object-position:center top;
  -webkit-mask-image:linear-gradient(#000 74%,transparent);
  mask-image:linear-gradient(#000 74%,transparent);
  filter:drop-shadow(0 22px 34px rgba(35,67,55,.16))
}
@media(max-width:900px){
  .phone-showcase{height:440px}
  .phone-showcase img{height:520px}
  .phone-frame{height:460px}
  .phone-frame img{width:280px;height:440px}
}
@media(max-width:560px){
  .phone-showcase{height:390px}
  .phone-showcase img{height:460px}
  .phone-frame{height:400px}
  .phone-frame img{width:245px;height:385px}
}
.scene-training img{object-position:56% 48%}

/* 板块末尾那句收束的话 */
.section-note{
  max-width:900px;margin:46px auto 0;padding-top:26px;
  border-top:1px solid var(--line);text-align:center;
  color:var(--ink);font:500 18px/1.7 var(--serif)
}
@media(max-width:560px){.section-note{font-size:16px;margin-top:34px}}

/* 数据价值五层 + 公式条 */
.cap-grid.five{grid-template-columns:repeat(5,1fr)}
.cap-grid.five h3{font-size:22px}
.app-capabilities .formula{
  display:inline-block;margin:0 auto 18px;padding:13px 24px;
  border:1px solid #3b4b45;border-radius:999px;background:#1d2a26;
  color:#cfe6db;font-size:14px;letter-spacing:.02em
}
@media(max-width:1100px){.cap-grid.five{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.cap-grid.five{grid-template-columns:1fr 1fr}}
@media(max-width:560px){
  .cap-grid.five{grid-template-columns:1fr}
  .app-capabilities .formula{font-size:12px;padding:11px 16px}
}

/* ---------- 新品类对照表（how.html「摄像头保存画面 / Earthory 保存事件」） ----------
   左列右对齐顶到箭头、右列左对齐，读起来是一条条「从…变成…」。
   行距压得比正文紧，四行要像一张表，不像四个段落。 */
.contrast-section{padding-top:88px;padding-bottom:88px}
.contrast{max-width:820px;margin:40px auto 0;display:grid;gap:0}
.contrast article{
  display:grid;grid-template-columns:1fr 44px 1fr;align-items:center;gap:12px;
  padding:14px 4px;border-top:1px solid var(--line)
}
.contrast article:last-child{border-bottom:1px solid var(--line)}
.contrast b{font-weight:400;font-size:15px;color:#9aa5a0;text-align:right}
.contrast i{display:grid;place-items:center;color:var(--sage)}
.contrast i svg{width:20px;height:20px}
.contrast span{font-size:18px;font-weight:600;text-align:left}
@media(max-width:560px){
  .contrast-section{padding-top:64px;padding-bottom:64px}
  .contrast{margin-top:30px}
  .contrast article{grid-template-columns:1fr;gap:2px;padding:14px 2px;text-align:left}
  .contrast b{text-align:left;font-size:14px}
  .contrast i{place-items:start}
  .contrast i svg{width:15px;height:15px;transform:rotate(90deg)}
  .contrast span{font-size:16px}
}

/* ---------- 硬件页「同一颗核心」：整幅爆炸图 ----------
   原来这里是半幅竖框 + center/cover 的头盔图，横图被裁掉一半宽度，
   两侧标注全切没了。改成整幅横图，contain 不裁切，4 张特性卡挪到下面。 */
.hardware-system{grid-template-columns:1fr;gap:40px}
.hardware-system:before{content:none}
.system-orb{
  min-height:0;width:100%;aspect-ratio:16/9;border-radius:28px;
  border:1px solid var(--line);
  background:url(/assets/one-exploded-sphere.jpg) center/contain no-repeat var(--ivory)
}
.system-list{max-width:none;grid-template-columns:repeat(2,1fr);gap:14px}

/* 部件清单：图里烤进去的标注在手机上看不清，这段是文字兜底，
   同时给搜索引擎和读屏软件用。文案在 earthory-motion.js 的 PARTS。 */
.sensor-parts{
  margin:0;padding:20px 24px;border:1px solid var(--line);border-radius:18px;
  background:#fff;color:var(--muted);font-size:13px;line-height:1.85
}
.sensor-parts b{
  display:block;color:var(--sage);font-size:11px;letter-spacing:.14em;
  font-weight:700;margin-bottom:9px
}
.sensor-parts em{display:block;margin-top:10px;font-style:normal;color:#8b958f;font-size:12px}
@media(max-width:900px){
  .system-orb{border-radius:22px}
  .system-list{grid-template-columns:1fr}
}
@media(max-width:560px){
  .system-orb{border-radius:16px}
  .sensor-parts{padding:16px 18px;font-size:12px}
}

/* ============================================================
   加入我们（careers.html）
   十条合作通道 + 岗位列表 + 对接表单。
   大量能力词条用 chip 呈现——写成项目符号会变成读不完的长列表。
   ============================================================ */

/* ---- 首屏下方的一行事实 ---- */
.join-facts{
  display:flex;flex-wrap:wrap;gap:10px 28px;margin:0 0 30px;
  font-size:13px;color:var(--muted)
}
.join-facts b{color:var(--ink);font-weight:600}

/* ---- 九种加入方式：同时充当整页的跳转导航 ---- */
.ways{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));
  gap:10px;margin:44px auto 0;max-width:1120px
}
.ways a{
  display:flex;align-items:center;gap:12px;padding:16px 18px;
  border:1px solid var(--line);border-radius:14px;background:#fff;
  font-size:14.5px;font-weight:600;text-align:left
}
.ways a:hover{border-color:var(--mint);background:var(--pearl)}
.ways a i{
  font-style:normal;font-size:11px;letter-spacing:.08em;color:var(--sage);
  font-weight:700;flex:0 0 auto
}

/* ---- 一条合作通道 ---- */
.track{
  max-width:1180px;margin:auto;padding:96px 28px;
  border-top:1px solid var(--line)
}
.track:first-of-type{border-top:0}
.track-head{display:grid;grid-template-columns:78px 1fr;gap:8px;align-items:start}
.track-head > b{
  font:500 30px var(--serif);color:var(--mint);line-height:1.1;
  font-variant-numeric:tabular-nums
}
.track-head h2{
  font:500 clamp(28px,3.4vw,42px)/1.25 var(--serif);
  letter-spacing:-.03em;margin:0 0 16px;text-wrap:balance
}
.track-head > div > p{color:var(--muted);line-height:1.85;max-width:640px;margin:0 0 14px}
.track-head > div > p:last-child{margin-bottom:0}
.track-body{margin-left:78px}
@media(max-width:760px){
  .track-head{grid-template-columns:1fr;gap:4px}
  .track-body{margin-left:0}
}

/* ---- 能力词条 ---- */
.chipset{margin-top:34px}
.chipset > h3{
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.1em;
  color:var(--sage);text-transform:uppercase;margin:0 0 13px
}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{
  padding:7px 13px;border:1px solid var(--line);border-radius:999px;
  background:#fff;font-size:13.5px;color:#4a5652
}
.chips.solid span{background:var(--pearl);border-color:transparent;color:var(--sage);font-weight:600}

/* ---- 岗位家族 ---- */
.families{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:34px 40px;margin-top:38px
}
.family > h3{
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.06em;
  color:var(--sage);margin:0 0 12px;padding-bottom:10px;
  border-bottom:1px solid var(--line)
}
.family ul{list-style:none;margin:0;padding:0}
.family li{margin:0}
.family a{
  display:block;padding:7px 0;font-size:14.5px;line-height:1.5;
  border-bottom:1px solid var(--line-faint,#f0f4f2)
}
.family li:last-child a{border-bottom:0}
.family a:hover{color:var(--sage);padding-left:5px}

/* ---- 通道底部的行动按钮 ---- */
.track-cta{
  display:inline-flex;align-items:center;gap:9px;margin-top:32px;
  padding:12px 22px;border-radius:999px;background:var(--sage);color:#fff;
  font-size:14px;font-weight:600
}
.track-cta:hover{background:#397a63;transform:translateY(-1px)}
.track-cta svg{width:15px;height:15px}
.track-note{
  margin:26px 0 0;padding:15px 18px;background:var(--ivory);
  border-radius:12px;color:var(--muted);font-size:13.5px;line-height:1.75
}

/* ---- 对接表单 ---- */
.join-form{max-width:760px;margin:44px auto 0;display:grid;gap:22px}
.join-form fieldset{border:0;margin:0;padding:0}
.join-form legend{
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.1em;
  color:var(--sage);text-transform:uppercase;padding:0;margin-bottom:14px
}
.relations{display:flex;flex-wrap:wrap;gap:9px}
.relations label{cursor:pointer}
.relations input{position:absolute;opacity:0;width:0;height:0}
.relations span{
  display:block;padding:9px 16px;border:1px solid var(--line);border-radius:999px;
  background:#fff;font-size:13.5px;transition:.2s ease
}
.relations input:checked + span{background:var(--sage);border-color:var(--sage);color:#fff}
.relations input:focus-visible + span{outline:2px solid var(--sage);outline-offset:2px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.join-form label.field{display:grid;gap:7px;font-size:13px;color:var(--muted)}
.join-form input,.join-form textarea{
  border:1px solid var(--line);border-radius:12px;padding:13px;outline:0;
  font:inherit;color:var(--ink);background:#fff
}
.join-form label.field.stack{margin-top:16px}
.join-form textarea{min-height:92px;resize:vertical}
.join-form input:focus,.join-form textarea:focus{
  border-color:var(--sage);box-shadow:0 0 0 3px #4f92781f
}
.join-form button{
  justify-self:start;border:0;border-radius:999px;background:var(--ink);color:#fff;
  padding:14px 32px;font-size:14.5px;font-weight:600;cursor:pointer
}
.join-form button:hover{background:var(--sage)}
/* 蜜罐：移出视口而不是 display:none——有些机器人会跳过被隐藏的字段 */
.join-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.join-form .consent{
  display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start;
  font-size:13px;line-height:1.75;color:var(--muted)
}
.join-form .consent input{width:17px;height:17px;margin-top:3px;accent-color:var(--sage)}
.join-form .consent a{color:var(--sage)}

.join-result{
  margin-top:6px;padding:24px;border:1px solid var(--mint);border-radius:18px;
  background:var(--pearl)
}
.join-result h3{font:500 22px var(--serif);margin:0 0 8px}
.join-result.is-done{border-color:var(--sage);background:var(--sage-tint,#eaf4ef)}
.join-result.is-error{border-color:#e0b9ae;background:#fdf2ee}
.join-result.is-done h3,.join-result.is-error h3{margin-bottom:6px}
.join-result > p{margin:0 0 16px;font-size:13.5px;color:var(--muted);line-height:1.75}
.join-result textarea{
  width:100%;min-height:220px;border:1px solid var(--line);border-radius:12px;
  padding:14px;font:13px/1.8 var(--sans);color:var(--ink);background:#fff;resize:vertical
}
.join-result-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.join-result-actions button,.join-result-actions .mailto{
  border:0;border-radius:999px;padding:11px 22px;font-size:14px;font-weight:600;cursor:pointer
}
.join-result-actions button{background:var(--sage);color:#fff}
.join-result-actions button:hover{background:#397a63}
.join-result-actions .mailto{
  background:#fff;border:1px solid var(--line);color:var(--ink);display:inline-flex;align-items:center
}
.join-result-actions .mailto:hover{border-color:var(--sage);color:var(--sage)}
.form-fallback{
  margin:0;font-size:13px;color:var(--muted);line-height:1.75
}
.form-fallback a{color:var(--sage)}
@media(max-width:640px){.field-grid{grid-template-columns:1fr}}

/* ---- 结尾 ---- */
.join-close{
  max-width:none;padding:104px max(7vw,28px);text-align:center;
  background:var(--ink);color:#fff
}
.join-close .eyebrow{color:var(--mint)}
.join-close h2{font:500 clamp(30px,3.6vw,46px)/1.3 var(--serif);margin:0 0 26px}
.join-close p{color:#b8c6c0;line-height:2;max-width:560px;margin:0 auto 8px}
.join-close .sign{
  margin-top:40px;font-family:var(--sans);font-size:12px;letter-spacing:.14em;
  color:#7d8f88;text-transform:uppercase
}

@media(max-width:900px){
  .track{padding:70px 22px}
  .ways{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .track{padding:58px 20px}
  .ways{grid-template-columns:1fr;margin-top:32px}
  .join-close{padding:76px 20px}
}

/* ============================================================
   移动端导航

   earthory.css 在 max-width:900px 时把 .nav nav 整个 display:none，
   却没有任何替代入口——手机上五个页面只能靠滚到页脚才进得去。
   这里补一个汉堡菜单。

   按钮由 earthory-motion.js 在运行时插入（首页 / 硬件页 / App 页的
   导航由 earthory.js 渲染，改不了源码），面板挂在 body 上。
   ============================================================ */

/* 桌面端完全不存在 */
.nav-burger{display:none}

@media(max-width:900px){
  /* 导航被隐藏后 margin-left:auto 也没了，下载按钮会贴到 logo 旁边。
     把它和汉堡一起推回右侧。 */
  .nav .nav-cta{margin-left:auto}

  .nav-burger{
    display:grid;align-content:center;justify-items:center;gap:4px;
    width:42px;height:42px;flex:0 0 42px;padding:0;
    border:1px solid var(--line);border-radius:12px;
    background:#fff;color:var(--ink);cursor:pointer
  }
  .nav-burger:hover{border-color:var(--mint)}
  .nav-burger:focus-visible{outline:2px solid var(--sage);outline-offset:2px}
  .nav-burger i{
    display:block;width:16px;height:1.5px;border-radius:2px;background:currentColor;
    transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .18s ease
  }
  /* 打开时收成一个叉 */
  .nav-burger[aria-expanded="true"] i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .nav-burger[aria-expanded="true"] i:nth-child(2){opacity:0}
  .nav-burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
}

/* ---- 面板：挂在 body 上，避免被 .site-shell 的 overflow:hidden 裁掉 ---- */
.eo-mnav{
  position:fixed;inset:0;z-index:90;
  display:grid;grid-template-rows:auto 1fr;
  background:#fff;
  visibility:hidden;opacity:0;
  transition:opacity .26s ease,visibility .26s
}
.eo-mnav.is-open{visibility:visible;opacity:1}
.eo-mnav-top{
  height:68px;display:flex;align-items:center;padding:0 18px;
  border-bottom:1px solid var(--line)
}
.eo-mnav-top .brand{display:flex;align-items:center;font-size:22px;font-weight:720}
.eo-mnav-top .brand-mark{height:26px;margin-right:8px}
.eo-mnav-list{
  padding:12px 18px 34px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column
}
.eo-mnav-list a{
  display:flex;align-items:center;justify-content:space-between;
  min-height:56px;padding:10px 4px;
  font:500 21px var(--serif);
  border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(8px)
}
.eo-mnav.is-open .eo-mnav-list a{
  opacity:1;transform:none;
  transition:opacity .34s ease,transform .34s cubic-bezier(.22,1,.36,1)
}
.eo-mnav-list a[aria-current="page"]{color:var(--sage)}
.eo-mnav-list a svg{width:16px;height:16px;color:var(--sage);flex:0 0 16px}
.eo-mnav-list .eo-mnav-cta{
  margin-top:26px;border-bottom:0;justify-content:center;
  background:var(--sage);color:#fff;border-radius:999px;
  font:600 16px var(--sans);min-height:52px
}
.eo-mnav-list .eo-mnav-cta svg{color:#fff}

/* 面板打开时锁住背后的滚动 */
html.eo-mnav-lock,html.eo-mnav-lock body{overflow:hidden}

@media(min-width:901px){
  /* 视口变宽时面板必须让位，否则会盖住整个桌面站 */
  .eo-mnav{display:none}
}
@media(prefers-reduced-motion:reduce){
  .eo-mnav,.eo-mnav-list a,.nav-burger i{transition:none!important}
}

/* ============================================================
   移动端观感

   全站原有的两个断点（900 / 560）只做了布局塌缩——多列变一列。
   这一段处理塌缩之后剩下的问题：点不点得准、浏览器会不会自作主张
   放大文字、刘海和 home indicator 会不会压到内容、中文标题在小字号
   下的字距，以及触屏上卡住不走的 :hover。

   放在文件末尾。earthory-pages.css 是最后加载的一张表，
   同权重下这里的规则赢过 earthory.css，不用动那份压缩过的源文件。
   ============================================================ */

/* ---------- 1. 收掉移动浏览器的两个默认行为 ---------- */
html{
  /* iOS 横屏时会按自己的算法放大正文，字号一乱排版全散 */
  -webkit-text-size-adjust:100%;text-size-adjust:100%
}
body{
  /* 默认那层灰蓝色点击闪光和全站的克制配色打架，换成品牌绿的极淡一层。
     不设成 transparent——完全没有反馈，手机上会觉得没点上。 */
  -webkit-tap-highlight-color:rgba(79,146,120,.09)
}

/* ---------- 2. iOS 聚焦输入框不再放大整页 ---------- */
/* Safari 在聚焦 font-size 小于 16px 的输入框时会缩放整个视口，而且
   失焦后不会缩回去。「加入我们」那张表十来个字段，原来 font:inherit
   继承的是 label 的 13px，每点一个字段页面就跳一次。 */
@media(max-width:900px){
  input,textarea,select,
  .join-form input,.join-form textarea,
  .modal input,.modal textarea,
  .ask-box input,
  .join-result textarea{font-size:16px}
  /* 输入框变大了，标签本身保持原来的小字号 */
  .join-form label.field{font-size:13px}
}

/* ---------- 3. 刘海与 home indicator ---------- */
/* 竖屏 Safari 里这些 env() 都是 0，代价为零；横屏和 PWA 全屏模式下
   才起作用，那时候不留边内容会被切掉。 */
@media(max-width:900px){
  .nav{
    padding-left:max(18px,env(safe-area-inset-left));
    padding-right:max(18px,env(safe-area-inset-right))
  }
  footer{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
}

/* ---------- 4. 中文标题的字距 ---------- */
/* letter-spacing 的负值是给拉丁文大字号收紧用的。套在方块字上只会把
   字挤成一团，字号越小越明显，所以手机上归零。
   text-wrap:balance 顺手解决中文标题末行掉一个孤字的问题。 */
@media(max-width:560px){
  .hero h1,.subhero h1,.slim-hero h1,
  .section-copy h2,.story h2,.recall h2,.world h2,.privacy h2,
  .plain-section > h2,.track-head h2,.join-close h2,
  .feature-intro h2,.app-flow h2,.conversation-section h2,
  .app-capabilities h2,.app-statement h2,.hub-section h2{
    letter-spacing:0;text-wrap:balance
  }
}

/* ---------- 5. 品类三句话在手机上竖排 ---------- */
/* .principle-strip 是 display:flex 且没有 flex-wrap，三句话（共约 40 个
   汉字）在 375px 宽的屏幕上会被压成三条各自换行的窄柱，
   原来的 11px 宋体基本读不了。改成一句一行，字号提回可读区间。
   motion.css 那个逐句点亮的动画竖排后照常工作。 */
@media(max-width:900px){
  .principle-strip{
    flex-direction:column;align-items:stretch;gap:0;
    padding:26px max(20px,env(safe-area-inset-left));
    font-size:16px;line-height:1.7;text-align:left
  }
  .principle-strip span{padding:12px 0}
  .principle-strip span + span{border-top:1px solid rgba(217,238,229,.15)}
}
@media(max-width:560px){
  .principle-strip{font-size:15px;padding:22px 20px}
  .principle-strip span{padding:10px 0}
}

/* ---------- 6. 页脚链接横向溢出 ---------- */
/* 七条链接排在一个不换行的 flex 行里，12px 字号下也要五百多像素，
   手机上只有三百出头，结果是 Earthory One 被从中间折断。
   改成两列网格，既不溢出又能对齐。 */
@media(max-width:560px){
  footer{flex-wrap:wrap;gap:20px;padding-left:20px;padding-right:20px}
  footer div{
    display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;
    width:100%;margin:0
  }
  footer div a{padding:3px 0}
}

/* ---------- 7. 首屏按钮竖排后不等宽 ---------- */
/* 560px 以下改成竖排，但 align-items:center 让「留下联系方式」和
   「探索 Earthory App」各按自己的文字宽度居中，一宽一窄很毛糙。 */
@media(max-width:560px){
  .hero-actions{align-items:stretch;width:100%;max-width:330px;margin:0 auto}
  .hero-actions > *{justify-content:center;text-align:center}
  .hero-actions .primary,.hero-actions .secondary{padding-top:15px;padding-bottom:15px}
  .hero-actions .secondary{display:flex;align-items:center;gap:8px}
}

/* ---------- 8. 点击目标 ---------- */
/* 一根手指的接触面大约 44px。低于这个数在手机上就是要点两次。
   岗位列表原来是 padding:7px 0，算上行高只有 36px，
   而那一页有四十多条这样的链接。 */
@media(max-width:900px){
  .nav-cta{min-height:42px;display:inline-flex;align-items:center;justify-content:center}
  .family a{padding:11px 0}
  .relations span{padding:11px 18px}
  .ways a{padding:17px 18px}
  .join-form button{padding:16px 34px}
}

/* ---------- 9. 世界地图的节点 ---------- */
/* 10px 在手机上已经不是「小字」是「看不清」。位置不动——那几个
   百分比是照着球的轮廓调的，动了就会压到球心。 */
@media(max-width:560px){
  .world-node{font-size:11px;padding:7px 10px}
}

/* ---------- 10. 触屏上不该留悬停残留 ---------- */
/* 手机没有指针，:hover 会在点完之后卡住不走——卡片浮起来不落下、
   图片一直放大着。这些留给真有指针的设备，触屏换成按下时的即时反馈。 */
@media(hover:none){
  .nav-cta:hover,.primary:hover,.track-cta:hover,
  .product-gateway > a:hover,.world-node:hover{transform:none}
  .family a:hover{padding-left:0}
  .scene-trio figure:hover img{transform:none}

  .nav-cta:active,.primary:active,.track-cta:active,
  .join-form button:active,.dl-btn:active{transform:scale(.97)}
  .ways a:active,.family a:active,
  .eo-mnav-list a:active,.faq summary:active{background:var(--pearl)}
}

/* ---------- 11. 板块之间的呼吸 ---------- */
/* 桌面上 100~120px 的段落间距，在手机上就是整整一屏的空白。
   一路划下去只记得自己在划。整体收一档，节奏紧一点。 */
@media(max-width:560px){
  .values,.section,.plain-section,
  .privacy,.recall,.app-statement,.app-flow,
  .feature-intro,.hub-section,.conversation-section{
    padding-top:64px;padding-bottom:64px
  }
  .app-capabilities{padding-top:70px;padding-bottom:70px}
  .track{padding-top:52px;padding-bottom:52px}
  .join-close{padding-top:68px;padding-bottom:68px}
  .final-cta{padding:52px 24px;margin-bottom:44px}
  .contrast-section{padding-top:56px;padding-bottom:56px}
}

/* ============================================================
   移动端导航面板的补充

   面板 z-index 90 完全盖住 z-index 10 的 .nav，汉堡按钮在底下
   既看不见也点不到，手机上又没有 Esc 键——所以面板自己必须带
   一个关闭按钮，否则打开之后只能靠点某条链接离开当前页。
   按钮由 earthory-motion.js 的 mnavPanel() 建出来。
   ============================================================ */
.eo-mnav-top{justify-content:space-between;gap:16px}
.eo-mnav-brand{display:flex;align-items:center;min-width:0}
.eo-mnav-x{
  flex:0 0 40px;width:40px;height:40px;padding:0;position:relative;
  border:1px solid var(--line);border-radius:12px;
  background:#fff;color:var(--ink);cursor:pointer
}
.eo-mnav-x i{
  position:absolute;top:50%;left:50%;width:16px;height:1.5px;
  margin:-.75px 0 0 -8px;border-radius:2px;background:currentColor
}
.eo-mnav-x i:first-child{transform:rotate(45deg)}
.eo-mnav-x i:last-child{transform:rotate(-45deg)}
.eo-mnav-x:hover{border-color:var(--mint)}
.eo-mnav-x:focus-visible{outline:2px solid var(--sage);outline-offset:2px}

/* 刘海下面 / home indicator 上面都得留出位置，
   否则第一条链接会被切掉、最后一条会压在小横条底下。 */
.eo-mnav-top{
  height:calc(68px + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  padding-left:max(18px,env(safe-area-inset-left));
  padding-right:max(18px,env(safe-area-inset-right))
}
.eo-mnav-list{
  padding-bottom:calc(34px + env(safe-area-inset-bottom));
  padding-left:max(18px,env(safe-area-inset-left));
  padding-right:max(18px,env(safe-area-inset-right))
}

/* ============================================================
   定价页（pricing.html）

   页面里所有数字都是 earthory-pages.js 从 pricing-config.json
   读回来后插进 DOM 的，这里只管样子。

   视觉层级按内容优先级排：价格最大，然后是储存容量、
   原始内容保存周期、AI 记忆保存周期、设备数，最后才是功能明细。
   第一屏塞满功能说明的话，用户一个都记不住。
   ============================================================ */

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}

.pricing-hero{background:linear-gradient(118deg,#fff,#f8faf8 52%,#e8f2ed)}
.pricing-hero .pr-sub{font-size:17px;color:#53615b;line-height:1.85;margin:26px 0 34px}

/* ---------- 月付 / 年付 ---------- */
.pr-cycle{
  display:inline-flex;padding:4px;border:1px solid var(--line);
  border-radius:999px;background:#fff;margin-bottom:26px
}
.pr-cycle button{
  border:0;border-radius:999px;background:transparent;cursor:pointer;
  padding:10px 22px;font-size:14px;font-weight:600;color:var(--muted);
  display:flex;align-items:center;gap:8px;transition:.25s ease
}
.pr-cycle button i{font-style:normal;font-size:12px;font-weight:400;opacity:.75}
.pr-cycle button.is-on{background:var(--sage);color:#fff}
.pr-cycle button:focus-visible{outline:2px solid var(--sage);outline-offset:2px}

/* ---------- 场景切换 ---------- */
.pr-scenes{display:flex;flex-wrap:wrap;gap:8px}
.pr-scenes button{
  border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;
  padding:11px 16px;font-size:14px;font-weight:600;color:var(--ink);
  display:flex;align-items:baseline;gap:7px;transition:.25s ease
}
.pr-scenes button i{font-style:normal;font-size:12px;font-weight:400;color:var(--muted)}
.pr-scenes button.is-on{border-color:var(--sage);background:var(--pearl);color:var(--sage)}
.pr-scenes button.is-on i{color:var(--sage)}
.pr-scenes button:focus-visible{outline:2px solid var(--sage);outline-offset:2px}

/* ---------- 套餐卡 ---------- */
.pr-cards{
  max-width:1240px;margin:0 auto;display:grid;gap:14px;
  grid-template-columns:repeat(5,1fr);align-items:start
}
.pr-loading{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px 0}
.pr-card{
  border:1px solid var(--line);border-radius:22px;background:#fff;padding:26px 22px;
  display:flex;flex-direction:column;min-width:0;
  box-shadow:0 14px 40px rgba(49,88,74,.05)
}
.pr-card.is-featured{border-color:var(--mint);box-shadow:0 20px 54px rgba(49,88,74,.11)}
.pr-card header{margin-bottom:16px}
.pr-card h3{
  margin:0;font:500 24px var(--serif);
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap
}
.pr-card h3 i{font-style:normal;font-size:13px;color:var(--muted);font-family:var(--sans)}
.pr-tagline{margin:6px 0 0;font-size:13px;color:var(--muted);line-height:1.6}

/* 第一层：价格 */
.pr-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.pr-price b{font:500 36px/1.1 var(--serif);letter-spacing:-.02em}
.pr-price span{font-size:13px;color:var(--muted)}
.pr-price-sub{margin-top:6px;font-size:12px;color:var(--muted);min-height:17px}

/* 第二到五层：四项核心配额 */
.pr-facts{
  margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--line);
  display:grid;gap:13px
}
.pr-facts > div{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pr-facts b{font-size:16px;font-weight:600;flex:0 0 auto}
.pr-facts span{font-size:11px;color:var(--muted);text-align:right;line-height:1.4}
.pr-facts i{display:block;font-style:normal;font-size:10.5px;color:#98a49f}

.pr-scenetags{display:flex;flex-wrap:wrap;gap:5px;margin:18px 0 22px}
.pr-scenetags span{
  padding:4px 9px;border-radius:999px;background:var(--ivory);
  font-size:11px;color:#5d6a65
}

.pr-cta{
  margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 18px;border-radius:999px;background:var(--sage);color:#fff;
  font-size:14px;font-weight:600;text-align:center
}
.pr-cta:hover{background:#397a63}
.pr-cta svg{width:15px;height:15px}
.pr-cta.is-quote{background:#fff;border:1px solid var(--line);color:var(--ink)}
.pr-cta.is-quote:hover{border-color:var(--sage);color:var(--sage);background:#fff}

/* 第六层：功能明细，默认收起 */
.pr-feats{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.pr-feats summary{
  cursor:pointer;list-style:none;font-size:12.5px;color:var(--sage);font-weight:600;
  display:flex;align-items:baseline;gap:6px
}
.pr-feats summary::-webkit-details-marker{display:none}
.pr-feats summary::after{content:"+";margin-left:auto;font-size:15px;line-height:1}
.pr-feats[open] summary::after{content:"\2212"}
.pr-feats summary i{font-style:normal;font-weight:400;color:var(--muted);font-size:11.5px}
.pr-feats ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.pr-feats li{
  display:grid;grid-template-columns:15px 1fr;gap:9px;align-items:start;
  font-size:12.5px;line-height:1.6;color:#4b5853
}
.pr-feats li svg{width:14px;height:14px;color:var(--sage);margin-top:2px}

.pr-note{max-width:820px;margin:26px auto 0;text-align:center;font-size:13px;
  color:var(--muted);line-height:1.8}
.pr-note a{color:var(--sage)}
.pr-note code{background:var(--ivory);padding:2px 6px;border-radius:5px;font-size:12px}

/* ---------- 配置器 ---------- */
.pr-builder{
  max-width:1120px;margin:44px auto 0;display:grid;
  grid-template-columns:1.15fr .85fr;gap:22px;align-items:start
}
.pr-controls{
  display:grid;gap:16px;padding:30px;border:1px solid var(--line);
  border-radius:24px;background:#fff
}
.pr-ctl{display:grid;gap:8px}
.pr-ctl > span{font-size:13px;font-weight:600;color:var(--ink)}
.pr-ctl > span i{
  font-style:normal;font-weight:400;color:var(--muted);font-size:12px;margin-left:7px
}
.pr-ctl select,.pr-ctl input{
  border:1px solid var(--line);border-radius:12px;padding:13px;outline:0;
  font:inherit;color:var(--ink);background:#fff;width:100%
}
.pr-ctl select:focus,.pr-ctl input:focus{
  border-color:var(--sage);box-shadow:0 0 0 3px #4f92781f
}

/* 右侧实时报价 */
.pr-quote{
  padding:30px;border:1px solid var(--mint);border-radius:24px;background:#fff;
  box-shadow:0 20px 54px rgba(49,88,74,.09);position:sticky;top:96px
}
.pr-quote-head h3{margin:6px 0 0;font:500 30px var(--serif)}
.pr-quote-rows{
  margin:22px 0;padding:20px 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);display:grid;gap:12px
}
.pr-quote-rows > div{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pr-quote-rows span{font-size:12.5px;color:var(--muted)}
.pr-quote-rows i{font-style:normal;font-size:11px;color:#98a49f;margin-left:6px}
.pr-quote-rows b{font-size:14.5px;font-weight:600;text-align:right}
.pr-quote-label{
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.1em;
  color:var(--sage);text-transform:uppercase
}
.pr-quote-label i{font-style:normal;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--muted);margin-left:8px;font-size:12px}
.pr-quote-price{margin:10px 0 20px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.pr-quote-price b{font:500 44px/1.05 var(--serif);letter-spacing:-.025em}
.pr-quote-price > span{font-size:14px;color:var(--muted)}
.pr-quote-price em{
  flex-basis:100%;font-style:normal;font-size:12px;color:var(--muted);margin-top:4px
}
.pr-quote-price.is-custom b{font-size:34px}
.pr-quote-price.is-custom span{flex-basis:100%;font-size:13px;margin-top:6px}
.pr-quote .primary{display:block;text-align:center;padding:15px}
.pr-quote-note{margin:16px 0 0;font-size:12px;color:var(--muted);line-height:1.7}

/* ---------- 保存周期时间轴 ---------- */
.pr-timelines{
  max-width:1040px;margin:44px auto 0;display:grid;gap:16px
}
.pr-line{border:1px solid var(--line);border-radius:24px;padding:30px;background:#fff}
.pr-line.is-memory{background:var(--ivory);border-color:var(--mint)}
.pr-line h3{
  margin:0;font:500 25px var(--serif);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap
}
.pr-line h3 i{font-style:normal;font-size:13px;color:var(--muted);font-family:var(--sans)}
.pr-line > p{margin:8px 0 0;color:var(--muted);font-size:13.5px;line-height:1.75}

/* 刻度：一条渐变线上摆几个时间点 */
.pr-track{
  position:relative;margin:26px 0 0;padding-top:20px;
  display:flex;justify-content:space-between;gap:8px
}
.pr-track::before{
  content:"";position:absolute;left:0;right:0;top:6px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--sage),var(--mint) 70%,#e4ece8)
}
.pr-line.is-memory .pr-track::before{
  background:linear-gradient(90deg,var(--sage),var(--sage) 60%,var(--mint))
}
.pr-track span{
  position:relative;font-size:12px;color:#5d6a65;white-space:nowrap;flex:0 0 auto
}
.pr-track span::before{
  content:"";position:absolute;top:-20px;left:50%;transform:translateX(-50%);
  width:9px;height:9px;border-radius:50%;background:#fff;
  border:2px solid var(--sage)
}
.pr-track span:first-child{margin-right:auto}
.pr-track span:first-child::before{left:4px}
.pr-track span:last-child{margin-left:auto}
.pr-track span:last-child::before{left:auto;right:4px;transform:none}

.pr-kinds{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.pr-kinds span{
  padding:6px 12px;border-radius:999px;border:1px solid var(--line);
  background:#fff;font-size:12.5px;color:#4b5853
}
.pr-line.is-memory .pr-kinds span{border-color:transparent;background:var(--pearl);color:var(--sage);font-weight:600}

.pr-endings{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--line);font-size:12.5px
}
.pr-endings b{color:var(--sage);font-size:11px;letter-spacing:.1em;font-weight:700}
.pr-endings span{padding:6px 12px;border-radius:999px;background:var(--ivory);color:#5d6a65}

/* ---------- 加购 ---------- */
.pr-addons{
  max-width:1120px;margin:40px auto 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:14px
}
.pr-addon{border:1px solid var(--line);border-radius:20px;background:#fff;padding:24px}
.pr-addon h3{
  margin:0 0 14px;font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:.05em;color:var(--sage)
}
.pr-addon h3 i{font-style:normal;font-weight:400;color:var(--muted);margin-left:7px;letter-spacing:0}
.pr-addon ul{margin:0;padding:0;list-style:none;display:grid;gap:0}
.pr-addon li{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--line-faint,#f0f4f2);font-size:13.5px
}
.pr-addon li:last-child{border-bottom:0}
.pr-addon li b{font-weight:600;color:var(--sage);white-space:nowrap}

/* ---------- 手机端底部价格条 ---------- */
/* 配置器在手机上要滚很长，价格滚出屏幕就等于没有。
   钉一条在底部，改一个选项立刻能看到钱怎么变。 */
.pr-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  align-items:center;gap:14px;
  padding:12px max(18px,env(safe-area-inset-left))
          calc(12px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-right));
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 30px rgba(49,88,74,.07)
}
.pr-sticky > div{min-width:0;flex:1}
.pr-sticky b{display:block;font:500 19px var(--serif);white-space:nowrap}
.pr-sticky span{
  display:block;font-size:11.5px;color:var(--muted);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.pr-sticky .primary{flex:0 0 auto;padding:12px 22px;font-size:14px;font-weight:600}

/* ---------- 响应式 ---------- */
@media(max-width:1180px){
  .pr-cards{grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
}
@media(max-width:900px){
  .pr-builder{grid-template-columns:1fr}
  .pr-quote{position:static}

  /* 手机上不一次摆五张卡——顶部的场景切换负责换卡，
     下面只显示当前这一张。五张挤在一屏里谁都看不清。 */
  .pr-cards{grid-template-columns:1fr;max-width:460px}
  .pr-card{display:none}
  .pr-card.is-active{display:flex}

  .pr-scenes{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin:0 -20px;padding:0 20px 4px
  }
  .pr-scenes::-webkit-scrollbar{display:none}
  .pr-scenes button{flex:0 0 auto}

  .pr-sticky{display:flex}
  /* 底部有固定条，最后一段内容要让开，否则被压住 */
  .join-close{padding-bottom:130px}
}
@media(max-width:560px){
  .pricing-hero .pr-sub{font-size:15px}
  .pr-cycle{width:100%}
  .pr-cycle button{flex:1;justify-content:center;padding:12px 10px}
  .pr-controls,.pr-quote,.pr-line,.pr-addon{padding:22px}
  .pr-price b{font-size:32px}
  .pr-quote-price b{font-size:38px}
  .pr-track{gap:4px}
  .pr-track span{font-size:11px}
  .pr-timelines,.pr-addons,.pr-builder{margin-top:32px}
}

/* ============================================================
   销售对接窗口（定价页）

   定价页上所有 CTA 都开这个窗口，不再跳 careers.html——
   想买东西的人被丢进招聘表单、还被问「你想以什么身份加入」，
   是把两类完全不同的人混在了一条路上。

   窗口带着用户刚才配的东西一起提交，写进 sales_enquiries 表，
   和招聘线索分开存。结构见 supabase/migrations/…_sales_enquiries.sql。
   ============================================================ */

.eo-sales{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  padding:20px;visibility:hidden;opacity:0;
  transition:opacity .24s ease,visibility .24s
}
.eo-sales.is-open{visibility:visible;opacity:1}
.eo-sales-back{
  position:absolute;inset:0;background:rgba(18,31,27,.42);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)
}
.eo-sales-panel{
  position:relative;width:min(680px,100%);max-height:calc(100vh - 40px);
  max-height:calc(100dvh - 40px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:#fff;border-radius:28px;padding:38px;
  box-shadow:0 30px 90px rgba(20,40,33,.24);
  transform:translateY(10px) scale(.99);
  transition:transform .3s cubic-bezier(.22,1,.36,1)
}
.eo-sales.is-open .eo-sales-panel{transform:none}
.eo-sales-x{
  position:absolute;top:18px;right:18px;width:36px;height:36px;
  border:0;border-radius:50%;background:#f1f4f3;color:var(--ink);
  display:grid;place-items:center;cursor:pointer;padding:0
}
.eo-sales-x:hover{background:var(--pearl);color:var(--sage)}
.eo-sales-x svg{width:16px;height:16px}
.eo-sales-x:focus-visible{outline:2px solid var(--sage);outline-offset:2px}

.eo-sales h2{margin:8px 0 0;font:500 32px var(--serif);letter-spacing:-.02em}
.eo-sales-lead{margin:12px 0 0;color:var(--muted);line-height:1.8;font-size:14px}

/* 配置快照：用户刚才配的东西原样摆出来，让人放心是带着走的 */
.eo-sales-ctx{
  margin:22px 0 6px;padding:18px 20px;border-radius:16px;
  background:var(--ivory);display:grid;gap:9px
}
.eo-sales-ctx > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px
}
.eo-sales-ctx span{color:var(--muted)}
.eo-sales-ctx b{font-weight:600;text-align:right}
.eo-sales-ctx > div:last-child b{color:var(--sage);font-size:15px}

.eo-sales-form{display:grid;gap:16px;margin-top:22px}
.eo-sales-form .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.eo-sales-form .field{display:grid;gap:7px;font-size:13px;color:var(--muted)}
.eo-sales-form .field.stack{margin-top:2px}
.eo-sales-form input,.eo-sales-form textarea,.eo-sales-form select{
  border:1px solid var(--line);border-radius:12px;padding:13px;outline:0;
  font:inherit;color:var(--ink);background:#fff;width:100%
}
.eo-sales-form textarea{resize:vertical;min-height:92px}
.eo-sales-form input:focus,.eo-sales-form textarea:focus,.eo-sales-form select:focus{
  border-color:var(--sage);box-shadow:0 0 0 3px #4f92781f
}
/* 蜜罐：移出视口而不是 display:none——有些机器人会跳过被隐藏的字段 */
.eo-sales-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.eo-sales-form .consent{
  display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start;
  font-size:13px;line-height:1.75;color:var(--muted)
}
.eo-sales-form .consent input{width:17px;height:17px;margin-top:3px;accent-color:var(--sage)}
.eo-sales-form .consent a{color:var(--sage)}
.eo-sales-form button[type="submit"]{justify-self:start;padding:14px 34px;font-weight:600}

.eo-sales-result{
  padding:20px 22px;border-radius:16px;border:1px solid var(--mint);background:var(--pearl)
}
.eo-sales-result h3{margin:0 0 6px;font:500 21px var(--serif)}
.eo-sales-result p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.75}
.eo-sales-result.is-done{border-color:var(--sage);background:#eaf4ef}
.eo-sales-result.is-error{border-color:#e0b9ae;background:#fdf2ee}

/* 定价页结尾那个按钮原来是 <a>，改成 <button> 后要补回按钮的默认样式 */
button.track-cta{border:0;cursor:pointer;font:inherit;font-size:14px;font-weight:600}
button.pr-cta{border:0;cursor:pointer;font-family:inherit}
button.pr-cta.is-quote{border:1px solid var(--line)}

@media(max-width:640px){
  .eo-sales{padding:0;place-items:end stretch}
  /* 手机上从底部升起来，占满宽度——居中的小卡片在窄屏上很局促 */
  .eo-sales-panel{
    width:100%;max-height:92vh;max-height:92dvh;
    border-radius:24px 24px 0 0;padding:30px 22px;
    padding-bottom:calc(30px + env(safe-area-inset-bottom));
    transform:translateY(24px)
  }
  .eo-sales h2{font-size:27px}
  .eo-sales-form .field-grid{grid-template-columns:1fr}
  .eo-sales-form button[type="submit"]{justify-self:stretch;text-align:center}
}

/* ============================================================
   语言切换

   英文站在根目录，中文站在 /zh/ 下。按钮由 earthory-motion.js
   的 8.10 节在运行时插入（首页/硬件页/App 页的导航由 earthory.js
   渲染，改不了源码，只能这样补）。

   按钮上写的是目标语言的自称：英文页写「中文」，中文页写 EN。
   ============================================================ */
.nav-lang{
  display:inline-flex;align-items:center;gap:2px;
  padding:3px;border:1px solid var(--line);border-radius:999px;background:#fff
}
.nav-lang > a,
.nav-lang > span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:26px;padding:0 9px;border-radius:999px;
  font-size:12px;font-weight:600;letter-spacing:.02em;white-space:nowrap;
  transition:.2s ease
}
/* 当前语言：填色。用户一眼看得出自己在哪一边，
   也看得出还有另一种语言可选——只显示目标语言的话，
   不点开根本不知道站点是双语的。 */
.nav-lang > span[aria-current]{background:var(--sage);color:#fff}
.nav-lang > a{color:var(--muted)}
.nav-lang > a:hover{background:var(--pearl);color:var(--sage)}
.nav-lang > a:focus-visible{outline:2px solid var(--sage);outline-offset:2px}

@media(max-width:900px){
  /* 手机上顶栏只留 logo、下载和汉堡，语言切换挪进菜单里，
     否则四个元素挤在一行谁都点不准 */
  .nav-lang{display:none}
}

/* 菜单里的语言切换：同样两格并排，撑满一行 */
.eo-mnav-list .eo-mnav-lang{
  display:flex;gap:4px;margin-top:16px;padding:4px;
  border:1px solid var(--line);border-radius:999px
}
.eo-mnav-list .eo-mnav-lang > a,
.eo-mnav-list .eo-mnav-lang > span{
  flex:1;display:flex;align-items:center;justify-content:center;
  min-height:44px;border-radius:999px;border-bottom:0;
  font:600 15px var(--sans);color:var(--muted);opacity:1;transform:none
}
.eo-mnav-list .eo-mnav-lang > span[aria-current]{background:var(--sage);color:#fff}