/* =========================================================
   main.css (DEDUPED FULL VERSION)
   - No duplicate selectors
   - Stable homepage + datacenter list filters
   - Consistent chips/buttons/prose width
========================================================= */

/* =====================================
   TOKENS / BASE
===================================== */

:root{
  --bg:#f6f7f9;
  --paper:#ffffff;
  --ink:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;

  --brand:#2563eb;
  --brandDark:#1e40af;

  --radius:14px;
  --shadow:0 8px 22px rgba(0,0,0,.06);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont;
  margin:0;
  background:var(--bg);
  color:var(--ink);
  line-height:1.65;
}

a{ color:inherit; }

.muted{ color:var(--muted); }

:where(:not(pre) > code){
  background:#eef2ff;
  border:1px solid #e0e7ff;
  padding:2px 6px;
  border-radius:8px;
  font-size:.92em;
}

/* Code blocks (Hugo Chroma) */
.highlight{ margin:14px 0 18px; }
.highlight pre{
  margin:0;
  padding:14px 16px;
  border-radius:12px;
  overflow:auto;
  text-align:left;
  direction:ltr;
  unicode-bidi:plaintext;
}
.highlight pre code{
  background:transparent;
  border:0;
  padding:0;
  border-radius:0;
  font-size:inherit;
}
@media (max-width: 720px){
  .highlight pre{ white-space:pre-wrap; overflow-wrap:anywhere; }
}

.container{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}

/* =====================================
   HEADER / FOOTER
===================================== */

.site-header{
  position:sticky;
  top:0;
  background:rgba(246,247,249,.82);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
  z-index:20;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:16px;
}

.logo{
  font-weight:800;
  text-decoration:none;
  letter-spacing:.2px;
}

.nav{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.nav a{
  text-decoration:none;
  color:rgba(17,24,39,.78);
  font-weight:600;
  font-size:14px;
}
.nav a:hover{ color:rgba(17,24,39,1); }

.main{ min-height:70vh; }

.site-footer{
  border-top:1px solid var(--line);
  margin-top:40px;
  padding:26px 0;
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}

/* =====================================
   SECTION STRUCTURE
===================================== */

section{ padding:32px 0; }
section h2{ margin:0 0 18px; font-size:24px; }

.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.section-head .muted{ max-width:680px; }

.section-foot{ margin-top:12px; }
.section-foot a{
  color:var(--brand);
  text-decoration:none;
  font-weight:700;
}
.section-foot a:hover{ text-decoration:underline; }

/* =====================================
   HERO
===================================== */

.hero{
  padding:70px 0 26px;
  text-align:left;
}

.hero--compact{
  padding:40px 0 18px;
}

.hero h1{
  font-size:36px;
  margin:0 0 14px;
  max-width:900px;
  line-height:1.2;
}

.hero p{
  font-size:17px;
  color:rgba(17,24,39,.74);
  max-width:820px;
  margin:0 0 14px;
}

.hero-brands{
  font-size:14px;
  color:var(--muted);
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Steps */
.hero-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:18px;
}

.step{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.step-k{
  width:28px;
  height:28px;
  border-radius:10px;
  background:#f3f4f6;
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
}

.step-t strong{ display:block; margin-bottom:2px; }

.hero-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}

/* =====================================
   GRIDS
===================================== */

.recommend-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:20px;
}

.home-top-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  margin-top:10px;
}

/* =====================================
   CARD
===================================== */

.card{
  background:var(--paper);
  padding:24px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  transition:all .2s ease;
}

.card:hover{
  box-shadow:var(--shadow);
  transform:translateY(-2px);
}

.card h2,
.card h3{
  margin:0 0 10px;
  font-size:18px;
}

.card h3 a{ text-decoration:none; }
.card h3 a:hover{ text-decoration:underline; }

.card p{
  margin:8px 0 12px;
  font-size:14.5px;
  color:rgba(17,24,39,.72);
}

/* =====================================
   META / CHIPS
===================================== */

.meta-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:8px 0 14px;
}

.chip{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#f9fafb;
  font-size:12px;
  color:rgba(17,24,39,.78);
}

.chip--muted{
  color:var(--muted);
  background:#f9fafb;
}

.chip--china{
  border-color:#f59e0b;
  background:#fff7ed;
  color:#92400e;
}

