/* WhatsApp 网页版界面沟通 — mobile-first stacked */
:root {
  --cream: #FFF8F0;
  --orange: #FF6B35;
  --teal: #1B998B;
  --navy: #2D3047;
  --ink: #2a2c3d;
  --white: #ffffff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Trebuchet MS", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.75;
}

.shell { width: min(800px, calc(100% - 24px)); margin: 0 auto; }

.sticky {
  position: sticky;
  top: 0;
  z-index: 12;
  background: rgba(255, 248, 240, 0.96);
  border-bottom: 2px solid #f0e0cc;
}
.sticky-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  gap: 10px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--navy);
  font-weight: 800;
}
.brand-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--orange);
  display: grid;
  place-items: center;
}
.brand-dot svg { width: 16px; height: 16px; fill: #fff; }
.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 10px;
}
.nav a {
  color: var(--teal);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
}

.hero { padding: 22px 0 8px; }
h1 {
  font-size: 30px;
  line-height: 1.3;
  color: var(--navy);
  margin: 10px 0 12px;
}
.hero p { margin-bottom: 10px; }
.tap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--orange);
  color: #fff !important;
  text-decoration: none;
  font-weight: 800;
  font-size: 18px;
  padding: 16px 18px;
  border-radius: 16px;
  margin: 16px 0 10px;
  box-shadow: 0 8px 0 #d45224;
}
.mini-stack { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.mini {
  background: #fff;
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 6px 16px rgba(45, 48, 71, 0.06);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.mini i {
  flex: 0 0 42px;
  height: 42px;
  border-radius: 12px;
  background: #ffe8de;
  display: grid;
  place-items: center;
}
.mini i svg { width: 22px; height: 22px; fill: var(--orange); }
.mini strong { display: block; color: var(--navy); }

section { padding: 28px 0; }
h2 {
  font-size: 24px;
  color: var(--navy);
  margin-bottom: 10px;
}
h3 { font-size: 17px; color: var(--teal); margin-bottom: 6px; }

.numbar {
  display: flex;
  background: var(--navy);
  color: #fff;
  border-radius: 16px;
  overflow: hidden;
}
.numbar article {
  flex: 1;
  padding: 14px 10px;
  font-size: 13px;
}
.numbar b {
  display: block;
  color: #ffd0bf;
  margin-bottom: 4px;
}

.row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 6px 14px rgba(45, 48, 71, 0.05);
}
.row .ico {
  flex: 0 0 48px;
  height: 48px;
  border-radius: 14px;
  background: #dff4f1;
  display: grid;
  place-items: center;
}
.row .ico svg { width: 24px; height: 24px; fill: var(--teal); }

.stack-card {
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 12px;
  border-left: 6px solid var(--orange);
}
.stack-card.alt { border-left-color: var(--teal); }
.stack-card.navy { border-left-color: var(--navy); }

.limit {
  background: #fff1e8;
  border-radius: 16px;
  padding: 16px;
  margin-top: 8px;
}
.limit ul { margin-left: 18px; }

.browsers .row { align-items: center; }

details {
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  border: 1px solid #f0e0cc;
}
summary { cursor: pointer; font-weight: 800; color: var(--navy); }
details p { margin-top: 8px; }

.footer {
  background: var(--navy);
  color: #ece7df;
  padding: 26px 0;
  margin-top: 10px;
  font-size: 14px;
}
.footer p { margin-bottom: 8px; width: min(800px, calc(100% - 24px)); margin-left: auto; margin-right: auto; }
.footer .name { color: #ffd0bf; font-weight: 800; }

@media (max-width: 640px) {
  .nav { display: none; }
  h1 { font-size: 26px; }
  .numbar { flex-direction: column; }
}

.news-m { padding: 8px 0 28px; }
.news-stack-m { list-style: none; display: grid; gap: 12px; }
.news-stack-m li { background: #fff; border-radius: 16px; padding: 16px; border: 1px solid #ffd0bf; }
.news-stack-m time { color: #ff6b35; font-size: 12px; font-weight: 700; }
.news-stack-m h3 { margin: 6px 0 8px; font-size: 17px; }