/* 由 tools/gen-tokens-css.mjs 从 tokens.json 生成 —— 不要手改 */
:root {
  --bg: #ffffff;
  --surface: #f5f6f8;
  --surface-2: #eceef2;
  --border: #dfe3e9;
  --border-input: #7d8796;
  --text: #14181f;
  --text-muted: #5a6472;
  --accent: #AC4B14;
  --on-accent: #ffffff;
  --danger: #C81E1E;
  --success: #1a7f4b;
  --warning: #a15c00;
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --font-greek: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 12px;
  --lh-xs: 16px;
  --fw-xs: 500;
  --fs-sm: 14px;
  --lh-sm: 20px;
  --fw-sm: 400;
  --fs-base: 16px;
  --lh-base: 24px;
  --fw-base: 400;
  --fs-lg: 20px;
  --lh-lg: 28px;
  --fw-lg: 600;
  --fs-xl: 28px;
  --lh-xl: 34px;
  --fw-xl: 700;
  --fs-display: 40px;
  --lh-display: 44px;
  --fw-display: 700;
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --shadow-pop: 0 12px 32px rgba(16,24,40,.16);
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-ease: cubic-bezier(.2,.8,.2,1);
  --max-content: 960px;
  --card-max: 720px;
  --header-height: 56px;
  --touch-target-min: 44px;
  --focus-ring: 2px solid var(--accent);
  --focus-offset: 2px;
}

/* 跟随系统（auto 档）：只在没有手动指定 light 时生效 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1216;
    --surface: #171c22;
    --surface-2: #1f262e;
    --border: #2b333d;
    --border-input: #6b7684;
    --text: #e8ecf1;
    --text-muted: #a3adba;
    --accent: #F0A07A;
    --on-accent: #10131a;
    --danger: #ff8a80;
    --success: #6ee7a8;
    --warning: #f0b357;
  }
}

/* 手动强制暗色 */
[data-theme="dark"] {
  --bg: #0f1216;
  --surface: #171c22;
  --surface-2: #1f262e;
  --border: #2b333d;
  --border-input: #6b7684;
  --text: #e8ecf1;
  --text-muted: #a3adba;
  --accent: #F0A07A;
  --on-accent: #10131a;
  --danger: #ff8a80;
  --success: #6ee7a8;
  --warning: #f0b357;
}

/* 动效降级：用户要求减少动效时全部关掉 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


/*
 * 落地页的页面样式。颜色一律走 var(--…)，不许出现十六进制——
 * 令牌由 tools/build-landing.mjs 从 design/tokens.css 拼到本文件前面，
 * 两边合成 launch/landing.css 这一份产物。
 *
 * 为什么不是内联 <style>：站点的 CSP 是 `style-src 'self'`，内联样式会被直接拦掉
 * （BUG-023：落地页曾因此完全没上色）。同理，页面里也不许出现 style="…" 属性。
 */

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-sans);font-size:var(--fs-base);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max-content);margin:0 auto;padding:0 var(--space-5)}
a{color:var(--accent)}
:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset);border-radius:var(--radius-sm)}

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

header.bar{border-bottom:1px solid var(--border);background:var(--bg);position:sticky;top:0;z-index:5}
.bar-in{
  max-width:var(--max-content);margin:0 auto;padding:var(--space-3) var(--space-5);
  display:flex;align-items:center;gap:var(--space-3);min-height:var(--header-height);
}
.brand{display:flex;align-items:center;gap:var(--space-2);font-weight:700;color:var(--text);text-decoration:none}
.brand svg{color:var(--accent);flex:none}
.grow{flex:1}
.lang{display:flex;gap:var(--space-1)}
.lang a{
  font-size:var(--fs-sm);padding:var(--space-2) var(--space-3);border-radius:var(--radius-pill);
  text-decoration:none;color:var(--text-muted);
}
.lang a[aria-current]{background:var(--accent);color:var(--on-accent)}

h1,h2,h3{line-height:1.2;letter-spacing:-.01em;margin:0}
h1{font-size:var(--fs-display);font-weight:760;max-width:16ch}
h2{font-size:var(--fs-xl);font-weight:700}
h3{font-size:var(--fs-lg);font-weight:660}
p{margin:0}
.mt-3{margin-top:var(--space-3)}
.mt-4{margin-top:var(--space-4)}
.mt-7{margin-top:var(--space-7)}
.muted{color:var(--text-muted)}
.measure{max-width:56ch}

.hero{padding:var(--space-8) 0 var(--space-7);border-bottom:1px solid var(--border)}
.hero .sub{margin-top:var(--space-4);font-size:var(--fs-lg);color:var(--text-muted);max-width:44ch}
.hero .cta{margin-top:var(--space-6);display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap}
.btn{
  background:var(--accent);color:var(--on-accent);font-weight:640;
  padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);text-decoration:none;
  min-height:var(--touch-target-min);display:inline-flex;align-items:center;
}
.btn-note{font-size:var(--fs-sm);color:var(--text-muted)}

section{padding:var(--space-7) 0;border-bottom:1px solid var(--border)}
section > .wrap > h2 + *{margin-top:var(--space-4)}
.two{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:var(--space-5)}
.problem{font-size:var(--fs-lg);max-width:56ch}
.problem + .problem{margin-top:var(--space-4)}

ol.steps{list-style:none;padding:0;margin:var(--space-5) 0 0;display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
ol.steps li{display:flex;gap:var(--space-3)}
.num{
  flex:none;width:28px;height:28px;border-radius:var(--radius-pill);
  background:var(--surface-2);color:var(--accent);font-weight:700;font-size:var(--fs-sm);
  display:flex;align-items:center;justify-content:center;
}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5)}
.card h3{margin-bottom:var(--space-2)}
.card p{color:var(--text-muted);font-size:var(--fs-sm)}

table{width:100%;border-collapse:collapse;margin-top:var(--space-5);font-size:var(--fs-sm)}
th,td{text-align:left;padding:var(--space-3) var(--space-3) var(--space-3) 0;border-bottom:1px solid var(--border);vertical-align:top}
th{color:var(--text-muted);font-weight:600}
td:first-child{width:34%}

details{border-top:1px solid var(--border);padding:var(--space-4) 0}
details:first-of-type{margin-top:var(--space-5)}
summary{cursor:pointer;font-weight:600;min-height:var(--touch-target-min);display:flex;align-items:center}
details p{margin-top:var(--space-3);color:var(--text-muted);max-width:60ch}

.price-line{font-size:var(--fs-xl);font-weight:700;margin-top:var(--space-5)}
.final{text-align:center;padding:var(--space-8) 0}
.final .btn{margin-top:var(--space-5)}
footer{padding:var(--space-6) 0 var(--space-8);color:var(--text-muted);font-size:var(--fs-sm)}
footer .wrap{display:flex;gap:var(--space-4);flex-wrap:wrap;align-items:center}
.honest{
  font-size:var(--fs-sm);color:var(--text-muted);border-left:2px solid var(--accent);
  padding-left:var(--space-3);margin-top:var(--space-5);
}
@media (max-width:640px){
  h1{font-size:var(--fs-xl)}
  .hero{padding:var(--space-7) 0 var(--space-6)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}