.chip--score{
  border-color:#dbeafe;
  background:#eff6ff;
  color:#1d4ed8;
}

/* =====================================
   LIST
===================================== */

.mini-list{
  margin:10px 0 14px;
  padding-left:18px;
}
.mini-list li{ margin-bottom:6px; }
.mini-list a{
  text-decoration:none;
  color:var(--brand);
  font-weight:700;
}
.mini-list a:hover{ text-decoration:underline; }

/* =====================================
   BUTTONS
===================================== */

.btn-primary{
  display:inline-block;
  padding:10px 16px;
  background:var(--brand);
  color:#fff !important;
  border-radius:10px;
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  transition:background .2s ease;
}
.btn-primary:hover{
  background:var(--brandDark);
  color:#fff !important;
}
.btn-primary *{ color:#fff !important; }

.btn-secondary{
  display:inline-block;
  padding:10px 16px;
  background:#fff;
  color:rgba(17,24,39,.86);
  border-radius:10px;
  border:1px solid var(--line);
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  transition:all .2s ease;
}
.btn-secondary:hover{
  box-shadow:var(--shadow);
  transform:translateY(-1px);
}

/* small variants */
.btn-primary--sm{ padding:9px 12px; font-size:13px; border-radius:10px; }
.btn-secondary--sm{ padding:9px 12px; font-size:13px; border-radius:10px; }

/* Hero CTA colored secondary buttons (opt-in by extra class) */
.hero-cta .btn-secondary{
  border:0;
  color:#fff;
  box-shadow:0 10px 22px rgba(17,24,39,.10);
}
.hero-cta .btn-secondary:hover{
  transform:translateY(-1px);
}
.hero-cta .btn-secondary.btn-provider{ background:#7C3AED; }   /* violet */
.hero-cta .btn-secondary.btn-provider:hover{ background:#6D28D9; }

.hero-cta .btn-secondary.btn-dc{ background:#E11D48; }         /* rose/朱红 */
.hero-cta .btn-secondary.btn-dc:hover{ background:#BE123C; }

.hero-cta .btn-secondary:focus-visible{
  outline:3px solid rgba(59,130,246,.35);
  outline-offset:2px;
}

/* =====================================
   TABLE
===================================== */

.compare-table{
  width:100%;
  border-collapse:collapse;
  background:var(--paper);
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
}

.compare-table th{
  background:#f9fafb;
  font-weight:800;
  font-size:14px;
  padding:12px;
  text-align:left;
}

.compare-table td{
  padding:12px;
  border-top:1px solid #eee;
  font-size:14px;
}

.compare-table a{
  color:var(--brand);
  text-decoration:none;
  font-weight:800;
}
.compare-table a:hover{ text-decoration:underline; }

/* =====================================
   PROSE / PAGES
===================================== */

.page{ padding:36px 0; }

.prose{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px;
  max-width:1070px;
  margin:0 auto;
}

.prose h1,.prose h2,.prose h3{ word-break:break-word; }
.prose h2{ margin-top:26px; }
.prose p{ margin:12px 0; }

.prose ul{ margin:10px 0 18px 18px; }
.prose table{
  display:block;
  overflow-x:auto;
  white-space:nowrap;
}

/* =====================================
   PROVIDER NAV PILLS (optional)
===================================== */

.hero-provider-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:14px 0 8px;
}

.provider-pill{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.7);
  color:var(--ink);
  font-size:14px;
  line-height:1;
  text-decoration:none;
}

.provider-pill:hover{
  border-color:rgba(37,99,235,.35);
  background:#fff;
}

.pill-all{
  background:#FDE68A;                 /* amber-200 */
  border-color:#F59E0B;               /* amber-500 */
  color:#111827;
  font-weight:800;
  box-shadow:0 8px 18px rgba(245,158,11,.22);
}
.pill-all:hover{
  background:#FCD34D;                 /* amber-300 */
  border-color:#D97706;               /* amber-600 */
  transform:translateY(-1px);
}
.pill-all:focus-visible{
  outline:3px solid rgba(245,158,11,.35);
  outline-offset:2px;
}

/* Mobile: horizontal scroll for pills */
@media (max-width: 720px){
  .hero-provider-nav{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
  }
  .provider-pill{ white-space:nowrap; }
}

/* =====================================
   DATACENTER LIST: FILTER BAR + GRID
===================================== */

.filterbar{
  margin-top:18px;
  display:grid;
  grid-template-columns: 180px 180px 180px 1fr auto;
  gap:12px;
  align-items:end;
  padding:14px;
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:14px;
}

.filter-item{ min-width:0; }

.filter-label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin:0 0 6px;
}

.filter-select,
.filter-input{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  border-radius:10px;
  padding:10px 12px;
  font-size:14px;
  outline:none;
}

.filter-select:focus,
.filter-input:focus{
  border-color:rgba(37,99,235,.45);
  box-shadow:0 0 0 4px rgba(37,99,235,.10);
}

.filter-item--check{
  display:flex;
  align-items:center;
  padding-bottom:2px;
}

.check{
  display:flex;
  gap:10px;
  align-items:center;
  user-select:none;
  font-size:14px;
  color:var(--ink);
}
.check input{ width:16px; height:16px; }

.filter-item--meta{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:flex-end;
  padding-bottom:2px;
  white-space:nowrap;
}

.filter-count{
  font-size:13px;
  color:var(--muted);
}

/* Make Reset button dark ONLY inside filterbar */
.filterbar .btn-secondary{
  background:#111827;
  color:#fff;
  border-color:#111827;
  font-weight:800;
}
.filterbar .btn-secondary:hover{
  opacity:.92;
  transform:none;
  box-shadow:none;
}

/* Datacenter grid */
.dc-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
  margin-top:10px;
}

.dc-card{
  display:flex;
  flex-direction:column;
  min-height:220px; /* prevents "collapsed looking" cards */
}

.dc-card .dc-title{
  margin:0 0 10px;
  font-size:16px;
  line-height:1.35;
}

.dc-card .dc-title a{
  color:inherit;
  text-decoration:none;
}
.dc-card .dc-title a:hover{ text-decoration:underline; }

.dc-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}

