/* ============================================================
   闲工具 · XIATOOL
   ------------------------------------------------------------
   版式主张：编辑式排版（editorial），不做落地页模板
   · 不对称栅格，区块不居中
   · 章节不用「小标签」，用编号 01/02 + 短横线
   · 字号层级极端（display vs body 差 6 倍以上）
   · 全站唯一的图形母题 = 时间刻度尺
   · 动效：滚动进入 / 条形生长 / 删除线划过 / 导航收缩 / 阅读进度
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --paper:#FAF9F6; --paper-2:#F3F1EA; --paper-3:#E9E6DC;

  --ink:#121417; --ink-2:#33373F; --graphite:#6B7076; --graphite-2:#9C9FA4;

  --line:#E3DFD5; --line-2:#D2CDC0;

  /* 唯一强调色：琥珀 = 日落 / 咖啡 / 下班后的暖光 */
  --amber:#D9742C; --amber-hi:#F0A055; --amber-deep:#9C4A11; --amber-soft:#FBEEE0;

  --dark:#121417; --dark-2:#1E2126;
  --ok:#2E7D52;

  --fs-display: clamp(2.85rem, 8.2vw, 6.4rem);
  --fs-h1:      clamp(2.1rem, 4.9vw, 3.7rem);
  --fs-h2:      clamp(1.65rem, 3.3vw, 2.6rem);
  --fs-h3:      clamp(1.12rem, 1.9vw, 1.45rem);
  --fs-h4:      1.02rem;
  --fs-lede:    clamp(1rem, 1.45vw, 1.2rem);
  --fs-body:    1rem;
  --fs-small:   .875rem;
  --fs-tiny:    .78rem;

  --measure: 45rem;
  --wrap: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  --r: 14px; --r-lg: 20px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "HarmonyOS Sans SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  --font-num: ui-monospace, "SF Mono", "SF Pro Text", -apple-system,
              "Segoe UI", Roboto, monospace;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-sans); font-size:var(--fs-body); line-height:1.75;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* 纸纹噪点：让底色不是死板的纯色，只在近处可感 */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > *{ position:relative; z-index:1; }

img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:750; letter-spacing:-.024em; line-height:1.2; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

.num{ font-family:var(--font-num); font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

/* ---------- 3. Layout ---------- */
.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:var(--gutter); }
.measure{ max-width:var(--measure); }
.center{ text-align:center; }
.rule{ height:1px; background:var(--line); border:0; margin:0; }
.hr{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- 4. 章节：编号 + 短横线（替掉 kicker 三段式） ---------- */
.sec{ padding:clamp(4.2rem,8.5vw,7.5rem) 0; }
.sec--tight, .section--tight{ padding:clamp(2.8rem,5.5vw,4.6rem) 0; }
.section{ padding:clamp(4.2rem,8.5vw,7.5rem) 0; }

.sec-head{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.2rem,3vw,3rem); align-items:start;
  margin-bottom:clamp(2.2rem,4.5vw,4rem);
}
.sec-num{
  font-family:var(--font-num); font-size:var(--fs-tiny);
  letter-spacing:.16em; color:var(--amber);
  padding-top:.75em; white-space:nowrap;
  display:flex; align-items:center; gap:.7em; font-weight:700;
}
.sec-num::before{ content:""; width:2rem; height:1px; background:var(--amber); opacity:.45; }
.sec-head > div{ max-width:52rem; }
.sec-head p{ margin:1rem 0 0; max-width:var(--measure); color:var(--ink-2); font-size:var(--fs-lede); line-height:1.7; }

/* 兼容旧的 section-head */
.section-head{ max-width:56rem; margin-bottom:clamp(2.2rem,4.5vw,4rem); }
.section-head .kicker{
  display:flex; align-items:center; gap:.7em;
  font-family:var(--font-num); font-size:var(--fs-tiny); letter-spacing:.16em;
  color:var(--amber); font-weight:700; text-transform:none;
}
.section-head .kicker::before{ content:""; width:2rem; height:1px; background:var(--amber); opacity:.45; }
.section-head .h2 + p{ margin-top:1rem; color:var(--ink-2); font-size:var(--fs-lede); line-height:1.7; max-width:var(--measure); }
.section-head.center{ margin-inline:auto; }
.kicker{ font-size:var(--fs-tiny); font-weight:700; letter-spacing:.14em; color:var(--amber); }

