/* ============================================================
   行止官网 · components.css
   页头 / 页脚 / 按钮 / 手机 mockup / 功能行 / 步骤 / 通用板块件
   数值与 design/xingzhi-website/index.html 一一对应
   ============================================================ */

/* ============ Header ============ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(248,246,242,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled{border-bottom-color:var(--shell-stroke);box-shadow:0 6px 20px -14px rgba(43,70,66,.28)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:88px}
.brand{display:flex;align-items:center;gap:14px;flex-shrink:0}
.brand img{width:38px;height:38px}
.brand-name{font-size:20px;font-weight:500;letter-spacing:3px;color:var(--dark);white-space:nowrap}
.nav{display:flex;align-items:center;gap:40px}
.nav a{font-size:15px;color:var(--gray);transition:color .2s ease}
.nav a:hover{color:var(--sage-deep)}
.header-actions{display:flex;align-items:center;gap:26px;flex-shrink:0}
.header-login{font-size:15px;color:var(--gray);transition:color .2s ease}
.header-login:hover{color:var(--sage-deep)}
/* 已登录时这里显示用户名（昵称最长 20 字），过长就省略，别把页头顶开 */
.header-login.is-user{
  display:inline-block;max-width:160px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
}

/* ============ Buttons ============ */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 28px;border-radius:26px;
  background:var(--sage);color:#FFF;
  font-size:15px;font-weight:500;letter-spacing:1px;white-space:nowrap;
  box-shadow:var(--sh-btn);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 24px -6px rgba(107,168,160,.45)}
.btn-primary:active{transform:translateY(0)}
.btn-cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:18px 40px;border-radius:30px;
  background:var(--sage);color:#FFF;
  font-size:17px;font-weight:500;letter-spacing:2px;
  box-shadow:var(--sh-cta);
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 16px 30px -8px rgba(107,168,160,.5)}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  padding:18px 32px;border-radius:30px;
  border:1.5px solid var(--sage-border);color:var(--sage-deep);
  font-size:16px;font-weight:400;
  transition:background .2s ease, transform .2s ease;
}
.btn-ghost:hover{background:rgba(107,168,160,.08);transform:translateY(-2px)}

/* 下载入口未上线时的禁用态（文案「敬请期待」）：不可点，视觉降级 */
.btn-primary.is-soon,.btn-cta.is-soon{
  background:var(--sage-line);color:var(--sage-deep);
  box-shadow:none;cursor:not-allowed;user-select:none;
}
.btn-primary.is-soon:hover,.btn-cta.is-soon:hover,
.btn-primary.is-soon:active,.btn-cta.is-soon:active{transform:none;box-shadow:none}

/* ============ Hero 周边通用件 ============ */
.release-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px;border-radius:20px;
  background:var(--white);border:1px solid var(--sage-line);
}
.badge-dot{width:8px;height:8px;border-radius:50%;background:var(--sage);flex-shrink:0}
.release-badge span{font-size:13px;font-weight:500;letter-spacing:.5px;color:var(--gray)}

.trust-row{display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:8px}
.trust-item img{width:16px;height:16px}
.trust-item span{font-size:13px;color:var(--gray);white-space:nowrap}