.dc-summary{
  margin:0 0 12px;
  color:rgba(17,24,39,.74);
  font-size:14px;
}

.dc-foot{
  margin-top:auto;
  display:flex;
  justify-content:flex-end;
}

/* =====================================
   RESPONSIVE
===================================== */

@media (max-width: 1000px){
  .recommend-grid{ grid-template-columns:1fr; }
  .home-top-grid{ grid-template-columns:1fr; }
  .hero-steps{ grid-template-columns:1fr; }

  .filterbar{ grid-template-columns: 1fr 1fr; }
  .filter-item--meta{
    grid-column:1 / -1;
    justify-content:space-between;
  }
  .dc-grid{ grid-template-columns:1fr; }
}

@media (max-width: 600px){
  .hero{ padding:44px 0 18px; }
  .hero h1{ font-size:28px; }
  section{ padding:24px 0; }
}

/* ===== Hero CTA: blue / purple / red (order: blue → purple → red) ===== */
.hero-cta .btn-secondary{
  border:0;
  color:#fff;
  font-weight:800;
  box-shadow:0 10px 22px rgba(17,24,39,.10);
}

.hero-cta .btn-secondary.btn-blue{
  background:#2563eb;                 /* blue */
}
.hero-cta .btn-secondary.btn-blue:hover{
  background:#1d4ed8;
  transform:translateY(-1px);
}

.hero-cta .btn-secondary.btn-purple{
  background:#7C3AED;                 /* purple */
}
.hero-cta .btn-secondary.btn-purple:hover{
  background:#6D28D9;
  transform:translateY(-1px);
}

.hero-cta .btn-secondary.btn-red{
  background:#E11D48;                 /* zhuhong / rose */
}
.hero-cta .btn-secondary.btn-red:hover{
  background:#BE123C;
  transform:translateY(-1px);
}

/* =========================
   REGION LIST (/region/)
========================= */
.region-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:10px;
}

.region-card .region-title{
  margin:0 0 10px;
  font-size:18px;
  line-height:1.25;
}
.region-card .region-title a{ text-decoration:none; }
.region-card .region-title a:hover{ text-decoration:underline; }

.region-cities{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin:-4px 0 10px;
}
.city-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#f9fafb;
  font-size:12px;
  color:rgba(17,24,39,.76);
}

.region-summary{
  margin:8px 0 10px;
  font-size:14.5px;
  color:rgba(17,24,39,.72);
}