/* eyebrow：小标签（产品页/其他页仍在用）。不用胶囊底色，用编号感的短线 */
.eyebrow{
  display:inline-flex; align-items:center; gap:.7em;
  font-size:var(--fs-tiny); font-weight:700; letter-spacing:.12em;
  color:var(--amber-deep); text-transform:none;
}
.eyebrow::before{ content:""; width:1.6rem; height:1px; background:var(--amber); opacity:.55; }
.band .eyebrow{ color:var(--amber-hi); }
.band .eyebrow::before{ background:var(--amber-hi); }

/* 档位按钮的「停用」态 */
.tier-buy.is-off{
  background:var(--paper-3); color:var(--graphite-2); font-weight:600; cursor:default;
}
.tier-buy.is-off:hover{ transform:none; background:var(--paper-3); }

/* ---------- 5. Typography ---------- */
.display{ font-size:var(--fs-display); line-height:.96; letter-spacing:-.038em; font-weight:800; margin:0; }
.h-hero{ font-size:var(--fs-display); line-height:.98; letter-spacing:-.036em; font-weight:800; margin:0; }
.h1{ font-size:var(--fs-h1); line-height:1.08; letter-spacing:-.028em; font-weight:750; margin:0; }
.h2{ font-size:var(--fs-h2); line-height:1.14; letter-spacing:-.024em; font-weight:750; margin:0; }
.h3{ font-size:var(--fs-h3); line-height:1.3; letter-spacing:-.014em; font-weight:700; margin:0; }
.h4{ font-size:var(--fs-h4); line-height:1.45; font-weight:700; margin:0; }

.lede{ font-size:var(--fs-lede); line-height:1.72; color:var(--ink-2); max-width:var(--measure); }
.muted{ color:var(--graphite); }
.small{ font-size:var(--fs-small); }
.tiny{ font-size:var(--fs-tiny); }

/* 强调：不用背景高亮块，用下划线偏移（更「编辑」） */
.mark{ color:var(--amber-deep); box-shadow:inset 0 -.42em 0 var(--amber-soft); padding:0 .06em; }
.strike{ position:relative; color:var(--graphite-2); }
.strike::after{
  content:""; position:absolute; left:-.02em; right:-.02em; top:54%;
  height:.085em; background:var(--amber); border-radius:1px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .75s var(--ease-out) .3s;
}
.is-in .strike::after{ transform:scaleX(1); }

.tag{
  display:inline-block; font-size:var(--fs-tiny); padding:.28em .7em;
  border:1px solid var(--line); border-radius:999px; color:var(--graphite);
}
.pill{
  display:inline-block; padding:.25em .7em; border-radius:999px;
  background:var(--paper-2); border:1px solid var(--line);
  font-size:var(--fs-tiny); font-weight:600; color:var(--ink-2);
}

