/* ===== CanPhone 官网公共样式 2026-09-10 =====
   信纸米黄 + 墨绿，跟 App 的「奶油」主题同源。
   深色模式不是把颜色反过来，是换一张深色的纸。 */
:root {
  --bg:        #F2EFE1;
  --bg-deep:   #E9E5D3;
  --card:      #FBF9F0;
  --card-2:    #EFEBDA;
  --ink:       #33322A;
  --ink-2:     #5C5A4C;
  --muted:     #8B8776;
  --accent:    #6C7358;
  --accent-in: #4F553F;
  --accent-on: #FBF9F0;
  --line:      #E0DAC3;
  --line-soft: #EAE5D2;
  --shadow:    0 2px 10px rgba(58,57,46,.05), 0 12px 34px rgba(58,57,46,.06);
  --shadow-lg: 0 8px 24px rgba(58,57,46,.10), 0 30px 70px rgba(58,57,46,.13);
  --rule:      rgba(108,115,88,.055);
  --radius:    22px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #23231E;
    --bg-deep:   #1D1D19;
    --card:      #302F27;
    --card-2:    #3A392F;
    --ink:       #EDE9D8;
    --ink-2:     #C9C4B0;
    --muted:     #99947F;
    --accent:    #A3AE85;
    --accent-in: #B9C39C;
    --accent-on: #23231E;
    --line:      #46453A;
    --line-soft: #3B3A31;
    --shadow:    0 2px 10px rgba(0,0,0,.28), 0 12px 34px rgba(0,0,0,.3);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.36), 0 30px 70px rgba(0,0,0,.42);
    --rule:      rgba(163,174,133,.05);
  }
}


/* ===== 旧页面沿用的变量别名 =====
   account / buy / releases 里写的是 --card-deep / --accent-ink，
   在这里对齐到同一套 token，那三页就不必逐处改写，深浅色也一起跟着走 */
:root { --card-deep: var(--card-2); --accent-ink: var(--accent-in); --danger: #A0522D; }
@media (prefers-color-scheme: dark) { :root { --danger: #D98E63; } }

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
               "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  line-height:1.65; font-size:16px;
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, var(--rule) 31px 32px);
  overflow-x:hidden;
  padding-bottom: env(safe-area-inset-bottom);
}
img { max-width:100%; display:block; }
a { color: var(--accent-in); text-decoration:none; }

.wrap { width:100%; max-width:1000px; margin:0 auto; padding:0 20px; }
.wrap-narrow { max-width:660px; }

/* ===== 按钮 ===== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border-radius:999px; padding:14px 26px; font-size:16px; font-weight:500;
  background: var(--accent); color: var(--accent-on);
  border:1.5px solid var(--accent); cursor:pointer;
  transition: transform .12s ease, filter .12s ease; white-space:nowrap;
}
.btn:active { transform: scale(.975); }
.btn:hover { filter: brightness(1.06); }
.btn.outline { background:transparent; color: var(--accent-in); }
.btn.outline:hover { background: var(--card-2); filter:none; }
.btn.ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn.small { padding:9px 18px; font-size:14px; }
.btn.block { width:100%; }
.btn svg { width:18px; height:18px; fill:currentColor; flex:none; }

/* ===== 顶部条 ===== */
.nav {
  position:sticky; top:0; z-index:60;
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  border-bottom:1px solid transparent; transition: border-color .2s ease;
  padding-top: env(safe-area-inset-top);
}
.nav.stuck { border-bottom-color: var(--line-soft); }
.nav .inner { display:flex; align-items:center; gap:12px; height:56px; }
.nav .brand { display:flex; align-items:center; gap:9px; font-weight:600; color:var(--ink); font-size:16px; }
.nav .brand img { width:26px; height:26px; border-radius:7px; }
.nav .links { margin-left:auto; display:flex; align-items:center; gap:20px; }
.nav .links a { color: var(--ink-2); font-size:14.5px; }
.nav .links a:hover { color: var(--accent-in); }
@media (max-width:640px) { .nav .links a.hide-sm { display:none; } }

/* ===== 通用小件 ===== */
.eyebrow {
  display:inline-block; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--muted); margin-bottom:12px;
}
.tag {
  font-size:11.5px; font-weight:500; color: var(--accent-on); background: var(--accent);
  border-radius:999px; padding:3px 11px; line-height:1.5; white-space:nowrap;
}
.tag.soft { background: var(--card-2); color: var(--accent-in); border:1px solid var(--line); }
.card {
  background: var(--card); border:1px solid var(--line); border-radius: var(--radius);
  padding:26px 22px; box-shadow: var(--shadow);
}
/* 默认可见 —— 脚本没跑起来时整页也要读得到。html.js 由脚本自己加上 */
.js .rise { opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.js .rise.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .js .rise { opacity:1; transform:none; transition:none; } }