.region-foot{
  display:flex;
  justify-content:flex-end;
  margin-top:10px;
}

@media (max-width: 1000px){
  .region-grid{ grid-template-columns:1fr; }
}

/* ===== VS filterbar layout (provider + search + meta) ===== */
.filterbar--vs{
  grid-template-columns: 220px 1fr auto;
}

@media (max-width: 1000px){
  .filterbar--vs{
    grid-template-columns: 1fr 1fr;
  }
  .filterbar--vs .filter-item--meta{
    grid-column: 1 / -1;
    justify-content: space-between;
  }
}

/* =========================
   Filterbar polish (VS / Datacenter / etc.)
   Goal: remove large right whitespace
========================= */
.filterbar{
  display:flex;
  align-items:flex-end;
  gap:14px;
  flex-wrap:wrap;
  width:100%;
}

/* Provider / Region 等保持紧凑 */
.filter-item{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:160px;
}

/* 让 Search 吃掉剩余空间 */
.filter-item--search{
  flex: 1 1 520px;     /* 核心：可伸展 */
  min-width:260px;     /* 防止太窄 */
}

/* 让右侧 meta（results + reset）贴到最右边 */
.filter-item--meta{
  margin-left:auto;    /* 核心：把它推到最右 */
  min-width:220px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
}

/* 输入框/下拉宽度自然撑满所在格子 */
.filter-select,
.filter-input{
  width:100%;
}

/* 小屏更舒服 */
@media (max-width: 860px){
  .filter-item{ min-width: 180px; }
  .filter-item--meta{ margin-left:0; width:100%; justify-content:space-between; }
  .filter-item--search{ flex: 1 1 100%; }
}

/* ================= Provider Hub Strip ================= */

.provider-hub {
  margin-top: 28px;
  text-align: center;
}

.provider-hub-title {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.provider-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.provider-pills a {
  padding: 8px 16px;
  border-radius: 999px;
  background: #f1f5f9;
  font-size: 14px;
  text-decoration: none;
  color: #111827;
  transition: 0.2s ease;
  border: 1px solid #e5e7eb;
}

.provider-pills a:hover {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

.provider-pills .pill-all {
  background: #fde68a;
  font-weight: 600;
  border-color: #facc15;
}

.provider-sub-links {
  margin-top: 14px;
  font-size: 13px;
}

.provider-sub-links a {
  margin: 0 10px;
  color: #2563eb;
  text-decoration: none;
}

.provider-sub-links a:hover {
  text-decoration: underline;
}

.hero-desc {
  font-size: 17px;
  color: #4b5563;
  margin-bottom: 14px;
}

.hero-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 14px;
  color: #6b7280;
}

.hero-bullets li::before {
  content: "•";
  margin-right: 6px;
  color: #2563eb;
}

.china-entry {
  font-weight: 600;
  color: #2563eb;
}

/* --- Affiliate card (compact) --- */
.aff-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:18px 0 14px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.75);
}
.aff-copy{
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}
.aff-copy strong{ color:var(--ink); }
.aff-inline-link{
  margin-left:8px;
  font-weight:600;
  white-space:nowrap;
}
.aff-action{ flex:0 0 auto; }

/* small button */
.btn-primary--sm{
  padding:10px 12px;
  border-radius:12px;
  font-size:14px;
}

/* --- Starter Picks card --- */
.starter-picks{
  margin:10px 0 22px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.75);
}
.starter-picks > summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-weight:700;
}
.starter-picks > summary::-webkit-details-marker{ display:none; }
.sp-updated{ font-weight:500; margin-left:6px; }
.sp-note{ margin:10px 0 12px; font-size:14px; }

/* --- Table: keep cells clean + allow horizontal scroll like homepage --- */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:14px;
}
.table-wrap::-webkit-scrollbar{ height:8px; }
.table-wrap::-webkit-scrollbar-thumb{
  background:rgba(17,24,39,.18);
  border-radius:999px;
}
.table-wrap::-webkit-scrollbar-track{
  background:rgba(17,24,39,.06);
  border-radius:999px;
}