/* ---------- 6. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.85em 1.6em; border-radius:999px; border:1px solid transparent;
  font-size:.95rem; font-weight:650; line-height:1; cursor:pointer; white-space:nowrap;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease),
             background-color .2s, border-color .2s, color .2s;
}
.btn--primary{
  background:var(--amber); color:#fff;
  box-shadow:0 2px 0 var(--amber-deep), 0 12px 26px -14px rgba(217,116,44,.75);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 4px 0 var(--amber-deep), 0 20px 34px -16px rgba(217,116,44,.85); }
.btn--primary:active{ transform:translateY(1px); box-shadow:0 1px 0 var(--amber-deep); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn--ink{ background:var(--ink); color:#fff; }
.btn--ink:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -16px rgba(18,20,23,.6); }
.btn--sm{ padding:.62em 1.15em; font-size:.86rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }
.btn .arw{ transition:transform .3s var(--ease); }
.btn:hover .arw{ transform:translateX(.25em); }

/* ---------- 7. Header / Nav：滚动收缩 + 当前章节 ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  border-bottom:1px solid transparent;
  transition:background-color .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.site-header.is-stuck{
  background:rgba(250,249,246,.88);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line);
}
.nav{
  max-width:var(--wrap); margin:0 auto; padding-inline:var(--gutter);
  height:76px; display:flex; align-items:center; gap:2rem;
  transition:height .35s var(--ease);
}
.site-header.is-stuck .nav{ height:60px; }

.brand{ display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:-.022em; font-size:1.05rem; }
.brand-mark{
  width:28px; height:28px; border-radius:8px; background:var(--ink);
  display:grid; place-items:center; flex:none;
  transition:transform .45s var(--ease);
}
.site-header.is-stuck .brand-mark{ transform:scale(.88); }
.brand-mark svg{ width:15px; height:15px; }
.brand-sub{ font-size:.76rem; font-weight:500; color:var(--graphite); letter-spacing:.02em; }

.nav-links{ display:flex; align-items:center; gap:.15rem; margin-left:auto; }
.nav-links a{
  position:relative; padding:.42rem .78rem; border-radius:999px;
  font-size:.89rem; font-weight:550; color:var(--ink-2);
  transition:color .2s, background-color .2s;
}
.nav-links a:hover{ color:var(--ink); background:var(--paper-2); }
.nav-links a.is-active, .nav-links a.is-current{ color:var(--amber-deep); }
.nav-links a.is-active::after, .nav-links a.is-current::after{
  content:""; position:absolute; left:.78rem; right:.78rem; bottom:.1rem;
  height:2px; background:var(--amber); border-radius:2px;
}
.nav-cta{ margin-left:.6rem; }

/* 汉堡按钮（仅窄屏） */
.nav-toggle{
  display:none; margin-left:auto;
  width:38px; height:38px; padding:0; border-radius:11px;
  border:1px solid var(--line-2); background:var(--paper-2);
  cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{ display:block; width:16px; height:1.6px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), opacity .2s; }
.site-header.nav-open .nav-toggle span:first-child{ transform:translateY(3.3px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:last-child{ transform:translateY(-3.3px) rotate(-45deg); }

@media (max-width:920px){
  .nav-links{ display:none; }
  .nav-cta{ margin-left:.7rem; }
  .nav-toggle{ display:flex; }
}
@media (min-width:921px){ .nav-drawer{ display:none !important; } }

/* 抽屉 */
.nav-drawer{
  display:none; flex-direction:column; gap:.15rem;
  padding:.4rem var(--gutter) 1.1rem;
  background:rgba(250,249,246,.97);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  animation:fadeDown .26s var(--ease);
}
.site-header.nav-open .nav-drawer{ display:flex; }
.nav-drawer a{ padding:.7rem .2rem; font-weight:600; font-size:.95rem; border-bottom:1px solid var(--line); }
.nav-drawer a:last-child{ border-bottom:0; }

/* 阅读进度：贴在最顶部的一条琥珀细线 */
.read-prog{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:101;
  background:var(--amber); transition:width .08s linear;
}

/* ---------- 8. HERO ---------- */
.hero{
  padding-top:clamp(6.5rem,12vw,10.5rem);
  padding-bottom:clamp(2.5rem,5vw,4.5rem);
  position:relative; overflow:hidden;
}
/* 背景刻度尺：很淡，给「这站是被设计过的」的感觉 */
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px calc(100% / 12));
  opacity:.55;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.85), transparent 76%);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.85), transparent 76%);
}
.hero > *{ position:relative; z-index:1; }
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; gap:3rem; } }

.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:var(--fs-tiny); letter-spacing:.14em; text-transform:uppercase;
  color:var(--graphite); font-weight:650;
}
.hero-eyebrow i{
  width:7px; height:7px; border-radius:2px; background:var(--amber); display:block;
  animation:blink 2.6s var(--ease) infinite;
}
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.35} }

.hero-title{ margin:.8rem 0 0; }
.hero-title-sub{
  display:block; font-size:clamp(.95rem,1.9vw,1.3rem); font-weight:600;
  letter-spacing:.02em; color:var(--graphite); margin-bottom:.55rem;
}
.hero-title-main{
  display:block; font-size:var(--fs-display); line-height:.99;
  letter-spacing:-.04em; font-weight:800;
}
.hero-title-main .mark{ box-shadow:inset 0 -.12em 0 var(--amber-soft); }
.hero-title-main .strike::after{ top:52%; height:.075em; }
.hero-sub{ margin:1.5rem 0 0; max-width:33rem; font-size:var(--fs-lede); line-height:1.7; color:var(--ink-2); }
.hero-sub b{ color:var(--ink); font-weight:650; }

