: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-wrap{
      margin-top: 9px;
      min-height: 100vh;
      display: grid;
      align-content: center;
      max-width: 1200px; 
      margin: 0 auto;
      padding: 10px;
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;
}
.compare-title{/* font-size: 39px; */font-weight:900;letter-spacing:.2px;margin:0 0 6px;color:var(--text);text-align: center;font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;}
.compare-sub{margin:0 0 20px;/* color:var(--muted); *//* font-size:14px; */text-align: center;/* margin: 0; *//* color: #000000; *//* font-size: 21px; *//* font-weight: 500; */line-height: 1.4em;background: linear-gradient(90deg, #3F12F5 0%, #FF5B8A 50%, #F99C52 100%);/* background-size: 100% 1.4em; */background-repeat: repeat;background-position: 0 0;-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;color: transparent;display: block;font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;}

/* 窄屏标题与副标题增加左右内边距，避免贴边或看似溢出 */
@media (max-width: 1024px){
  .compare-title, .compare-sub{ padding: 0 12px; }
}

.compare-scroll{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;              /* 不再额外收窄，跟随 section 宽度 */
}

/* 表格网格 */
.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: 18px;
  color:var(--text);
  /* background:var(--bg); */
  border-radius: -36px;
}

/* 第一列（特性列）：通过“列统一类”控制粘滞与对齐，替代 .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: 38px 38px 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: 24px;letter-spacing:.2px;font-family: sans-serif;}
.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: #000000;}

/* ✓ / ✗ 图标：用 .icon.ok / .icon.no，不再依赖父级类名 */
.icon{width: 30px;height: 30px;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='50' height='45' 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/32px 14px no-repeat,
    #ecfdf5;
  border-color: #7e7e7e;
}
.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-section {background-color: unset;}


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

/* —— 窄屏（≤1024px）：切换为卡片视图 —— */
@media (max-width:1024px){
  .compare-wrap {min-height: 100%;}
  .compare-title{font-size:26px;font-weight: 500;}
  .compare-scroll{ display:none; }
  /* 基础布局（桌面） */
  .compare-section{
    margin-top: 9px;
    /* border-radius: 25px; */
    padding: clamp(28px, 6vw, 56px) 0; /* 去掉左右内边距 */
    /* 移动端不强制全屏高度 */
    min-height: auto;
    /* box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 40px  40px rgba(15, 23, 42, .10); */
    /* border: 1px solid #999; */
  }

  .compare-mobile{
    display:flex;
    gap:14px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    padding:12px 12px 8px;
    margin:0;
    position:relative;
    width:100%;
    box-sizing:border-box;
    padding: 10px;
  }
  .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% - 78px);
    background: #ffffff;
    border: 1px solid #aeaeae;
    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: #fff3ea;
}






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

a.col-cta {
    background: #ff5b8a;
    text-decoration: none;
    padding: 7px 23px 7px 25px;
    color: #ffffff;
    border-radius: 29px;
}


.c-cell.r--chatgpt-month.c--ipp.i--chatgpt-month--ipp {
    font-size: 30px;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

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