.mini-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:980px; /* 关键：避免挤到一起 */
}
.mini-table th,
.mini-table td{
  padding:12px 12px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
  white-space:nowrap; /* 关键：不乱换行 */
}
.mini-table thead th{
  font-size:13px;
  color:var(--muted);
  font-weight:700;
}
.mini-table tbody tr:last-child td{ border-bottom:none; }

/* allow Best for wrap */
.mini-table td.td-bestfor{
  white-space:normal;
  min-width:240px;
  line-height:1.55;
}

/* mobile: stack CTA under text */
@media (max-width: 720px){
  .aff-card{ flex-direction:column; align-items:flex-start; }
  .aff-inline-link{ display:inline-block; margin-left:0; margin-top:6px; }
}

/* ===== Compact affiliate bar ===== */
.aff-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:18px 0 14px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.75);
}
.aff-bar__text{
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
}
.aff-bar__text strong{ color:var(--ink); }
.aff-bar__link{
  margin-left:8px;
  font-weight:600;
  white-space:nowrap;
}
.prose .btn-primary.btn-primary--sm{
  padding:10px 12px;
  border-radius:12px;
  font-size:14px;
  line-height:1;
  white-space:nowrap;
}

/* ===== Starter Picks card ===== */
.sp-card{
  margin:10px 0 22px;
  padding:14px 14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.75);
}
.sp-card__title{
  font-weight:800;
  font-size:16px;
  margin-bottom:6px;
}
.sp-card__note{ font-size:14px; }

/* grid cards */
.sp-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
.sp-item{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 12px;
  background:rgba(255,255,255,.85);
}
.sp-item__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.sp-item__name{
  font-weight:800;
  color:var(--ink);
}
.sp-item__price{
  font-weight:900;
  color:var(--ink);
  white-space:nowrap;
}
.sp-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:8px;
}
.sp-chip{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:13px;
  color:var(--muted);
  background:rgba(17,24,39,.03);
}
.sp-item__bestfor{
  font-size:14px;
  line-height:1.6;
}

/* responsive */
@media (max-width: 860px){
  .sp-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .aff-bar{ flex-direction:column; align-items:flex-start; }
  .aff-bar__link{ display:inline-block; margin-left:0; margin-top:6px; }
}
/* =========================
   Starter Picks (3-col rows) — POLISH OVERRIDE
   Paste at END of main.css
========================= */

.pricing-stack{ margin-top: 8px; }
.pricing-row{ margin-top: 14px; }

/* wrapper */
.sp-compare{
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.78);
  overflow:hidden;
}

/* head */
.sp-compare__head{
  padding:14px 16px 10px;
  border-bottom:1px solid var(--line);
}
.sp-compare__title{
  font-weight:800;
  font-size:18px;   /* 原来太大，压到更协调 */
  line-height:1.25;
}
.sp-compare__note{
  margin-top:6px;
  font-size:14px;
  line-height:1.55;
}

/* IMPORTANT: override global .prose table rule only for this table */
.prose table.sp-table{
  display:table;
  overflow:visible;
  white-space:normal;
  width:100%;
}

/* table */
.sp-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.sp-table tr + tr td{ border-top:1px solid var(--line); }

.sp-table td{
  padding:14px 16px;     /* 更紧凑 */
  vertical-align:middle;
  font-size:14.5px;      /* 主字号 */
  line-height:1.55;
  color:var(--ink);
}

/* columns */
.sp-col--name{
  width:34%;
  font-weight:800;
  font-size:15.5px;      /* 名称稍突出，但不抢戏 */
}
.sp-col--price{
  width:22%;
  text-align:right;
  font-weight:800;
  font-size:15.5px;
  white-space:nowrap;
}
.sp-col--best{
  width:44%;
  font-size:14px;
  color:rgba(17,24,39,.70);
}

/* small screens: wrap better */
@media (max-width: 860px){
  .sp-table td{ padding:12px 12px; }
  .sp-col--name{ width:38%; }
  .sp-col--price{ width:24%; }
  .sp-col--best{ width:38%; }
}

@media (max-width: 640px){
  /* 手机上避免第三列挤爆：让 best 自动换行、字号更小一点 */
  .sp-col--best{ font-size:13.5px; }
}
/* =========================
   Pricing compare cards (homepage style)
========================= */
.pc{ margin:14px 0 22px; }
.pc-title{ font-weight:900; font-size:16px; margin:0 0 6px; }
.pc-note{ font-size:13px; margin:0 0 10px; }