/* ===== 手机壳 ===== */
.phone { position:relative; width:100%; max-width:268px; margin:0 auto; }
.phone .screen {
  border-radius:34px; overflow:hidden; border:1px solid var(--line);
  background: var(--card-2); box-shadow: var(--shadow-lg);
  aspect-ratio: 1206 / 2734;   /* 含顶部补出来的状态栏留白 */
}
.phone .screen img { width:100%; height:100%; object-fit:cover; }
.phone .notch {
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:74px; height:20px; border-radius:999px; background: rgba(20,20,16,.82);
}

footer.site {
  text-align:center; color: var(--muted); font-size:12.5px;
  padding:38px 20px calc(46px + env(safe-area-inset-bottom)); line-height:2.1;
  border-top:1px solid var(--line-soft); margin-top:28px;
}
footer.site a { color: var(--muted); }
footer.site a:hover { color: var(--accent-in); }
footer.site .row { display:flex; gap:6px 14px; justify-content:center; flex-wrap:wrap; }

/* 微信 / QQ 内置浏览器引导 */
#wxMask { display:none; position:fixed; inset:0; background: rgba(26,26,20,.88); z-index:99; color:#FBF9F0; }
#wxMask .tip { position:absolute; top:calc(22px + env(safe-area-inset-top)); right:24px; font-size:17px; line-height:2; text-align:right; }
#wxMask .arrow { position:absolute; top:calc(8px + env(safe-area-inset-top)); right:30px; font-size:42px; transform:rotate(-12deg); }

/* ===== 首页专用 ===== */
.hero { text-align:center; padding:46px 0 8px; }
.hero .icon { width:88px; height:88px; border-radius:22px; margin:0 auto;
  box-shadow: 0 10px 30px rgba(79,85,63,.22); }
@media (prefers-color-scheme: dark) { .hero .icon { box-shadow: 0 10px 30px rgba(0,0,0,.45); } }
.hero h1 {
  font-size: clamp(30px, 8.4vw, 46px); line-height:1.25; letter-spacing:.01em;
  margin-top:22px; font-weight:600;
}
.hero .lead {
  color: var(--ink-2); font-size: clamp(15px, 4.1vw, 18px);
  margin:16px auto 0; max-width:21em;
}
@media (min-width:700px) { .hero .lead { max-width:30em; } }
.hero .cta { display:flex; gap:12px; justify-content:center; margin-top:28px; flex-wrap:wrap; }
.hero .cta .btn { flex:1 1 168px; max-width:230px; }
@media (min-width:560px) { .hero .cta .btn { flex:0 0 auto; min-width:184px; } }
.hero .note { color: var(--muted); font-size:12.5px; margin-top:14px; }

.stage { position:relative; padding:34px 0 6px; }
.stage .phone { max-width:250px; }
.stage::after {
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(560px, 92vw); height:200px; border-radius:50%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 13%, transparent), transparent 68%);
  z-index:-1; filter: blur(6px);
}

section.band { padding:56px 0 14px; }
section.band h2 {
  font-size: clamp(23px, 6vw, 31px); font-weight:600; line-height:1.35; letter-spacing:.01em;
}
section.band .sub { color: var(--muted); font-size:14.5px; margin-top:10px; max-width:30em; }
.center { text-align:center; }
.center .sub { margin-left:auto; margin-right:auto; }

/* 三句话 */
.says { display:grid; gap:14px; margin-top:26px; grid-template-columns:1fr; }
@media (min-width:760px) { .says { grid-template-columns: repeat(3,1fr); max-width:900px; margin-left:auto; margin-right:auto; } }
.say { background: var(--card); border:1px solid var(--line); border-radius:18px; padding:22px 20px; box-shadow: var(--shadow); }
.say .n {
  width:26px; height:26px; border-radius:8px; background: var(--card-2); color: var(--accent-in);
  display:grid; place-items:center; font-size:13px; font-weight:600; margin-bottom:12px;
}
.say p { color: var(--ink-2); font-size:14.5px; }

