:root{
  --bg:#ffffff;
  --panel:#fbfcfe;
  --muted:#6b7280;
  --text:#0f172a;
  --border:#e6eaf0;
  --ring:#dbeafe;
  --brand:#0ea5e9;     /* 高亮边 */
  --shadow:0 12px 24px -10px rgba(2,6,23,.12), 0 2px 6px rgba(2,6,23,.06);
}

/* 基础布局（桌面） */
.compare-section{
    margin-top: 9px;
    background-color: #f0f8ff;
    border-radius: 25px;
    padding: clamp(28px, 6vw, 56px);
}
.compare-title{font-size:34px;font-weight:900;letter-spacing:.2px;margin:0 0 6px;color:var(--text);text-align: center;}
.compare-sub{margin:0 0 20px;color:var(--muted);font-size:14px;text-align: center;}

.compare-scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch;

}

/* 表格网格 */
.compare-table{
  display:grid;
  grid-template-columns:220px repeat(4, minmax(180px, 1fr));
  min-width:960px;
  /* background:linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,0)) 0 0/100% 64px no-repeat; */
}
.compare-row{ display:contents; }

/* 新：单元格基础类（取代 compare-cell） */
.c-cell{
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  color:var(--text);
  /* background:var(--bg); */
}

/* 第一列（特性列）：通过“列统一类”控制粘滞与对齐，替代 .feature */
.c-cell.c--feature{
  justify-content:flex-start;
  /* font-weight:600; */
  position:sticky;
  left:0;
  z-index:2;
  color: #000000;
}

/* 表头与品牌列 */
.compare-head .c-cell{ border-top:0; }
.compare-head .provider{padding-top:20px;padding-bottom:14px;flex-direction:column;gap:8px;border-radius: 10px 10px 0px 0px;}
.brand{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:30px; }
.brand img{ height:24px; }
.brand-fallback{/* font-weight:800; */color:var(--text);font-size:16px;letter-spacing:.2px;}
.meta-badges{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.note-badge{ font-size:12px; color:#475569; padding:4px 10px; border-radius:999px; background:#f1f5f9; border:1px solid var(--border); }

/* CTA（保持不变） */
.hero .cta{
  display:inline-block; margin-top:2px; font-size:12px; padding:6px 12px; border-radius:999px;
  background:#111827; color:#fff; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.hero .cta:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(17,24,39,.18); }

/* 价格文本（移到单元格内部 span.price 上） */
.price{/* font-weight:700; */font-feature-settings:"tnum" 1;}
.price.muted{ color:#64748b; }

/* ✓ / ✗ 图标：用 .icon.ok / .icon.no，不再依赖父级类名 */
.icon{ width:22px; height:22px; border-radius:50%; display:inline-block; border:1px solid transparent; }
.icon.ok{
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/14px 14px no-repeat,
    #ecfdf5;
  border-color:#bbf7d0;
}
.icon.no{
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") center/14px 14px no-repeat,
    #fef2f2;
  border-color:#fecaca;
}



/* 注脚 */
.compare-footnote{ margin:12px 8px 0; font-size:12px; color:#8a94a6; }

/* —— 移动端（≤740px）：保持你原样，不做变化 —— */
@media (max-width:740px){
  .compare-title{ font-size:26px; }
  .compare-scroll{ display:none; }
  /* 基础布局（桌面） */
  .compare-section{
    margin-top: 9px;
    background-color: #f0f8ff;
    border-radius: 25px;
    padding: clamp(28px, 6vw, 56px);
    /* box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 40px  40px rgba(15, 23, 42, .10); */
  }

  .compare-mobile{
    display:flex; gap:14px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; padding:12px 8px 8px; margin:0 -8px; position:relative;
  }
  .compare-mobile::before,
  .compare-mobile::after{
    content:""; position:sticky; top:0; width:16px; height:100%; pointer-events:none; z-index:1;
  }
  .compare-mobile::before{ left:0; background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
  .compare-mobile::after{ right:0; background:linear-gradient(-90deg,#fff,rgba(255,255,255,0)); }

  .cm-card{
    scroll-snap-align:start;
    min-width:calc(100% - 24px);
    background: #ffffff;
    /* border:1px solid var(--border); */
    border-radius: 16px;
    /* box-shadow:0 10px 24px -14px rgba(2,6,23,.15), 0 1px 4px rgba(2,6,23,.06); */
  }
  .cm-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 14px 8px; border-bottom:1px solid #f1f3f6; }
  .cm-brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:16px; color:#0f172a; }
  .cm-badge{ font-size:12px; padding:4px 10px; border-radius:999px; background:#f1f5f9; border:1px solid var(--border); color:#475569; }
  .cm-cta{font-size:12px;padding:6px 12px;border-radius:999px;background: #0fa084;color:#fff;text-decoration:none;}

  .cm-list{ list-style:none; margin:0; padding:6px 10px 10px; }
  .cm-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 8px; border-bottom:1px solid #f5f7fb; font-size:14px; }
  .cm-item:last-child{ border-bottom:0; }
  .cm-left{color: #000000;font-weight: lighter;}
  .cm-right{color:#0f172a;/* font-weight:700; */}
  .cm-icon{ width:22px; height:22px; border-radius:50%; display:inline-block; border:1px solid transparent; }
  .cm-icon.ok{
    background:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/14px 14px no-repeat,
      #ecfdf5;
    border-color:#bbf7d0;
  }
  .cm-icon.no{
    background:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") center/14px 14px no-repeat,
      #fef2f2;
    border-color:#fecaca;
  }
  .cm-price{/* font-variant-numeric: tabular-nums; */font-family: Arial, sans-serif;}
  .cm-item.cm-item--cta {
    display: none;
  }
}
/* 灰底整行（topup、netflix-year）首尾做圆角 */
.compare-table .row--topup  > .c-cell:first-child,
.compare-table .row--netflix-year > .c-cell:first-child{
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  background-clip: padding-box;       /* 防止背景溢出圆角 */
}

.compare-table .row--topup  > .c-cell:last-of-type,
.compare-table .row--netflix-year > .c-cell:last-of-type{
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  background-clip: padding-box;
}

.c--ipp{
        background-color: #ffffff;
}







.c-cell.r--cta.c--ipp.i--cta--ipp {
    border-radius: 0px 0px 10px 10px;
}

a.col-cta {
    background: #0fa084;
    text-decoration: none;
    padding: 7px 15px 7px 15px;
    color: #ffffff;
    border-radius: 6px;
}


.c-cell.r--chatgpt-month.c--ipp.i--chatgpt-month--ipp {
    font-size: 16px;
}

.c-cell.r--netflix-year.c--ipp.i--netflix-year--ipp {font-size: 16px;}