.pc-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.pcard{
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.85);
  padding:14px;
}

.pcard-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.pcard-name{ font-weight:900; font-size:14px; }
.pcard-link{
  font-weight:800;
  color:var(--brand);
  text-decoration:none;
  font-size:13px;
}
.pcard-link:hover{ text-decoration:underline; }

.pline{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding:8px 0;
  border-top:1px dashed rgba(17,24,39,.12);
}
.pline:first-child{ border-top:0; padding-top:0; }

.pline-k{ color:var(--muted); font-size:13px; }
.pline-v{ font-weight:900; font-size:13.5px; color:var(--ink); }

@media (max-width:1000px){
  .pc-grid{ grid-template-columns:1fr; }
}
/* =========================
   Pricing stack layout
========================= */
.pricing-stack{ display:flex; flex-direction:column; gap:12px; }
.pricing-row{ margin:0; }

/* =========================
   Starter Picks: make it smaller & tighter
========================= */
.sp-card{
  padding:14px;
  border-radius:16px;
}
.sp-card__title{
  font-size:15px;
  font-weight:900;
  margin-bottom:4px;
}
.sp-card__note{ font-size:13px; }

.sp-grid{ gap:10px; margin-top:10px; }

.sp-item{
  padding:12px;
  border-radius:14px;
}

.sp-item__name{ font-size:14px; font-weight:900; }
.sp-item__price{ font-size:14px; font-weight:900; }

.sp-chip{
  font-size:12px;
  padding:5px 9px;
}

.sp-item__bestfor{
  font-size:13px;
  line-height:1.55;
}

/* =========================
   Authority Tables (Global)
   Works with plain Markdown tables
========================= */

.prose table,
article table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--paper, #fff);
  border: 1px solid var(--line, rgba(17,24,39,.10));
  border-radius: var(--radius, 16px);
  box-shadow: var(--shadow, 0 12px 30px rgba(17,24,39,.08));
  overflow: hidden;

  /* mobile scroll without wrapper */
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.prose table thead th,
article table thead th {
  background: rgba(17,24,39,.04);
  color: var(--muted, rgba(17,24,39,.62));
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line, rgba(17,24,39,.10));
  white-space: nowrap;
}

.prose table tbody td,
article table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line, rgba(17,24,39,.10));
  vertical-align: top;
}

.prose table tbody tr:last-child td,
article table tbody tr:last-child td {
  border-bottom: 0;
}

/* zebra, reduce fatigue */
.prose table tbody tr:nth-child(even) td,
article table tbody tr:nth-child(even) td {
  background: rgba(17,24,39,.02);
}

/* emphasize first column (Feature/Category/Scenario) */
.prose table tbody td:first-child,
article table tbody td:first-child {
  font-weight: 700;
  color: var(--ink, #111827);
  white-space: nowrap;
}

/* numeric columns look cleaner */
.prose table td:last-child,
.prose table th:last-child,
article table td:last-child,
article table th:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* nicer spacing around tables */
.prose table,
article table {
  margin: 16px 0 26px;
}

/* optional: make links inside tables look like CTAs */
.prose table a,
article table a {
  text-decoration: none;
  border-bottom: 1px solid rgba(37,99,235,.35);
}
/* =========================================================
   REVIEW PAGE TABLE FIX (OVERRIDE)
   - Fix block table collapse
   - Remove ugly right blank space
   - Add real card feeling
========================================================= */

/* 1️⃣ 恢复 table 正常 display */
.prose table {
  display: table !important;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  white-space: normal;
}

/* 2️⃣ 统一 Review 表格卡片风格 */
.prose table {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.05);
  margin: 18px 0 28px;
}

/* 3️⃣ 表头 */
.prose table thead th {
  background: #f3f4f6;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  padding: 14px 16px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

/* 4️⃣ 表体 */
.prose table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}

.prose table tbody tr:last-child td {
  border-bottom: none;
}

/* 5️⃣ 斑马线（减少视觉疲劳） */
.prose table tbody tr:nth-child(even) td {
  background: rgba(17,24,39,.02);
}

/* 6️⃣ 第一列更有权重 */
.prose table tbody td:first-child {
  font-weight: 800;
  white-space: nowrap;
}