/* 图文交替 */
.duo { display:grid; gap:26px; align-items:center; padding:44px 0; grid-template-columns:1fr; }
@media (min-width:820px) {
  .duo { grid-template-columns: 1.06fr .94fr; gap:44px; padding:62px 0; }
  .duo .phone { max-width:292px; }
  .duo.flip .txt { order:2; }
}
.duo .txt h3 { font-size: clamp(21px, 5.4vw, 27px); font-weight:600; line-height:1.4; }
.duo .txt p { color: var(--ink-2); font-size:15px; margin-top:12px; }
.duo .txt .kicker { color: var(--accent-in); font-size:13px; font-weight:500; margin-bottom:8px; letter-spacing:.02em; }
.duo .txt ul { margin:14px 0 0; padding:0; list-style:none; color: var(--muted); font-size:13.5px; }
.duo .txt ul li { padding-left:16px; position:relative; margin-top:6px; }
.duo .txt ul li::before { content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; border-radius:50%; background: var(--accent); opacity:.55; }

/* 下载区 */
.gets { display:grid; gap:16px; grid-template-columns:1fr; margin-top:26px; }
@media (min-width:820px) { .gets { grid-template-columns:1fr 1fr; align-items:start; max-width:860px; margin-left:auto; margin-right:auto; } }
.get h3 { font-size:19px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.get .price { font-size:31px; font-weight:600; margin-top:14px; letter-spacing:-.01em; }
.get .price small { font-size:13px; font-weight:400; color: var(--muted); margin-left:7px; letter-spacing:0; }
.get p { color: var(--ink-2); font-size:14px; margin-top:10px; }
.get .btn { margin-top:16px; }
.get .btn + .btn { margin-top:10px; }
.meta { display:flex; flex-wrap:wrap; gap:5px 16px; color: var(--muted); font-size:12px; margin-top:14px; }
.get details { margin-top:12px; font-size:12.5px; color: var(--muted); }
.get details summary { cursor:pointer; color: var(--accent-in); }
.get details code { word-break:break-all; font-size:11px; background: var(--card-2); border:1px solid var(--line-soft);
  border-radius:6px; padding:4px 7px; display:block; margin-top:7px; line-height:1.5; }
.whatsnew { margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft); }
.whatsnew > b { font-size:13px; color: var(--accent-in); }
.whatsnew ul { margin:9px 0 0 1.15em; color: var(--muted); font-size:13px; }
.whatsnew ul li + li { margin-top:5px; }
.whatsnew ul li b { color: var(--ink); font-weight:600; }
.whatsnew > a { display:inline-block; margin-top:10px; font-size:12.5px; }

/* 需要知道的 */
.needs { display:grid; gap:14px; grid-template-columns:1fr; margin-top:24px; }
@media (min-width:760px) { .needs { grid-template-columns: repeat(3,1fr); max-width:900px; margin-left:auto; margin-right:auto; } }
.need { background: var(--card-2); border:1px solid var(--line-soft); border-radius:18px; padding:20px; }
.need b { font-size:15px; }
.need p { color: var(--muted); font-size:13px; margin-top:7px; }

/* FAQ */
.faq { margin-top:24px; border-top:1px solid var(--line-soft); }
.faq details { border-bottom:1px solid var(--line-soft); }
.faq summary {
  cursor:pointer; list-style:none; padding:18px 30px 18px 2px; font-size:15.5px; font-weight:500;
  position:relative; color: var(--ink);
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after {
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  color: var(--muted); font-size:20px; font-weight:400; line-height:1;
}
.faq details[open] summary::after { content:"–"; }
.faq details p { color: var(--ink-2); font-size:14px; padding:0 4px 18px 2px; }
.faq details p + p { padding-top:0; margin-top:-8px; }

/* 底部大 CTA */
.tail { text-align:center; padding:56px 20px 10px; }
.tail h2 { font-size: clamp(23px, 6vw, 30px); font-weight:600; }
.tail .cta { display:flex; gap:12px; justify-content:center; margin-top:22px; flex-wrap:wrap; }
.tail .cta .btn { flex:1 1 168px; max-width:230px; }
@media (min-width:560px) { .tail .cta .btn { flex:0 0 auto; min-width:184px; } }

/* grid 轨道的 min-width 默认是 auto，长内容会把轨道撑破、文字被切掉。
   所有 grid 子项一律钉成 0，这是 grid 布局必须的防御，不是可选优化 */
.says > *, .duo > *, .gets > *, .needs > * { min-width: 0; }