.codex-product-card { --cp-ink: #111318; --cp-muted: #626979; --cp-blue: #4f5ee8; --cp-violet: #7867ee; --cp-line: rgba(79, 94, 232, 0.16); --cp-danger: #c53c50; display: block; width: 100%; max-width: none; margin: 0; padding: clamp(22px, 5vw, 48px); overflow: hidden; color: var(--cp-ink); font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; border: 1px solid rgba(79, 94, 232, 0.12); border-radius: 24px; background: radial-gradient(circle at 18% 8%, rgba(153, 210, 255, 0.35), transparent 34%), radial-gradient(circle at 88% 16%, rgba(181, 167, 255, 0.32), transparent 32%), linear-gradient(145deg, #f8fbff 0%, #f5f3ff 100%); box-shadow: 0 20px 55px rgba(57, 70, 140, 0.12); } .codex-product-card, .codex-product-card * { box-sizing: border-box; } .codex-product-card .cp-eyebrow { display: inline-flex; padding: 7px 12px; color: var(--cp-blue); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; border: 1px solid var(--cp-line); border-radius: 999px; background: rgba(255, 255, 255, 0.72); } .codex-product-card .cp-title { margin: 18px 0 10px; color: var(--cp-ink); font-size: clamp(30px, 6vw, 52px); line-height: 1.1; letter-spacing: -0.035em; } .codex-product-card .cp-lead { max-width: 680px; margin: 0; color: var(--cp-muted); font-size: 16px; line-height: 1.8; } .codex-product-card .cp-heading { margin: 32px 0 14px; color: var(--cp-ink); font-size: 20px; line-height: 1.4; } .codex-product-card .cp-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .codex-product-card .cp-plan { position: relative; min-height: 142px; padding: 22px; overflow: hidden; border: 1px solid var(--cp-line); border-radius: 20px; background: rgba(255, 255, 255, 0.82); } .codex-product-card .cp-plan::after { position: absolute; right: -34px; bottom: -48px; width: 120px; height: 120px; content: ""; border-radius: 50%; background: linear-gradient(135deg, rgba(113, 196, 255, 0.3), rgba(124, 102, 238, 0.3)); } .codex-product-card .cp-plan strong { position: relative; z-index: 1; display: block; color: var(--cp-ink); font-size: 32px; line-height: 1; } .codex-product-card .cp-plan span { position: relative; z-index: 1; display: block; margin-top: 10px; color: var(--cp-muted); font-size: 14px; } .codex-product-card .cp-notice { margin-top: 26px; padding: 20px 22px; border: 1px solid rgba(197, 60, 80, 0.2); border-radius: 18px; background: rgba(255, 242, 245, 0.88); } .codex-product-card .cp-notice strong { display: block; margin-bottom: 8px; color: var(--cp-danger); font-size: 17px; } .codex-product-card .cp-notice p { margin: 0; color: #703540; line-height: 1.75; } .codex-product-card .cp-steps { margin: 0; padding: 0; list-style: none; counter-reset: cp-step; } .codex-product-card .cp-steps li { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; color: var(--cp-muted); line-height: 1.65; } .codex-product-card .cp-steps li::before { display: grid; flex: 0 0 28px; width: 28px; height: 28px; color: #ffffff; font-size: 13px; font-weight: 700; content: counter(cp-step); counter-increment: cp-step; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--cp-blue), var(--cp-violet)); } .codex-product-card .cp-redeem { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 28px; padding: 18px 20px; border: 1px solid var(--cp-line); border-radius: 18px; background: rgba(255, 255, 255, 0.8); } .codex-product-card .cp-redeem small { display: block; margin-bottom: 4px; color: var(--cp-muted); } .codex-product-card .cp-redeem code { color: var(--cp-ink); font-family: Consolas, Monaco, monospace; font-size: 16px; font-weight: 700; word-break: break-all; } .codex-product-card .cp-button { display: inline-block; flex: 0 0 auto; padding: 12px 18px; color: #ffffff !important; font-weight: 700; text-decoration: none !important; border-radius: 12px; background: linear-gradient(135deg, var(--cp-blue), var(--cp-violet)); box-shadow: 0 10px 24px rgba(79, 94, 232, 0.22); } .codex-product-card .cp-button:hover { color: #ffffff !important; opacity: 0.92; transform: translateY(-1px); } .codex-product-card .cp-fine-print { margin: 24px 0 0; color: #838999; font-size: 13px; line-height: 1.7; } @media (max-width: 680px) { .codex-product-card { padding: 22px 16px; border-radius: 18px; } .codex-product-card .cp-plans { grid-template-columns: 1fr; } .codex-product-card .cp-plan { min-height: 118px; } .codex-product-card .cp-redeem { align-items: stretch; flex-direction: column; } .codex-product-card .cp-button { text-align: center; } }