/* ============================================================
   自我测评合集 · 集合站样式
   风格：暖白纸感 + 墨色文字 + 陶土红点睛（水墨体系）
   ============================================================ */

:root{
  --paper:#F7F4EF;
  --card:#FFFFFF;
  --ink:#1C1A17;
  --ink-2:#4A453F;
  --ink-3:#8A8178;
  --line:#E8E2D9;
  --clay:#C4553B;
  --clay-d:#A8442F;
  --gold:#B8894A;
  --radius:18px;
  --shadow:0 2px 8px rgba(50,40,32,.05), 0 12px 32px rgba(50,40,32,.05);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
.red{color:var(--clay)}

.wrap{max-width:680px;margin:0 auto;padding:0 22px}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;background:#EFE9DF}
.hero-bg{
  position:absolute;inset:0;
  background:url("bg.png") center bottom / cover no-repeat;
  opacity:.5;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(247,244,239,.55) 0%, rgba(247,244,239,.30) 42%, rgba(247,244,239,.92) 88%, var(--paper) 100%);
}
.hero-inner{position:relative;z-index:2;max-width:680px;margin:0 auto;padding:74px 22px 56px;text-align:center}
.hero-eyebrow{
  font-size:12px;letter-spacing:.42em;color:var(--ink-3);
  text-indent:.42em;margin-bottom:22px;
}
.hero-title{
  margin:0 0 18px;
  font-family:"Songti SC","STSong","SimSun",serif;
  font-size:46px;line-height:1.24;font-weight:700;letter-spacing:.04em;
}
.hero-sub{
  margin:0 auto 32px;max-width:20em;
  font-size:15.5px;line-height:2;color:var(--ink-2);
}
.hero-cta{
  display:inline-block;padding:11px 26px;border-radius:999px;
  border:1px solid var(--clay);color:var(--clay);
  font-size:14.5px;letter-spacing:.06em;
  transition:.2s;
}
.hero-cta:hover{background:var(--clay);color:#fff}

/* ---------- 章节头 ---------- */
.sec-head{display:flex;align-items:center;gap:14px;margin:52px 0 26px}
.sec-line{flex:1;height:1px;background:var(--line)}
.sec-title{
  font-size:13px;letter-spacing:.32em;text-indent:.32em;color:var(--ink-3);
  font-family:"Songti SC","STSong","SimSun",serif;white-space:nowrap;
}

/* ---------- 卡片 ---------- */
.card{
  display:block;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px 22px;margin-bottom:16px;
  box-shadow:var(--shadow);
  transition:.22s;
  position:relative;overflow:hidden;
}
.card:hover{transform:translateY(-3px);box-shadow:0 4px 12px rgba(50,40,32,.07), 0 18px 42px rgba(50,40,32,.09)}
.card:active{transform:translateY(-1px)}
.card-idx{
  position:absolute;right:16px;top:10px;
  font-family:"Songti SC","STSong",serif;font-size:52px;
  color:#F0EBE3;line-height:1;pointer-events:none;
}
.card-body{position:relative}
.card-tag{
  display:inline-block;font-size:11.5px;letter-spacing:.16em;
  color:var(--clay);border:1px solid #EBD6D0;background:#FBF1EE;
  padding:3px 10px;border-radius:999px;margin-bottom:12px;
}
.card-name{
  margin:0 0 10px;font-size:22px;line-height:1.5;font-weight:700;letter-spacing:.01em;
}
.card-desc{margin:0 0 14px;font-size:14.5px;line-height:1.85;color:var(--ink-2)}
.card-meta{font-size:12.5px;color:var(--ink-3);letter-spacing:.02em}
.dot{margin:0 7px;opacity:.5}

.card-price{
  display:flex;align-items:baseline;gap:2px;margin-top:16px;
  padding-top:14px;border-top:1px dashed var(--line);
}
.p-cur{font-size:14px;color:var(--clay);font-weight:600}
.p-num{font-size:26px;color:var(--clay);font-weight:700;letter-spacing:-.01em}
.p-go{
  margin-left:auto;font-size:13.5px;color:var(--ink-3);
  letter-spacing:.1em;transition:.2s;
}
.card:hover .p-go{color:var(--clay)}

/* ---------- 购买流程 ---------- */
.how{background:#F2EDE5;margin-top:44px;padding:6px 0 52px}
.steps{list-style:none;margin:0;padding:0;counter-reset:none}
.steps li{
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;margin-bottom:12px;
}
.st-n{
  flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--clay);color:#fff;font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:2px;
}
.st-t{flex:none;font-size:15.5px;font-weight:700;min-width:6.5em;margin-top:1px}
.st-d{flex:1;min-width:100%;font-size:14px;line-height:1.8;color:var(--ink-2);margin-top:-2px}
.st-d b{color:var(--clay);font-weight:600}

.claim-btn{
  display:block;text-align:center;margin:26px auto 0;max-width:420px;
  background:var(--clay);color:#fff;border-radius:999px;
  padding:15px 20px;font-size:16px;font-weight:600;letter-spacing:.05em;
  box-shadow:0 6px 20px rgba(196,85,59,.26);transition:.2s;
}
.claim-btn:hover{background:var(--clay-d)}
.claim-btn:active{transform:translateY(1px)}

/* ---------- FAQ ---------- */
.faq{padding-bottom:10px}
.qa{border-top:1px solid var(--line)}
.q{
  font-size:15.5px;font-weight:700;padding:18px 0 6px;
  position:relative;padding-left:18px;
}
.q::before{
  content:"";position:absolute;left:0;top:27px;
  width:6px;height:6px;border-radius:50%;background:var(--gold);
}
.a{font-size:14.5px;line-height:1.9;color:var(--ink-2);padding:0 0 18px 18px;border-bottom:1px solid var(--line)}

/* ---------- 页脚 ---------- */
.ft{text-align:center;padding:44px 22px 56px;color:var(--ink-3)}
.seal{opacity:.78;margin-bottom:10px}
.ft-t{
  margin:0 0 6px;font-family:"Songti SC","STSong",serif;
  font-size:15px;letter-spacing:.24em;text-indent:.24em;color:var(--ink-2);
}
.ft-s{margin:0;font-size:12px;line-height:1.8}

/* ---------- 小屏 ---------- */
@media (max-width:400px){
  .hero-inner{padding:56px 20px 44px}
  .hero-title{font-size:38px}
  .card{padding:20px 18px}
  .card-name{font-size:20px}
}