/* 依据用户提供的三个原站截图复刻布局；无渐变、阴影、装饰背景或额外组件。 */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --text: #090909;
  --subtext: #777777;
  --label: #9a9a9a;
  --border: #e5e5e5;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:focus-visible { outline: 2px solid #444; outline-offset: 3px; }
/* 截图：前两个区块内容区域约 976px，第三个区块约 720px。所有区块整体居中。 */
.page { width: 100%; padding: 83px 24px 105px; }
.section { max-width: 976px; margin-inline: auto; }
.section + .section { margin-top: 104px; }
.section-heading { text-align: center; margin: 0 0 33px; }
.section-heading h1, .section-heading h2 { margin: 0 0 7px; font-size: 25px; font-weight: 300; line-height: 1.38; letter-spacing: -.035em; }
.section-heading p { margin: 0; color: var(--subtext); font-size: 15px; line-height: 1.6; letter-spacing: .005em; }
.carriers-grid, .explainers-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.carrier-card, .explainer-card { min-width: 0; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
/* 卡片内文字也按用户要求居中；卡片尺寸、边框、色彩按截图设定。 */
.carrier-card { min-height: 264px; padding: 24px 23px; text-align: center; }
.carrier-name, .explainer-label { font-size: 13px; font-weight: 500; color: var(--label); line-height: 1.6; }
.carrier-name { margin: 0 0 8px; }
.carrier-route { font-size: 22px; line-height: 1.3; font-weight: 500; margin: 0 0 6px; letter-spacing: -.02em; }
.route-subtitle { font-size: 13px; color: var(--subtext); line-height: 1.6; margin: 0 0 10px; }
.asn { display: inline-block; background: #fafafa; padding: 3px 12px; border-radius: 100px; font: 400 12px/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; color: #646464; }
.carrier-description { color: var(--subtext); margin: 17px 0 0; font-size: 13px; line-height: 1.65; }
.section--explainers .section-heading { margin-bottom: 33px; }
.explainer-card { display: flex; flex-direction: column; justify-content: flex-start; padding: 24px 22px; text-align: center; min-height: 176px; text-decoration: none; transition: border-color .15s ease; }
.explainer-card:hover, .explainer-card:focus-visible { border-color: #aaa; }
.explainer-label { display: block; margin-bottom: 7px; }
.explainer-title { display: block; font-size: 20px; font-weight: 500; letter-spacing: -.025em; line-height: 1.35; margin-bottom: 14px; }
.explainer-description { display: block; margin: 0; color: var(--subtext); font-size: 13px; line-height: 1.55; }
/* 截图中的重要性区域：四格为一个整体边框，而非四张分离卡片。 */
.section--benefits { max-width: 720px; }
.section--benefits .section-heading { margin-bottom: 23px; }
.benefits-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: white; }
.benefit-card { text-align: center; padding: 25px 23px; min-height: 128px; }
.benefit-card:nth-child(odd) { border-right: 1px solid var(--border); }
.benefit-card:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
.benefit-card h3 { font-size: 15px; font-weight: 500; line-height: 1.45; margin: 0 0 10px; }
.benefit-card p { font-size: 13px; color: var(--subtext); line-height: 1.58; margin: 0; }
/* 中文说明页：与首页相同的白底、无装饰字体与边框风格。 */
.article-container { width: min(760px, calc(100% - 48px)); margin: 0 auto; padding: 55px 0 96px; }
.back-link { display: inline-block; color: var(--subtext); font-size: 13px; text-decoration: none; margin-bottom: 45px; }
.back-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.article-header { text-align: center; }
.article-header h1 { font-size: clamp(25px, 3.4vw, 34px); font-weight: 400; letter-spacing: -.02em; line-height: 1.4; margin: 0 0 13px; }
.article-date { color: var(--label); font-size: 13px; margin: 0 0 24px; }
.article-lede { font-size: 15px; color: var(--subtext); line-height: 1.9; margin: 0 0 39px; }
.guide-article section { padding-top: 7px; }
.guide-article h2 { margin: 34px 0 12px; font-size: 20px; font-weight: 500; line-height: 1.5; text-align: center; }
.guide-article p, .guide-article li { color: #535353; font-size: 14px; line-height: 1.9; }
.guide-article p { margin: 0 0 15px; }
.guide-article ul { padding-left: 24px; margin: 13px 0 23px; }
.guide-article li { padding-bottom: 5px; }
.guide-article strong { font-weight: 600; color: #222; }
.route-diagram { width: 100%; text-align: center; padding: 20px 12px; margin: 20px 0 24px; border: 1px solid var(--border); border-radius: 12px; font: 400 13px/2 var(--sans); color: #333; overflow-wrap: anywhere; }
.comparison-table-wrap { overflow-x: auto; margin: 20px 0 26px; }
.comparison-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: center; }
.comparison-table th, .comparison-table td { padding: 12px 10px; border-bottom: 1px solid var(--border); }
.comparison-table th { white-space: nowrap; font-weight: 500; }
.article-note { font-size: 12px !important; color: var(--subtext) !important; text-align: center; }
.article-end { text-align: center; border-top: 1px solid var(--border); margin-top: 48px; padding-top: 22px; }
.article-end p { font-size: 13px; }
.article-end a { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) {
  .page { padding: 51px 18px 70px; }
  .section + .section { margin-top: 76px; }
  .section-heading { margin-bottom: 24px; }
  .section-heading h1, .section-heading h2 { font-size: 23px; }
  .section-heading p { font-size: 14px; }
  .carriers-grid, .explainers-grid { grid-template-columns: 1fr; gap: 14px; max-width: 470px; margin: 0 auto; }
  .carrier-card { min-height: 0; padding: 24px 22px; }
  .explainer-card { min-height: 0; padding: 24px 20px; }
  .section--benefits { max-width: 470px; }
  .benefit-card { padding: 22px 14px; }
  .article-container { width: calc(100% - 36px); padding: 30px 0 70px; }
  .back-link { margin-bottom: 35px; }
}
@media (max-width: 440px) {
  .benefits-grid { grid-template-columns: 1fr; }
  .benefit-card:nth-child(odd) { border-right: 0; }
  .benefit-card:not(:last-child) { border-bottom: 1px solid var(--border); }
  .benefit-card { min-height: 0; }
  .comparison-table { min-width: 420px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .explainer-card { transition: none; } }