/* 7️⃣ 数字列右对齐 */
.prose table td:last-child,
.prose table th:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 8️⃣ 小屏滚动修复 */
@media (max-width: 860px){
  .prose table {
    display: block !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* =========================================================
   REVIEW TABLE HIERARCHY SYSTEM
   - Different visual weight by purpose
========================================================= */

/* ================================
   1️⃣ 概览表（最重要）
   用于：Alibaba 概览 (2026)
================================ */

.prose h2 + table {
  border: 2px solid #e5e7eb;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(0,0,0,.06);
}

.prose h2 + table thead th {
  background: #f9fafb;
  font-size: 13px;
  letter-spacing: .05em;
}

.prose h2 + table tbody td:first-child {
  font-weight: 900;
}

/* ================================
   2️⃣ VS 对比表（强调当前列）
================================ */

.prose table th:nth-child(2),
.prose table td:nth-child(2) {
  background: rgba(37,99,235,.04);
}

.prose table th:nth-child(2) {
  font-weight: 900;
}

/* ================================
   3️⃣ 评分表（让分数变成视觉焦点）
================================ */

.prose table td:last-child {
  font-weight: 900;
}

.prose table td:last-child::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #2563eb;
  border-radius: 50%;
  margin-right: 6px;
}

/* ================================
   4️⃣ 统一优化（减少灰色疲劳）
================================ */

.prose table {
  border-radius: 18px;
  overflow: hidden;
}

.prose table tbody tr:nth-child(even) td {
  background: rgba(17,24,39,.015);
}

.prose table tbody td {
  padding: 16px 18px;
  font-size: 15px;
}
/* =========================================================
   CLEAN REVIEW TABLE SYSTEM (FINAL)
   - Single source of truth
   - No duplicate overrides
   - Stable layout
========================================================= */

/* Base table card */
.prose table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 10px 26px rgba(0,0,0,.05);
  margin:20px 0 32px;
  overflow:hidden;
}

/* Head */
.prose table thead th{
  background:#f8fafc;
  padding:14px 16px;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}

/* Body cells */
.prose table tbody td{
  padding:14px 16px;
  font-size:14.5px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
}

.prose table tbody tr:last-child td{
  border-bottom:none;
}

/* Zebra */
.prose table tbody tr:nth-child(even) td{
  background:rgba(17,24,39,.02);
}

/* First column emphasis */
.prose table tbody td:first-child{
  font-weight:800;
  white-space:nowrap;
}

/* Numeric column */
.prose table td:last-child,
.prose table th:last-child{
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* VS highlight (only when 3 columns) */
.prose table tr td:nth-child(2),
.prose table tr th:nth-child(2){
  background:rgba(37,99,235,.035);
}

/* Small screens */
@media (max-width:860px){
  .prose table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}
/* =========================================================
   REVIEW TABLE — LIGHT VERSION
   Only for markdown prose tables
   Does NOT touch homepage components
========================================================= */

.prose > table{
  width:100%;
  border-collapse:collapse;
  margin:22px 0 32px;
  font-size:14.5px;
}

.prose > table thead th{
  text-align:left;
  padding:12px 14px;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid var(--line);
  background:#f9fafb;
}

.prose > table td{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
}

.prose > table tr:last-child td{
  border-bottom:none;
}

.prose > table tr:nth-child(even){
  background:rgba(17,24,39,.02);
}

.prose > table td:first-child{
  font-weight:700;
}

.prose > table td:last-child{
  text-align:right;
  font-variant-numeric:tabular-nums;
}

@media (max-width:860px){
  .prose > table{
    display:block;
    overflow-x:auto;
  }
}
/* Responsive table wrapper */
.table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin: 24px 0;
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 12px;
  background: rgba(255,255,255,.85);
}

.table-wrap table{
  width:100%;
  min-width: 860px; /* 关键：防止窄屏挤爆 */
  border-collapse: collapse;
  font-size: 15px;
}

.table-wrap th,
.table-wrap td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(17,24,39,.10);
  vertical-align: top;
}

.table-wrap th{
  position: sticky;
  top: 0;
  background: rgba(248,250,252,.95);
  font-weight: 700;
  text-align: left;
}

.table-wrap td ul{
  margin: 0;
  padding-left: 18px;
}

.table-wrap code{
  font-size: .92em;
}