/* ============ 手机 mockup ============ */
.phone-stage{position:relative;width:100%;height:calc(620px * var(--k));display:flex;justify-content:center}
.phones{
  position:absolute;top:0;left:50%;
  width:880px;height:620px;
  margin-left:-440px;
  transform:scale(var(--k));transform-origin:top center;
  display:flex;align-items:flex-start;justify-content:center;gap:28px;
}
.phone-wrap{display:flex;flex-direction:column}
.phone-wrap--side{padding-top:44px}
.phone{
  display:flex;flex-direction:column;
  background:var(--shell);
  border:1px solid var(--shell-stroke);
  overflow:hidden;
}
.phone--side{width:262px;height:548px;border-radius:38px;box-shadow:var(--sh-phone)}
.phone--main{width:300px;height:620px;border-radius:42px;box-shadow:var(--sh-phone-main)}
.status-bar{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.phone--side .status-bar{height:50px;padding:18px 22px 0}
.phone--main .status-bar{height:54px;padding:20px 26px 0}
.status-time{font-family:var(--font-num);font-weight:500;color:var(--dark)}
.phone--side .status-time{font-size:12px}
.phone--main .status-time{font-size:13px}
.phone--side .status-bar img{width:24px;height:12px}
.phone--main .status-bar img{width:26px;height:13px}
.screen{flex:1;min-height:0;display:flex;flex-direction:column}
.phone--side .screen{padding:2px 18px 0;gap:12px}
.phone--main .screen{padding:4px 20px 0;gap:14px}

/* ---- mini 组件 ---- */
.mini-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mini-card{
  background:var(--white);border-radius:14px;
  padding:12px;display:flex;flex-direction:column;gap:5px;
  box-shadow:var(--sh-card-xs);
}
.mini-time{font-family:var(--font-num);font-size:10px;font-weight:500;color:var(--sage)}
.mini-text{font-size:11px;line-height:18px;color:var(--dark)}
.mini-label{font-size:9px;font-weight:500;letter-spacing:1.5px;color:var(--sage)}
.mini-date{font-size:10px;font-weight:500;color:var(--gray)}
.tl-item{display:flex;align-items:center;gap:10px;padding-left:4px}
.tl-dot{width:7px;height:7px;border-radius:50%;background:var(--sage);flex-shrink:0}
.tl-col{display:flex;flex-direction:column;gap:3px;min-width:0}
.tl-time{font-family:var(--font-num);font-size:10px;font-weight:500;color:var(--sage)}
.tl-text{font-size:11px;line-height:18px;color:var(--dark)}

/* ---- 那年今日屏 ---- */
.screen-title{font-size:16px;font-weight:500;color:var(--dark)}
.screen-sub{font-size:11px;color:var(--gray)}
.year-block{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 0 6px}
.year-big{font-family:var(--font-num);font-size:42px;font-weight:500;letter-spacing:-1px;line-height:46px;color:var(--sage)}
.group{display:flex;flex-direction:column;gap:10px}
.quote-mini{
  background:var(--panel);border-radius:14px;padding:14px;
  display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
}
.quote-mini p{font-size:11px;font-weight:300;line-height:19px;color:var(--gray)}
.quote-src{font-size:9px;letter-spacing:1px;color:var(--sage)}

/* ---- 今日屏 ---- */
.date-col{display:flex;flex-direction:column;gap:5px}
.date-label{font-size:11px;font-weight:500;color:var(--gray)}
.screen-greet{font-size:18px;font-weight:500;line-height:26px;color:var(--dark)}
.cal-btn{width:36px;height:36px;flex-shrink:0}
.cal-btn img{width:36px;height:36px}
.today-card{
  background:var(--white);border-radius:20px;padding:16px 16px 12px;
  display:flex;flex-direction:column;gap:12px;box-shadow:var(--sh-card-sm);
}
.card-tag{font-size:10px;font-weight:500;letter-spacing:1.5px;color:var(--sage)}
.entry-count{font-size:11px;color:var(--gray)}
.entry{display:flex;align-items:center;gap:10px}
.entry-time{font-family:var(--font-num);font-size:11px;font-weight:500;color:var(--sage);flex-shrink:0}
.entry-text{font-size:12px;line-height:19px;min-width:0}
.entry--strong{color:var(--dark)}
.entry--muted{color:var(--gray)}
.otc-card{background:var(--panel);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:7px}
.otc-text{font-size:11px;font-weight:300;line-height:19px;color:var(--gray)}

/* ---- 时间轴屏 ---- */
.chip-row{display:flex;gap:8px}
.chip{
  height:30px;padding:0 13px;border-radius:15px;
  display:inline-flex;align-items:center;
  font-family:var(--font-num);font-size:11px;font-weight:500;
}
.chip--idle{background:var(--white);border:1px solid var(--sage-line);color:var(--gray)}
.chip--active{background:var(--sage);color:#FFF}

/* ============ 板块标题 ============ */
.section-label{display:flex;align-items:center;gap:10px}
.label-line{width:26px;height:2px;border-radius:1px;background:var(--sage)}
.label-text{font-size:13px;font-weight:500;letter-spacing:3px;color:var(--sage-deep)}
.section-head{display:flex;flex-direction:column;gap:20px;max-width:820px}
.section-title{font-size:44px;font-weight:500;line-height:60px;letter-spacing:1px;color:var(--dark)}
.section-desc{font-size:16px;font-weight:300;line-height:30px;color:var(--gray);max-width:640px}
/* 1440 画布 + 左右 80 padding ⇒ 内容区 1280 */
.section-inner{width:100%;max-width:calc(1280px + var(--gutter) * 2);margin:0 auto;padding:0 var(--gutter)}
.section-inner--flow{display:flex;flex-direction:column;gap:var(--flow-gap,110px)}

/* ============ Feature row ============ */
.feature-row{display:flex;align-items:center;gap:90px}
.feature-row > *{flex:1 1 0;min-width:0}
.feature-visual{
  background:var(--cream);border:1px solid var(--sage-line);border-radius:28px;
  padding:36px;display:flex;flex-direction:column;gap:16px;
  flex:0 0 460px !important;max-width:520px;
}
.feature-copy{display:flex;flex-direction:column;gap:20px}
.feature-tag{
  align-self:flex-start;
  padding:6px 14px;border-radius:16px;background:var(--sage-tint);
  font-size:12px;font-weight:500;letter-spacing:1px;color:var(--sage-deep);
}
.feature-title{font-size:30px;font-weight:500;line-height:42px;color:var(--dark)}
.feature-desc{font-size:15px;font-weight:300;line-height:28px;color:var(--gray)}
.bullets{display:flex;flex-direction:column;gap:12px;margin-top:2px}
.bullet{display:flex;align-items:center;gap:10px}
.bullet img{width:16px;height:16px;flex-shrink:0}
.bullet span{font-size:14px;color:var(--gray-strong)}

/* ---- 功能视觉卡 ---- */
.demo-card{
  background:var(--white);border-radius:22px;padding:24px;
  display:flex;flex-direction:column;gap:14px;box-shadow:var(--sh-card);
}
.demo-date{font-size:12px;font-weight:500;letter-spacing:1px;color:var(--sage)}
.demo-greet{font-size:21px;font-weight:500;line-height:30px;color:var(--dark)}
.demo-entry{display:flex;align-items:center;gap:12px}
.demo-entry-time{font-family:var(--font-num);font-size:12px;font-weight:500;color:var(--sage);flex-shrink:0}
.demo-entry-text{font-size:14px;color:var(--dark);min-width:0}
.mood-row{display:flex;align-items:center;gap:8px;padding-top:2px}
.mood-row img{width:16px;height:16px}
.mood-row span{font-size:12px;color:var(--gray)}
.memory-year{font-family:var(--font-num);font-size:64px;font-weight:500;letter-spacing:-2px;line-height:70px;color:var(--sage)}
.memory-sub{font-size:12px;letter-spacing:1px;color:var(--gray)}
.feature-visual--memory{gap:14px}
.memory-card{
  background:var(--white);border-radius:16px;padding:16px;
  display:flex;flex-direction:column;gap:6px;box-shadow:var(--sh-card-sm);
}
.memory-time{font-family:var(--font-num);font-size:11px;font-weight:500;color:var(--sage)}
.memory-text{font-size:13px;line-height:21px;color:var(--dark)}
.tl-head{display:flex;align-items:center;gap:9px}
.tl-head-dot{width:8px;height:8px;border-radius:50%;background:var(--sage);flex-shrink:0}
.tl-head-label{font-size:13px;font-weight:500;color:var(--dark)}
.feature-row .tl-item{gap:12px}
.feature-row .tl-time{font-size:11px}
.feature-row .tl-text{font-size:13px;line-height:21px}

/* ============ 深色板块（首页「如何使用」及各子页 CTA 条共用） ============ */
.band-dark{background:var(--deep);padding:110px 0 130px;display:flex;flex-direction:column;gap:70px}
.band-dark .section-title{color:var(--on-dark)}
.band-dark .section-desc{color:var(--on-dark-muted)}
.band-dark .label-line{background:var(--amber)}
.band-dark .label-text{color:var(--amber)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px}
.step{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:24px;padding:36px;
  display:flex;flex-direction:column;gap:16px;
  transition:transform .25s ease, background .25s ease;
}
.step:hover{transform:translateY(-4px);background:rgba(255,255,255,.09)}
.step-num{font-family:var(--font-num);font-size:36px;font-weight:500;line-height:1;color:var(--amber)}
.step-title{font-size:21px;font-weight:500;color:var(--on-dark)}
.step-desc{font-size:14px;font-weight:300;line-height:26px;color:var(--on-dark-muted)}

/* ============ Footer ============ */
.footer{background:var(--cream);padding:80px 0 36px;display:flex;flex-direction:column;gap:52px}
.footer-top{display:flex;align-items:flex-start;justify-content:space-between;gap:60px;flex-wrap:wrap}
.footer-brand{display:flex;flex-direction:column;gap:18px;width:420px;max-width:100%}
.footer-logo-row{display:flex;align-items:center;gap:13px}
.footer-logo-row img{width:42px;height:42px}
.footer-brand-name{font-size:22px;font-weight:500;letter-spacing:4px;color:var(--dark)}
.footer-tagline{font-size:14px;font-weight:300;line-height:26px;color:var(--gray);white-space:pre-line}
.footer-trail{width:280px;max-width:100%}
.footer-links{display:flex;gap:80px;flex-wrap:wrap}
.link-col{display:flex;flex-direction:column;gap:14px}
.link-col-label{font-size:13px;font-weight:500;letter-spacing:1px;color:var(--dark)}
.link-col a{font-size:13px;color:var(--gray);transition:color .2s ease}
.link-col a:hover{color:var(--sage-deep)}
.footer-divider{height:1px;background:var(--shell-stroke)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.copyright{font-size:12px;color:var(--footnote)}
.copyright a{color:inherit;text-decoration:none;transition:color .2s ease}
.copyright a:hover{color:var(--sage-deep)}
.legal-links{display:flex;gap:26px;flex-wrap:wrap}
.legal-links a{font-size:12px;color:var(--gray);transition:color .2s ease}
.legal-links a:hover{color:var(--sage-deep)}

/* ============ Reveal ============ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal.is-in{opacity:1;transform:none}

/* ============ 语言切换（2026-09-30 中英双语；2026-09-30 改两格分段控件） ============
   最初是「只放另一种语言」的单链接（中文页写 EN、英文页写「中文」），
   但在英文页上它就是光秃秃一个「中文」，读起来像「当前语言 = 中文」，
   让人以为切不回英文 —— 单链接表达不了「哪个是当前、哪个能切」。
   改回和 CMS 侧栏一致的两格分段控件：「中文 | EN」两格**始终都在**，
   当前语言那格高亮且不可点（`<span aria-current>`），另一格是链接。
   两格加起来约 96px，比原来的单链接只多 40px 左右，页头装得下（见 responsive.css）。
   每格的长度差很多（中文 2 字 / EN 2 字），所以用 min-width 拉齐，不做等分。
   href / hreflang / lang 由各页自己写死（页头本来就在每页各留一份）。 */
.lang-switch{
  display:inline-flex;align-items:center;gap:2px;padding:3px;
  border-radius:20px;background:var(--panel);border:1px solid var(--sage-line);
  flex-shrink:0;
}
.lang-btn{
  display:inline-flex;align-items:center;justify-content:center;
  /* min-width 取「中文」的自然宽（13px 字号下 26px 文字 + 20px 内边距），
     否则两格会是 46 / 44 差 2px，看着像没对齐 */
  min-width:46px;height:26px;padding:0 10px;border-radius:15px;
  font-size:13px;line-height:1;color:var(--gray);white-space:nowrap;
  transition:background .2s ease,color .2s ease;
}
.lang-btn:hover{color:var(--sage-deep)}
/* 当前语言：白底浮起，与 CMS 侧栏的 .lang-btn.is-active 同一套视觉 */
.lang-btn.is-active{
  background:var(--white);color:var(--sage-deep);font-weight:500;
  box-shadow:var(--sh-card-xs);cursor:default;
}