.hero-meta{
  margin-top:1.3rem; display:flex; flex-wrap:wrap; gap:.4rem 1.05rem;
  font-size:var(--fs-tiny); color:var(--graphite);
}
.hero-meta span{ display:inline-flex; align-items:center; gap:.4rem; }
.hero-meta span::before{ content:""; width:4px; height:4px; border-radius:50%; background:var(--line-2); }

.hero-actions{ margin-top:2.1rem; }
.hero-note{ margin-top:1.2rem; font-size:var(--fs-tiny); color:var(--graphite); }

/* ---------- 9. 时间轴（全站主视觉母题） ---------- */
.clock{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.25rem,2.4vw,1.9rem); position:relative; overflow:hidden;
  box-shadow:0 34px 64px -44px rgba(18,20,23,.42);
}
.clock::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,.75), transparent 40%);
}
.clock-hd{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding-bottom:.95rem; border-bottom:1px solid var(--line);
}
.clock-hd h4{ margin:0; font-size:.93rem; font-weight:700; letter-spacing:-.01em; }
.clock-hd span{ font-size:var(--fs-tiny); color:var(--graphite); font-family:var(--font-num); }

.scale{
  display:flex; justify-content:space-between; margin:1.05rem 0 .1rem;
  font-family:var(--font-num); font-size:.68rem; color:var(--graphite-2);
}
.scale span{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.scale i{ width:1px; height:6px; background:var(--line-2); }

.track{ margin:.6rem 0 0; }
.track-l{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; font-size:.82rem; margin-bottom:.4rem; }
.track-l b{ font-weight:650; color:var(--ink-2); }
.track-l .v{ font-family:var(--font-num); font-weight:700; color:var(--ink); white-space:nowrap; }
.bar{ height:15px; border-radius:8px; background:var(--paper-3); overflow:hidden; }
.bar i{
  display:block; height:100%; width:0; border-radius:8px;
  transition:width 1.6s var(--ease-out); position:relative;
}
.bar i::after{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.26) 0 6px, transparent 6px 12px);
}
.t-slow .bar i{ background:linear-gradient(90deg,#4A4E57,#26292F); }
.t-slow .track-l .v{ color:#4A4E57; }
.t-fast .bar i{ background:linear-gradient(90deg,var(--amber-hi),var(--amber)); }
.t-fast .track-l .v{ color:var(--amber-deep); }

.clock-gap{
  margin:.85rem 0 0; padding-left:.1rem;
  font-size:var(--fs-tiny); color:var(--graphite);
  font-family:var(--font-num); letter-spacing:.02em;
}
.clock-foot{
  margin-top:1.25rem; padding-top:1.05rem; border-top:1px solid var(--line);
  font-size:.92rem; line-height:1.68; color:var(--ink-2);
}
.clock-foot strong{ color:var(--ink); font-weight:700; }
.clock-note{ margin:.6rem 0 0; font-size:.72rem; color:var(--graphite-2); }

/* 兼容旧 .ledger（其他页面若还在用） */
.ledger{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.25rem,2.4vw,1.9rem); box-shadow:0 30px 60px -46px rgba(18,20,23,.4); }
.ledger-title{ font-size:var(--fs-tiny); font-weight:700; letter-spacing:.1em; color:var(--graphite-2); padding-bottom:1rem; border-bottom:1px solid var(--line); }
.ledger-row{ padding:1.05rem 0; border-bottom:1px solid var(--line); }
.ledger-row:last-of-type{ border-bottom:0; }
.ledger-top{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.4rem; font-size:.82rem; }
.ledger-label{ font-weight:650; color:var(--ink-2); }
.ledger-val{ font-family:var(--font-num); font-weight:700; }
.ledger-bar{ height:15px; border-radius:8px; background:var(--paper-3); overflow:hidden; }
.ledger-bar i{ display:block; height:100%; border-radius:8px; transition:width 1.6s var(--ease-out); }
.ledger-row.is-slow .ledger-bar i{ background:linear-gradient(90deg,#4A4E57,#26292F); }
.ledger-row.is-fast .ledger-bar i{ background:linear-gradient(90deg,var(--amber-hi),var(--amber)); }
.ledger-row.is-fast .ledger-val{ color:var(--amber-deep); }
.ledger-sum{
  margin-top:1.25rem; padding:1rem 1.1rem; background:var(--amber-soft);
  border-radius:var(--r); font-size:.92rem; line-height:1.68; color:var(--amber-deep);
}
.ledger-sum strong{ font-weight:700; }

/* ---------- 10. 阅读进度刻度尺 ---------- */
.timeline-rail{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper-2); }
.rail-in{
  max-width:var(--wrap); margin:0 auto; padding:.9rem var(--gutter);
  display:flex; align-items:center; gap:1rem;
  font-family:var(--font-num); font-size:.7rem; color:var(--graphite);
}
.rail-track{ flex:1; height:3px; background:var(--line-2); border-radius:2px; overflow:hidden; }
.rail-track i{ display:block; height:100%; width:0; background:var(--amber); }

/* ---------- 11. 栅格 ---------- */
.grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1rem,2vw,1.5rem); }
.grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,1.5rem); }
@media (max-width:940px){ .grid-3{ grid-template-columns:1fr; } }
@media (max-width:760px){ .grid-2{ grid-template-columns:1fr; } }

