/* Codex 月卡：渠道比价 */
.cmp-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.cmp-card{position:relative;display:flex;flex-direction:column;padding:28px;border-radius:24px;background:#fff;box-shadow:var(--shadow);border:1.5px solid #fff}
.cmp-card.win{border-color:var(--accent-mid);box-shadow:var(--shadow-lg);background:linear-gradient(180deg,var(--accent-soft),#fff 50%)}
.cmp-badge{position:absolute;top:-14px;left:24px;padding:5px 14px;border-radius:99px;background:#a1460d;color:#fff;font-size:14px;font-weight:800;box-shadow:0 4px 12px #0002}
.cmp-badge.alt{background:var(--accent-ink)}
.cmp-no{margin:6px 0 0;font-size:13px;font-weight:800;color:var(--muted);letter-spacing:.08em}
.cmp-card h3{margin:2px 0 0;font-size:22px}
.cmp-price{margin:14px 0 4px;font-size:52px;font-weight:900;line-height:1;letter-spacing:-.03em;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.cmp-price small{font-size:24px;margin-right:2px}
.cmp-price span{font-size:15px;font-weight:700;color:var(--muted);margin-left:6px;letter-spacing:0}
.cmp-card:not(.win) .cmp-price{color:var(--ink,#1d1b26)}
.cmp-card ul{list-style:none;padding:0;margin:18px 0 22px;display:grid;gap:9px}
.cmp-card li{display:flex;gap:9px;font-size:15.5px}
.cmp-card li::before{content:"✓";color:var(--accent);font-weight:900}
.cmp-card .btn{margin-top:auto;justify-content:center}
.cmp-note{margin:14px 0 0;padding:8px 14px;border-radius:10px;background:#fff7e8;border:1px solid #ffe2b3;color:#8a5a00;font-size:13px;line-height:1.6}
@media(max-width:700px){
.cmp-cards{grid-template-columns:1fr;gap:24px}
.cmp-card{padding:24px 20px}
.cmp-price{font-size:44px}
}

/* ===== 商品条：一眼看懂卖的是 ChatGPT Plus ===== */
.cmp-card{--ch:#0ea59a;--ch-ink:#0b6f68;--ch-soft:#e6f7f5}
.cmp-card.ch2{--ch:#4f46e5;--ch-ink:#3730a3;--ch-soft:#eef0ff}
.cmp-prod{display:flex;align-items:center;gap:12px;margin:8px 0 16px;padding:10px 12px;border-radius:16px;background:var(--ch-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ch) 22%,transparent)}
.cmp-oa{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#0d0d0d;color:#fff;box-shadow:0 6px 14px -8px #000c}
.cmp-oa svg{width:26px;height:26px}
.cmp-prod b{display:block;font-size:17px;line-height:1.25;color:#0d0d0d}
.cmp-prod small{display:block;font-size:12.5px;color:var(--muted);line-height:1.45}
.cmp-term{margin-left:auto;flex:none;padding:3px 10px;border-radius:99px;background:#fff;color:var(--ch-ink);font-size:12.5px;font-weight:900;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ch) 45%,transparent)}
/* ===== 渠道标识 ===== */
.cmp-shop{display:flex;align-items:center;gap:10px}
.cmp-mark{flex:none;width:34px;height:34px;border-radius:10px;object-fit:cover;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--ch) 40%,transparent)}
.cmp-mono{display:grid;place-items:center;background:linear-gradient(135deg,#6366f1,#3730a3);color:#fff;font-weight:900;font-size:18px;font-family:ui-rounded,system-ui,sans-serif}
.cmp-shop .cmp-no{margin:0;color:var(--ch-ink)}
.cmp-shop h3{margin:0}
/* ===== 两个渠道的配色区别 ===== */
.cmp-card.ch1{border-color:color-mix(in srgb,var(--ch) 35%,#fff);background:linear-gradient(180deg,#eaf8f6,#fff 46%)}
.cmp-card.ch2{border-color:color-mix(in srgb,var(--ch) 28%,#fff);background:linear-gradient(180deg,#f1f2ff,#fff 46%)}
.cmp-card.ch2 .cmp-price{color:var(--ch-ink)}
.cmp-card.ch2 li::before{color:var(--ch)}
.cmp-card.ch2 .cmp-badge{background:var(--ch-ink)}
.cmp-card.ch2 .btn.alt{color:var(--ch-ink);background:#fff;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--ch) 45%,transparent),0 8px 18px -12px var(--ch)}
.cmp-card.ch2 .btn.alt:hover{background:var(--ch-soft)}
@media(max-width:700px){.cmp-prod{gap:10px;padding:9px 10px}.cmp-oa{width:38px;height:38px}.cmp-oa svg{width:22px;height:22px}.cmp-prod b{font-size:15.5px}.cmp-prod small{font-size:11.5px}}

/* ===== 入场：检索全网渠道 ===== */
.cmp-scan{display:flex;align-items:center;gap:10px;margin:0 0 22px;padding:10px 16px;border-radius:14px;background:#fff;box-shadow:var(--shadow);font-size:14.5px;color:var(--accent-ink);overflow:hidden;position:relative}
.cmp-scan[hidden]{display:none}
.cmp-radar{position:relative;flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--accent);opacity:.9}
.cmp-radar::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--accent);animation:cmp-ping 1.1s ease-out infinite}
@keyframes cmp-ping{to{transform:scale(2.2);opacity:0}}
.cmp-scan-bar{flex:1;height:4px;margin-left:6px;border-radius:99px;background:color-mix(in srgb,var(--accent) 14%,#fff);overflow:hidden}
.cmp-scan-bar i{display:block;width:35%;height:100%;border-radius:inherit;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:cmp-sweep 1s linear infinite}
@keyframes cmp-sweep{from{transform:translateX(-100%)}to{transform:translateX(290%)}}
.cmp-scan.done{background:#e9f8ef;color:#1f7a53}
.cmp-scan.done .cmp-radar{border-color:#2bb37c;background:#2bb37c}
.cmp-scan.done .cmp-radar::after,.cmp-scan.done .cmp-scan-bar{display:none}
.cmp-waiting .cmp-card{opacity:0;transform:translateY(26px) scale(.96)}
.cmp-card{transition:opacity .55s ease,transform .7s cubic-bezier(.34,1.56,.64,1)}
.cmp-waiting .cmp-card.cmp-in,.cmp-card.cmp-in{opacity:1;transform:none}
/* 更低价出现：金色光圈闪两下 */
.cmp-card.cmp-best{animation:cmp-best .8s ease-out 2}
@keyframes cmp-best{0%{box-shadow:0 0 0 0 #ffc93caa,var(--shadow-lg)}100%{box-shadow:0 0 0 18px #ffc93c00,var(--shadow-lg)}}
.cmp-card.cmp-best .cmp-price{animation:cmp-pop .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes cmp-pop{40%{transform:scale(1.12)}}

/* ===== 怎么购买：三步横向流程 ===== */
.buy-steps{list-style:none;margin:0;padding:22px 26px;border-radius:20px;background:#fff;box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.buy-steps li{position:relative;display:flex;align-items:center;gap:12px;min-width:0}
.buy-steps li:not(:last-child)::after{content:"";flex:1;height:1px;margin:0 6px 0 10px;background:linear-gradient(90deg,#d9d6e2,#ecebf1)}
.buy-steps b{display:block;font-size:16px;line-height:1.35}
.buy-steps small{display:block;font-size:13.5px;color:var(--muted);white-space:nowrap}
.buy-num{flex:none;position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:14px;font-weight:800;color:#2e7d4f;background:#fff;
  box-shadow:inset 0 0 0 2px #e7e5ee}
/* 进度圈：第 1 步满圈、第 2 步大半圈、第 3 步未开始 */
.buy-num::before{content:"";position:absolute;inset:0;border-radius:50%;padding:2px;background:conic-gradient(#2e9e5b var(--p),transparent 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.s1 .buy-num{--p:360deg}
.s2 .buy-num{--p:250deg}
.s3 .buy-num{--p:0deg;color:#8a879a}
@media(max-width:700px){
  .buy-steps{grid-template-columns:1fr;gap:0;padding:14px 18px}
  .buy-steps li{padding:10px 0}
  .buy-steps li:not(:last-child)::after{content:"";position:absolute;left:16px;top:46px;bottom:-12px;width:1px;height:auto;margin:0;flex:none;background:#e3e1ea}
  .buy-steps small{white-space:normal}
}