:root {
  --article-ink: #082d55;
  --article-muted: #65809d;
  --article-blue: #1977ee;
  --article-teal: #25c9c7;
  --article-surface: #f4f8fc;
}

.article-shell {
  width: min(980px, calc(100% - 48px));
  margin: 0 auto;
}

.article-hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 56px;
  color: var(--article-ink);
  background:
    radial-gradient(circle at 92% 10%, rgba(43, 198, 205, .18), transparent 24%),
    radial-gradient(circle at 14% 108%, rgba(25, 119, 238, .12), transparent 30%),
    #f7fbff;
}

.article-hero::after {
  position: absolute;
  top: -210px;
  right: -180px;
  width: 540px;
  height: 540px;
  border: 1px solid rgba(30, 126, 220, .14);
  border-radius: 50%;
  box-shadow: 0 0 0 72px rgba(31, 190, 200, .035);
  content: "";
}

.article-hero .article-shell { position: relative; z-index: 1; }
.article-back { display: inline-flex; gap: 8px; align-items: center; color: #2b6da8; font-size: 14px; font-weight: 700; text-decoration: none; }
.article-kicker { margin: 30px 0 13px; color: #168d9d; font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.article-title { max-width: 875px; margin: 0; font-size: clamp(34px, 5vw, 56px); line-height: 1.18; letter-spacing: -.06em; }
.article-summary { max-width: 745px; margin: 24px 0 0; color: #557493; font-size: 18px; line-height: 1.85; }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 21px; margin-top: 25px; color: #6e88a1; font-size: 13px; }
.article-meta span { display: inline-flex; align-items: center; gap: 8px; }
.article-meta span::before { width: 5px; height: 5px; border-radius: 50%; background: var(--article-teal); content: ""; }

.article-body { padding: 60px 0 88px; background: #fff; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 228px; gap: 52px; align-items: start; }
.article-content { min-width: 0; }
.article-lead { margin: 0 0 38px; padding: 24px 26px; border-left: 3px solid var(--article-teal); border-radius: 0 14px 14px 0; background: linear-gradient(90deg, #eefbfd, #f8fbff); color: #244e74; font-size: 18px; line-height: 1.9; }
.article-section { margin-top: 45px; }
.article-section h2 { margin: 0 0 16px; color: var(--article-ink); font-size: 28px; line-height: 1.35; letter-spacing: -.04em; }
.article-section p { margin: 0 0 14px; color: #506f8d; font-size: 16px; line-height: 1.95; white-space: pre-line; }
.article-steps { display: grid; gap: 14px; margin: 24px 0 0; }
.article-step { display: grid; grid-template-columns: 38px 1fr; gap: 15px; align-items: start; padding: 19px 20px; border: 1px solid #dce9f4; border-radius: 14px; background: #fff; }
.article-step > div { min-width: 0; }
.article-step__number { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: linear-gradient(135deg, #d9f8f5, #e7efff); color: #087a91; font-size: 14px; font-weight: 800; }
.article-step h3 { margin: 0 0 5px; color: #123d66; font-size: 17px; }
.article-step p { margin: 0; color: #506f8d; font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
.article-checklist { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.article-checklist li { position: relative; padding-left: 28px; color: #3d627f; line-height: 1.75; }
.article-checklist li::before { position: absolute; top: .53em; left: 0; display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: #dcf8f5; color: #148a95; content: "✓"; font-size: 11px; font-weight: 900; }
.article-note { margin-top: 38px; padding: 21px 23px; border: 1px solid #dce9f4; border-radius: 14px; background: #f8fbfe; color: #63809b; font-size: 14px; line-height: 1.8; }

/* Long-form WeChat article migrations: content stays in the initial HTML. */
.article-visual { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 34px 0 42px; }
.article-visual > div { min-height: 126px; padding: 22px; border: 1px solid #dce9f5; border-radius: 16px; background: linear-gradient(145deg, #f8fcff, #eaf8f8); }
.article-visual b, .article-visual small { display: block; }
.article-visual b { color: #07325b; font-size: 24px; }
.article-visual small { margin-top: 10px; color: #5b7692; font-size: 14px; line-height: 1.65; }
.article-timeline { margin: 32px 0 42px; padding-left: 22px; border-left: 2px solid #35cdd1; }
.article-timeline > div { position: relative; padding: 0 0 28px 22px; }
.article-timeline > div:last-child { padding-bottom: 0; }
.article-timeline > div::before { position: absolute; left: -29px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: #1cc8c9; box-shadow: 0 0 0 6px #e7fbfb; content: ""; }
.article-timeline time { display: block; color: #0e94a4; font-weight: 800; letter-spacing: .08em; }
.article-timeline h3 { margin: 7px 0; color: #103c67; font-size: 20px; }
.article-timeline p { margin: 0; color: #52718f; line-height: 1.8; }
.article-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 30px 0 42px; }
.article-compare > section { padding: 26px; border-radius: 16px; }
.article-compare > section:first-child { background: #fff6f3; border: 1px solid #f6d9d0; }
.article-compare > section:last-child { background: #edfbfa; border: 1px solid #cdeeed; }
.article-compare h3 { margin: 0 0 12px; color: #123b64; font-size: 21px; }
.article-compare p, .article-compare li { color: #52718f; line-height: 1.8; }
.article-compare ul { margin: 0; padding-left: 20px; }
.article-risk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 30px 0 42px; }
.article-risk-grid > div { padding: 24px; border-top: 3px solid #ffab52; border-radius: 14px; background: #fbfcfe; box-shadow: 0 10px 28px rgba(13, 48, 87, .06); }
.article-risk-grid b { display: block; color: #0b426f; font-size: 19px; }
.article-risk-grid p { margin: 10px 0 0; color: #587591; line-height: 1.8; }
.article-quote { margin: 30px 0 38px; padding: 27px 30px; border-radius: 0 16px 16px 0; border-left: 4px solid #0dbac1; background: #f0fbfb; color: #175370; font-size: 19px; font-weight: 650; line-height: 1.9; }
.article-calculator { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; margin: 30px 0 42px; }
.article-calculator > div { padding: 28px; border-radius: 17px; background: #0c315b; color: #fff; }
.article-calculator > div:last-child { background: linear-gradient(145deg, #0e9fac, #0b5a87); }
.article-calculator strong { display: block; font-size: 34px; line-height: 1.1; }
.article-calculator span { display: block; margin-top: 10px; line-height: 1.8; opacity: .88; }
.article-data-chain { display: flex; align-items: stretch; gap: 10px; margin: 32px 0 42px; }
.article-data-chain > div { flex: 1; padding: 22px 16px; border-radius: 14px; background: #eff8ff; text-align: center; }
.article-data-chain b { display: block; color: #0b426f; font-size: 18px; }
.article-data-chain span { display: block; margin-top: 8px; color: #60809e; font-size: 14px; }
.article-data-chain i { align-self: center; color: #13aeb8; font-size: 23px; font-style: normal; }

.article-aside { position: sticky; top: 120px; display: flex; flex-direction: column; padding: 23px; border: 1px solid #d9e8f6; border-radius: 16px; background: linear-gradient(145deg, #f7fcff, #eef7ff); }
.article-aside p { margin: 0 0 10px; color: #0b8295; font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.article-aside h2 { margin: 0; color: var(--article-ink); font-size: 22px; line-height: 1.35; }
.article-aside span { display: block; margin: 15px 0 19px; color: #63809b; font-size: 14px; line-height: 1.75; }
.article-aside a { display: flex; box-sizing: border-box; align-self: center; align-items: center; justify-content: center; width: min(100%, 220px); margin: 24px auto 0; padding: 12px; border-radius: 9px; background: linear-gradient(135deg, #1977ee, #3a9cf4); color: #fff; font-size: 14px; font-weight: 800; text-decoration: none; }

.footer { padding: 29px 0; background: #061d38; color: #9cb4cd; font-size: 13px; }
.footer .shell { display: flex; justify-content: space-between; gap: 18px; }
.footer p { margin: 0; }

@media (max-width: 820px) {
  .article-layout { grid-template-columns: 1fr; gap: 30px; }
  .article-aside { position: static; display: grid; grid-template-columns: 1fr auto; gap: 10px 20px; align-items: center; }
  .article-aside span { grid-column: 1; margin: 0; }
  .article-aside a { grid-column: 2; grid-row: 1 / span 2; width: auto; margin: 0; padding: 12px 18px; }
}

@media (max-width: 620px) {
  .article-shell { width: min(100% - 32px, 980px); }
  .article-hero { padding: 45px 0 40px; }
  .article-kicker { margin-top: 24px; }
  .article-summary { font-size: 16px; }
  .article-body { padding: 42px 0 62px; }
  .article-lead { padding: 19px; font-size: 16px; }
  .article-section { margin-top: 34px; }
  .article-section h2 { font-size: 24px; }
  .article-aside { display: block; }
  .article-aside span { margin: 12px 0 17px; }
  .article-aside a { width: 100%; margin: 0; }
  .footer .shell { flex-direction: column; gap: 6px; }
  .article-visual, .article-compare, .article-risk-grid, .article-calculator { grid-template-columns: 1fr; }
  .article-data-chain { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-data-chain i { display: none; }
}