/* ---------- 12. 工具卡：不对称大卡 ---------- */
.tools{ display:grid; gap:clamp(1rem,2vw,1.5rem); }
.tool{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.55fr);
  gap:clamp(1.5rem,3vw,2.8rem); align-items:center;
  padding:clamp(1.5rem,3vw,2.5rem);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:#fff; position:relative; overflow:hidden;
  transition:transform .4s var(--ease), border-color .3s, box-shadow .4s var(--ease);
}
.tool:hover{ transform:translateY(-4px); border-color:var(--line-2); box-shadow:0 32px 58px -38px rgba(18,20,23,.5); }
.tool::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--amber); transform:scaleY(0); transform-origin:top;
  transition:transform .5s var(--ease-out);
}
.tool:hover::before{ transform:scaleY(1); }
@media (max-width:880px){ .tool{ grid-template-columns:1fr; } }

.tool-tag{
  display:inline-block; font-size:var(--fs-tiny); font-weight:700; letter-spacing:.08em;
  color:var(--amber-deep); background:var(--amber-soft);
  padding:.3em .75em; border-radius:999px;
}
.tool h3{ margin:.85rem 0 0; }
.tool > p, .tool-desc{ margin:.65rem 0 0; color:var(--ink-2); font-size:.97rem; max-width:38rem; }
.tool-feats{ margin:1.15rem 0 0; display:flex; flex-wrap:wrap; gap:.45rem .5rem; }
.tool-feats li{
  font-size:var(--fs-tiny); color:var(--ink-2);
  padding:.32em .75em; border:1px solid var(--line); border-radius:999px; background:var(--paper);
}
.tool-side{ text-align:right; }
@media (max-width:880px){ .tool-side{ text-align:left; } }
.tool-price{ display:flex; flex-direction:column; gap:.35rem; }
.tool-price .row{ display:flex; justify-content:flex-end; gap:.5rem; align-items:baseline; font-size:.85rem; color:var(--graphite); }
@media (max-width:880px){ .tool-price .row{ justify-content:flex-start; } }
.tool-price .row b{ font-family:var(--font-num); font-size:1.02rem; color:var(--ink); font-weight:700; }
.tool-go{
  margin-top:1rem; display:inline-flex; align-items:center; gap:.4rem;
  font-size:.9rem; font-weight:650; color:var(--amber-deep);
}
.tool-go .arw{ transition:transform .3s var(--ease); }
.tool:hover .tool-go .arw{ transform:translateX(.3em); }

