/* ============================================================
   行止官网 · responsive.css
   断点与 design/xingzhi-website/index.html 完全一致（1280 / 1120 / 900 / 640）
   末尾为子页（下载 / 政策 / 帮助）的对应适配
   ============================================================ */

@media (max-width:1280px){
  :root{--gutter:56px;--k:.9}
  .nav{gap:32px}
  .feature-row{gap:60px}
  .feature-visual{flex:0 0 420px !important}
  .footer-links{gap:56px}
}

@media (max-width:1120px){
  :root{--k:.78}
  .headline h1{font-size:52px;line-height:72px}
  .section-title{font-size:38px;line-height:54px}
  .feature-row{flex-direction:column;align-items:stretch;gap:40px}
  .feature-visual{flex:1 1 auto !important;max-width:560px;width:100%}
  .feature-row .feature-copy{order:1}
  .feature-row .feature-visual{order:2}
  .hero{padding-top:64px}
  .features,.band-dark{padding-top:80px;padding-bottom:90px;gap:72px}

  .page-head{padding-top:64px}
  .page-title{font-size:38px;line-height:54px}
  .prose{padding:44px 40px}
}

@media (max-width:900px){
  :root{--gutter:32px;--k:.68}
  .nav{display:none}
  .header-inner{height:72px}
  .headline h1{font-size:40px;line-height:58px;letter-spacing:1px}
  .subheadline{font-size:16px;line-height:30px}
  .section-title{font-size:32px;line-height:46px}
  .feature-title{font-size:26px;line-height:38px}
  .hero{gap:36px;padding-bottom:56px}
  .trust-row{gap:18px}
  .footer-top{flex-direction:column;gap:40px}
  .footer-links{gap:40px;width:100%}
  .band-dark .section-head,.features .section-head{max-width:100%}

  .page-title{font-size:32px;line-height:46px}
  .page-body{padding:48px 0 80px}
  .prose{padding:36px 28px;border-radius:24px}
  .store-card{padding:30px 26px}
  .contact-card{padding:36px 32px}
}

@media (max-width:640px){
  :root{--gutter:20px;--k:.5}
  .brand-name{font-size:17px;letter-spacing:2px}
  .brand img{width:32px;height:32px}
  /* 2026-09-30 页头多了语言切换（.lang-switch 两格分段控件）。
     640px 下「品牌 + 语言切换 + 登录 + 主按钮」四样并排装不下（实测 360px 视口需要
     384px，内容区只有 320px），所以：
     ① 两格语言各自收窄到 36px（仍是「中文」的自然宽：12px 字号 24px 文字 + 12px 内边距）；
     ② 动作区与主按钮都收一收间距；
     ③ 把「登录」整条从页头撤掉，改由页脚 legal-links 里的同名链接承担。
     这三条**两种语言共用**。英文站原本只在 en.css 里撤「登录」，中文站因为多了
     语言切换也到了临界点，索性统一 —— 两边页头在窄屏下都是
     「品牌 + 中文|EN + 主按钮」，行为一致。挂在 .header-login 上的登录态替换
     （main.js 把「登录」换成用户名）也随之在窄屏不显示，符合预期。 */
  .header-actions{gap:12px}
  .lang-switch{padding:2px}
  .lang-btn{min-width:36px;height:24px;padding:0 6px;font-size:12px}
  .header-login{display:none}
  /* ⚠ `.header-login.is-user` 必须一起撤。
     components.css 里有一条 `.header-login.is-user{display:inline-block}`（0,2,0），
     比这里的 `.header-login`（0,1,0）更具体，于是**一旦登录**（main.js 给链接加上
     .is-user 并把文字换成用户名 / 「进入应用」），这条 display:none 就失效了：
     320px 下页头需要 374px，「下载 App」被切掉一截、整页横向溢出。
     未登录时看着是好的，所以只在登录态复现。 */
  .header-login.is-user{display:none}
  .btn-primary{padding:11px 16px;font-size:14px}
  .headline h1{font-size:31px;line-height:46px}
  .subheadline{font-size:15px;line-height:28px}
  .btn-cta{padding:15px 30px;width:100%}
  .btn-ghost{padding:15px 28px;width:100%}
  .cta-row{width:100%;flex-direction:column;gap:12px}
  .trust-row{flex-direction:column;align-items:flex-start;gap:12px}
  .section-title{font-size:26px;line-height:38px}
  .feature-title{font-size:22px;line-height:32px}
  .features,.band-dark{padding-top:64px;padding-bottom:72px;gap:56px}
  .footer{padding-top:56px;gap:36px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:14px}
  .legal-links{gap:18px}

  .page-head{padding-top:48px;gap:18px}
  .page-title{font-size:26px;line-height:38px}
  .page-body{padding:40px 0 72px}
  .page-body .section-inner--flow{--flow-gap:56px}
  .prose{padding:28px 22px;border-radius:20px}
  .prose h2{font-size:19px;line-height:30px;margin-top:34px}
  .prose h2::before{margin-bottom:12px}
  .store-card{padding:26px 22px;border-radius:24px;gap:20px}
  .qr-wrap{gap:18px}
  .qr-box{width:118px;height:118px}
  .log-entry{padding:26px 22px;border-radius:20px}
  .faq-q{padding:18px 20px;font-size:15px;line-height:24px}
  .faq-a-inner p{padding:0 20px 22px;font-size:14px;line-height:26px}
  .contact-card{padding:32px 24px;border-radius:24px;flex-direction:column;align-items:flex-start}
}

/* 超窄屏（≤360）：640px 那一档的页头在 360 上刚好放下（余 22px），
   到 320（iPhone SE 一代 / Android Go）还是差约 30px，主按钮会被切掉一截。
   这一档只收页头四项（容器间距 / 品牌字号 / 两格语言 / 主按钮），别的不动。
   注：320 本来就有问题 —— 加语言切换**之前**页头需要 334px、同样超出 280px 的内容区，
   主按钮右缘也被切 13px；这一档顺手把它一起修掉。 */
@media (max-width:360px){
  .header-inner{gap:10px}
  .brand-name{font-size:15px;letter-spacing:1px}
  .header-actions{gap:10px}
  .lang-btn{min-width:32px;height:22px;padding:0 4px;font-size:11px}
  .btn-primary{padding:10px 12px;font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   首屏手机模型：窄屏只留中间那台（2026-10-12）
   ------------------------------------------------------------
   三台并排的真实宽度是 880px（262 + 28 + 300 + 28 + 262），整体用
   transform:scale(var(--k)) 缩放、以顶边中点为原点，所以**渲染出来就是
   880k 宽**。--k 在 ≤640 那档是 .5 → 440px，加上两侧 --gutter:20px 需要
   480px 视口；再窄就装不下，两侧手机各被裁掉 (480 - 视口宽)/2。
   这是设计稿沿用下来的行为，README 的「已知取舍」里一直记着「尚未改成只保留
   中间一台」—— 这里补上：

   ≤480px 时把两侧的 .phone-wrap--side 去掉，只留中间那台，并把 --k 从 .5 提到
   .88（300 × .88 = 264px 宽，320px 视口下容器有 280px，仍留 8px 余量）。
   .phone-stage 的高度写的是 calc(620px * var(--k))，跟着 --k 自己走，
   不需要另改一处（这正是把它做成变量的意义）。

   作用范围止于 ≤480 —— 481px 起 440px 的手机组本来就放得下，
   没必要把两侧也砍掉。中英两站都走这份 CSS，改动对两边同时生效。 */
@media (max-width:480px){
  .phone-wrap--side{display:none}
  :root{--k:.88}
}