/* Site 2: dark bar, gold on paper, left-right hero, timeline */
:root {
  --bar: #1a1a1a;
  --gold: #c9a227;
  --paper: #f7f3e9;
  --ink: #2a2416;
  --soft: #5c5343;
  --card: #fffdf7;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Georgia, "Songti SC", "SimSun", "Microsoft YaHei", serif;
  line-height: 1.8;
}

.mast {
  background: var(--bar);
  color: #f3ead2;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 0 5vw;
  min-height: 64px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  font-weight: 700;
  color: #fff;
  padding: 14px 0;
}
.links {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 14px;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
}
.links a { color: #e8d9a0; text-decoration: none; }
.links a:hover { color: var(--gold); }

.hero-split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  padding: 64px 5vw 40px;
  align-items: center;
}
.hero-split h1 {
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.35;
  margin: 0 0 16px;
}
.hero-split p { margin: 0 0 12px; color: var(--soft); }

.window {
  background: #2b2b2b;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 8px 10px 0 #d8c48a;
  min-height: 260px;
}
.window-bar {
  height: 28px;
  background: #111;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
}
.dot { width: 10px; height: 10px; border-radius: 50%; background: #555; }
.dot:nth-child(2) { background: var(--gold); }
.window-body { padding: 16px; }
.bubble {
  max-width: 80%;
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
}
.bubble.in { background: #3a3a3a; color: #eee; }
.bubble.out {
  background: #4a3d16;
  color: #f6e7b2;
  margin-left: auto;
}

.sheet { padding: 28px 5vw 8px; }
h2 {
  font-size: 24px;
  margin: 0 0 8px;
  border-bottom: 2px solid var(--gold);
  display: inline-block;
  padding-bottom: 4px;
}
.intro { color: var(--soft); max-width: 740px; margin: 8px 0 24px; }

.pain-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.pain {
  background: var(--card);
  border-left: 8px solid var(--gold);
  padding: 20px 22px;
  box-shadow: 0 1px 0 #e6dcbd;
}
.pain h3 { margin: 0 0 8px; font-size: 18px; }
.pain p { margin: 0 0 8px; color: var(--soft); }

.solve-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.solve {
  background: var(--bar);
  color: #f4ecd4;
  padding: 22px 18px 20px;
}
.solve svg { display: block; margin-bottom: 12px; }
.solve h3 { margin: 0 0 8px; color: var(--gold); font-size: 17px; }
.solve p { margin: 0 0 8px; font-size: 15px; }

.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 28px;
  border-left: 3px solid var(--gold);
}
.timeline li {
  position: relative;
  padding: 0 0 28px 22px;
}
.timeline li::before {
  content: attr(data-n);
  position: absolute;
  left: -42px;
  top: 0;
  width: 28px;
  height: 28px;
  background: var(--bar);
  color: var(--gold);
  border-radius: 2px;
  display: grid;
  place-items: center;
  font-family: "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 700;
}
.timeline h3 { margin: 0 0 6px; }
.timeline p { margin: 0 0 8px; color: var(--soft); }

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid #e0d4b0;
}
.duo > div { padding: 24px; }
.duo .yes { background: #fff; }
.duo .no { background: #efe6cc; }
.duo h3 { margin-top: 0; }

.stack { margin: 36px 0; }
.note-list { margin: 0; padding-left: 20px; color: var(--soft); }
.note-list li { margin-bottom: 10px; }

.faq-dl { margin: 0; }
.faq-dl dt {
  background: var(--bar);
  color: var(--gold);
  padding: 12px 16px;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  font-weight: 650;
}
.faq-dl dd {
  margin: 0 0 12px;
  padding: 14px 16px 16px;
  background: var(--card);
  border: 1px solid #eadfb8;
  border-top: 0;
  color: var(--soft);
}

.site-end {
  background: var(--bar);
  color: #d8d0b8;
  padding: 32px 5vw;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 14px;
}
.site-end h2 { color: #fff; border: 0; font-size: 15px; display: block; }
.site-end p { margin: 0 0 10px; max-width: 860px; }

@media (max-width: 900px) {
  .hero-split, .pain-2, .solve-3, .duo { grid-template-columns: 1fr; }
  .mast { grid-template-columns: 1fr; padding-bottom: 10px; }
  .links { justify-content: flex-start; }
}