/* 旧卡片（其他页面） */
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.4rem,2.6vw,2rem); }
.card--hover{ transition:box-shadow .3s var(--ease), transform .3s var(--ease), border-color .25s; }
.card--hover:hover{ box-shadow:0 26px 48px -36px rgba(18,20,23,.45); transform:translateY(-3px); border-color:var(--line-2); }
.card-media{ height:110px; border-radius:var(--r); background:var(--paper-2); display:grid; place-items:center; margin-bottom:1.1rem; overflow:hidden; }
.card h3{ margin-bottom:.5rem; }
.card p{ color:var(--graphite); font-size:.95rem; }

/* ---------- 13. 深色情绪段 ---------- */
.band{ background:var(--dark); color:var(--paper); padding:clamp(4.2rem,8.5vw,7.5rem) 0; position:relative; overflow:hidden; }
.band::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(900px 420px at 82% -10%, rgba(217,116,44,.2), transparent 62%);
}
.band > *{ position:relative; }
.band h2{ color:#fff; }
.band p{ color:rgba(250,249,246,.7); }
.band .sec-num{ color:var(--amber-hi); }
.band .sec-num::before{ background:var(--amber-hi); }

.clock-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2.5vw,2rem); margin-top:clamp(2rem,4vw,3.2rem); }
@media (max-width:820px){ .clock-row{ grid-template-columns:1fr; } }
.clock-card{ border-top:1px solid rgba(255,255,255,.16); padding-top:1.35rem; }
.clock-card .num{
  font-family:var(--font-num); font-size:clamp(1.9rem,3.8vw,2.9rem);
  font-weight:700; letter-spacing:-.04em; line-height:1; color:var(--amber-hi);
}
.clock-card h4{ color:#fff; margin:.85rem 0 0; font-size:1rem; font-weight:700; }
.clock-card p{ margin:.55rem 0 0; font-size:.92rem; line-height:1.7; }

/* ---------- 14. 步骤 ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:820px){ .steps{ grid-template-columns:1fr; } }
.step{ padding:1.9rem 0 0; border-top:2px solid var(--ink); }
.step + .step{ padding-left:clamp(1.4rem,3vw,2.4rem); }
@media (max-width:820px){
  .step{ padding:1.5rem 0; border-top:1px solid var(--line-2); }
  .step + .step{ padding-left:0; }
  .step:first-child{ border-top:2px solid var(--ink); }
}
.step-n{ font-family:var(--font-num); font-size:.72rem; letter-spacing:.14em; color:var(--amber); font-weight:700; }
.step h4{ margin:.45rem 0 0; }
.step p{ margin:.5rem 0 0; font-size:.92rem; color:var(--ink-2); max-width:26rem; }

/* ---------- 15. 对比表 ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; }
table.cmp{ width:100%; border-collapse:collapse; min-width:560px; }
table.cmp th, table.cmp td{ padding:.85rem 1.1rem; text-align:left; border-bottom:1px solid var(--line); font-size:.92rem; vertical-align:top; }
table.cmp thead th{
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--graphite); font-weight:700; background:var(--paper-2);
  border-bottom:2px solid var(--ink);
}
table.cmp tbody tr:last-child td{ border-bottom:0; }
table.cmp td:first-child{ font-weight:650; color:var(--ink); }
table.cmp .yes{ color:var(--ok); font-weight:700; }
table.cmp .no{ color:var(--graphite-2); }
table.cmp tbody tr{ transition:background-color .2s; }
table.cmp tbody tr:hover{ background:var(--paper-2); }

table.spec{ width:100%; border-collapse:collapse; font-size:.92rem; }
table.spec td{ padding:.75rem 0; border-bottom:1px solid var(--line); }
table.spec td:first-child{ color:var(--graphite); width:9rem; }

/* ---------- 16. 价格 ---------- */
.plans{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,1.4rem); align-items:start; }
@media (max-width:980px){ .plans{ grid-template-columns:1fr; } }
.plan{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.3rem,2.4vw,1.9rem);
  display:flex; flex-direction:column; height:100%; position:relative;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s;
}
.plan:hover{ transform:translateY(-4px); box-shadow:0 30px 52px -36px rgba(18,20,23,.46); }
.plan--hot{ border-color:var(--amber); box-shadow:0 0 0 1px var(--amber) inset; }
.plan-badge{
  align-self:flex-start; font-size:var(--fs-tiny); font-weight:700; letter-spacing:.06em;
  background:var(--amber); color:#fff; padding:.3em .8em; border-radius:999px; margin-bottom:.9rem;
}
.plan h3{ font-size:1.15rem; }
.plan-desc{ margin:.4rem 0 0; font-size:.86rem; color:var(--graphite); min-height:2.6em; }
.plan-price{ margin:1.1rem 0 .2rem; display:flex; align-items:baseline; gap:.25rem; }
.plan-price .cur{ font-size:1.05rem; font-weight:700; }
.plan-price .amt{ font-family:var(--font-num); font-size:2.4rem; font-weight:800; letter-spacing:-.04em; line-height:1; }
.plan-price .per{ font-size:.82rem; color:var(--graphite); }
.plan-year{ font-size:.82rem; color:var(--graphite); }
.plan-year b{ color:var(--ink); font-family:var(--font-num); }

.plan-tiers{ margin:1.15rem 0 0; display:grid; gap:.5rem; }
.plan-tiers li{
  border:1px solid var(--line); border-radius:var(--r); padding:.7rem .85rem;
  display:grid; grid-template-columns:1fr auto; gap:.2rem .8rem; align-items:center;
  background:var(--paper); transition:border-color .2s, background-color .2s;
}
.plan-tiers li:hover{ border-color:var(--amber); background:var(--amber-soft); }
.tier-main{ display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; }
.tier-name{ font-size:.85rem; font-weight:700; }
.tier-price{ font-size:.85rem; white-space:nowrap; }
.tier-price i{ font-style:normal; color:var(--graphite); margin-right:.1rem; }
.tier-price b{ font-family:var(--font-num); font-size:1.1rem; font-weight:800; letter-spacing:-.02em; }
.tier-desc{ font-size:.74rem; color:var(--graphite); grid-column:1; }
.tier-buy{
  grid-row:1 / span 2; grid-column:2;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.42em .9em; border-radius:999px; background:var(--amber); color:#fff;
  font-size:.82rem; font-weight:700; transition:transform .2s var(--ease), background-color .2s;
}
.tier-buy:hover{ background:var(--amber-deep); transform:translateY(-1px); }

.plan-items{ margin:1.2rem 0 1.4rem; padding-top:1.1rem; border-top:1px solid var(--line); flex:1; display:flex; flex-direction:column; gap:.5rem; }
.plan li, .plan-items li{ position:relative; padding-left:1.25rem; font-size:.86rem; color:var(--ink-2); }
.plan li::before, .plan-items li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:8px; height:8px; border-radius:2px; background:var(--amber); opacity:.55;
}
.plan .btn{ width:100%; }

/* ---------- 17. 教程列表 ---------- */
.post-list{ display:flex; flex-direction:column; }
.post-item{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(1rem,2.5vw,2rem); align-items:baseline;
  padding:1.5rem 0; border-top:1px solid var(--line);
  transition:background-color .25s;
}
.post-item:last-child{ border-bottom:1px solid var(--line); }
.post-item:hover{ background:var(--paper-2); }
.post-item .post-idx{ font-family:var(--font-num); font-size:.72rem; color:var(--graphite-2); letter-spacing:.1em; }
.post-item-title{ font-size:1.06rem; font-weight:700; letter-spacing:-.015em; line-height:1.45; }
.post-item:hover .post-item-title{ color:var(--amber-deep); }
.post-item-desc{ margin:.35rem 0 0; font-size:.87rem; color:var(--graphite); max-width:44rem; }
.post-meta{ font-size:var(--fs-tiny); color:var(--graphite-2); white-space:nowrap; font-family:var(--font-num); }
@media (max-width:760px){ .post-item{ grid-template-columns:1fr; } .post-meta{ display:none; } }

/* ---------- 18. FAQ ---------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:1.1rem 2.5rem 1.1rem 0;
  font-weight:650; font-size:1rem; position:relative; transition:color .2s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:.4rem; top:50%; width:9px; height:9px;
  border-right:2px solid var(--graphite-2); border-bottom:2px solid var(--graphite-2);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(-30%) rotate(225deg); }
.faq summary:hover{ color:var(--amber-deep); }
.faq-body, .faq details .faq-body{
  padding:0 3rem 1.2rem 0; color:var(--ink-2); font-size:.94rem; max-width:var(--measure);
  animation:fadeDown .32s var(--ease);
}
@keyframes fadeDown{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* ---------- 19. 下载 ---------- */
.dl{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.2rem; border:1px solid var(--line); border-radius:var(--r);
  background:#fff; transition:border-color .25s, transform .3s var(--ease), box-shadow .3s;
}
.dl:hover{ border-color:var(--amber); transform:translateY(-2px); box-shadow:0 18px 34px -26px rgba(18,20,23,.5); }
.dl-name{ font-size:.95rem; font-weight:650; }
.dl-go{
  font-size:var(--fs-tiny); font-weight:700; color:var(--amber-deep);
  background:var(--amber-soft); padding:.4em .9em; border-radius:999px; white-space:nowrap;
}

/* ---------- 20. 文章正文 ---------- */
.prose{ max-width:var(--measure); font-size:1.03rem; line-height:1.85; color:var(--ink-2); }
.prose h2{ font-size:clamp(1.35rem,2.4vw,1.8rem); margin:3rem 0 1rem; color:var(--ink); letter-spacing:-.02em; }
.prose h3{ font-size:1.15rem; margin:2.1rem 0 .7rem; color:var(--ink); }
.prose p{ margin:0 0 1.15rem; }
.prose ul{ margin:0 0 1.3rem; }
.prose li{ position:relative; padding-left:1.35rem; margin-bottom:.55rem; }
.prose li::before{ content:""; position:absolute; left:.1rem; top:.68em; width:7px; height:7px; border-radius:2px; background:var(--amber); }
.prose strong{ color:var(--ink); font-weight:700; }
.prose blockquote{
  margin:1.6rem 0; padding:1.1rem 1.3rem; background:var(--amber-soft);
  border-radius:var(--r); color:var(--amber-deep); font-size:.98rem; line-height:1.7;
}
.breadcrumb{ font-size:var(--fs-tiny); color:var(--graphite); display:flex; gap:.45rem; align-items:center; flex-wrap:wrap; }
.breadcrumb a:hover{ color:var(--ink); }

/* ---------- 21. CTA ---------- */
.cta-band{
  border:1px solid var(--ink); border-radius:var(--r-lg);
  padding:clamp(1.9rem,4vw,3.4rem); position:relative; overflow:hidden;
  background:linear-gradient(155deg,#fff,var(--paper-2) 70%);
}
.cta-band::after{
  content:""; position:absolute; right:-8%; top:-32%; width:44%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(217,116,44,.16), transparent 66%); pointer-events:none;
}
.cta-band h2, .cta-band p, .cta-band .btn-row{ position:relative; }
.cta-band p{ margin:1rem 0 0; color:var(--ink-2); max-width:34rem; }
.cta-band .btn-row{ margin-top:1.7rem; }

/* ---------- 22. Footer ---------- */
.site-footer{ background:var(--dark); color:rgba(250,249,246,.6); padding:clamp(3rem,6vw,4.5rem) 0 2rem; font-size:.88rem; }
.site-footer a:hover{ color:var(--amber-hi); }
.footer-grid{ display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:2rem; }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:1.6rem; } }
.site-footer h5{ color:#fff; font-size:.85rem; margin:0 0 .85rem; font-weight:700; }
.site-footer ul{ display:flex; flex-direction:column; gap:.5rem; }
.site-footer li{ margin:0; }
.footer-brand .brand{ color:#fff; margin-bottom:.8rem; }
.footer-brand p{ max-width:22rem; line-height:1.7; font-size:.85rem; }
.footer-bottom{
  margin-top:clamp(2rem,4vw,3rem); padding-top:1.35rem;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.8rem;
}

.note-box{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.25rem; font-size:.92rem; color:var(--ink-2); }
.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{ left:1rem; top:.75rem; background:var(--amber); color:#fff; padding:.5rem .9rem; border-radius:8px; z-index:200; }

/* ---------- 23. 滚动进入动效 ---------- */
.reveal{ opacity:0; transform:translateY(24px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay:calc(var(--i,0) * 85ms);
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}