/* =========================================================================
   ccrelay 跨页商业组件（纯静态，零第三方依赖）
   仅放 2+ 页共用的组件：入口卡 / 套餐速选 / 套餐对比表 / 价格卡 / 联系面板。
   颜色/圆角/阴影/字体/间距/动效一律取 landing.css :root token，禁硬编码十六进制。
   landing.css 为共享底座，本文件不改它。
   ========================================================================= */

/* ---------------------------------------------------------------------- */
/* 入口卡 .entry-card / .entry-card-grid / .entry-index / .entry-go        */
/* ---------------------------------------------------------------------- */

.entry-card-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

a.entry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-fast) var(--ease-out);
}

/* 克制：hover/focus 不位移，仅描边与序号轻微染 accent */
a.entry-card:hover,
a.entry-card:focus-visible { border-color: var(--accent); }

.entry-card h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.entry-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.entry-index {
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: var(--font-serif);
  /* 记忆点 2 · 老式衬线数字（编辑式大序号） */
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum" 1;
  font-size: 28px;
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--border);
  transition: color var(--dur-fast) var(--ease-out);
}

a.entry-card:hover .entry-index,
a.entry-card:focus-visible .entry-index { color: var(--accent); }

/* 14px 行动文字（含内联箭头）：白卡底上 --accent 只有 4.23:1，走 --accent-text 6.13:1 */
.entry-go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-text);
}

.entry-go svg {
  width: 16px;
  height: 16px;
}

/* ---------------------------------------------------------------------- */
/* 套餐速选 .plan-cards / .plan-card / .plan-badge                         */
/* ---------------------------------------------------------------------- */

.plan-cards {
  margin-top: 48px;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: thin;
}

.plan-card {
  flex: 0 0 clamp(240px, 72vw, 280px);
  scroll-snap-align: start;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-fast) var(--ease-out);
}

/* 克制：hover/focus 不位移，仅描边轻微染 accent */
.plan-card:hover,
.plan-card:focus-within { border-color: var(--accent); }

.plan-card-name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
}

.plan-card-price {
  font-family: var(--font-serif);
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum" 1;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.plan-card-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.plan-card.is-recommended { border-color: var(--accent); }

/* 11px 白字徽标：--on-accent 对 --accent 只有 4.04:1，底色压暗一档到 --accent-hover
   后 5.25:1（色相不变）。徽标没有 hover 态，不会与按钮的悬停梯度打架。 */
.plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--accent-hover);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 rgba(255, 249, 242, 0.18);
}

.plan-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

@media (min-width: 901px) {
  .plan-cards { flex-wrap: wrap; }

  .plan-card { flex: 1 1 240px; }
}

/* ---------------------------------------------------------------------- */
/* 套餐对比表 .plan-table*                                                 */
/* ---------------------------------------------------------------------- */

.plan-table-wrap {
  margin-top: 24px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
}

.plan-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
}

.plan-table th,
.plan-table td {
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.plan-table tr:last-child th,
.plan-table tr:last-child td { border-bottom: none; }

.plan-table thead th {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
}

.plan-table thead th small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.plan-table-rowhead {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  text-align: left;
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--text-secondary);
}

.plan-table .is-recommended { background: var(--accent-soft); }

/* 推荐列表头与「含」单元格都落在 --accent-soft 底上（--accent 只有 3.53:1），
   且都是 14–16px 正文字号，一律走 --accent-text（5.13:1）。 */
.plan-table thead .is-recommended { color: var(--accent-text); }

.plan-table .cell-yes { color: var(--accent-text); }

.plan-table .cell-no { color: var(--text-secondary); }

.plan-table-note {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* ≤768：表头隐藏，按套餐分组卡片堆叠（由本页加 .plan-table--stack 触发） */
@media (max-width: 768px) {
  .plan-table--stack .plan-table-wrap { border: none; overflow: visible; }

  .plan-table--stack .plan-table,
  .plan-table--stack .plan-table tbody,
  .plan-table--stack .plan-table tr { display: block; }

  .plan-table--stack .plan-table thead { display: none; }

  .plan-table--stack .plan-table tr {
    margin-bottom: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    overflow: hidden;
  }

  .plan-table--stack .plan-table th,
  .plan-table--stack .plan-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    text-align: right;
    border-bottom: 1px solid var(--border);
  }

  .plan-table--stack .plan-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-secondary);
    text-align: left;
  }

  .plan-table--stack .plan-table-rowhead {
    position: static;
    justify-content: flex-start;
    background: var(--bg-subtle);
  }
}

/* ---------------------------------------------------------------------- */
/* 价格卡 .price-grid / .price-card / .price-badge                         */
/* ---------------------------------------------------------------------- */

.price-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-fast) var(--ease-out);
}

/* 克制：hover 不位移，仅描边轻微染 accent */
.price-card:hover { border-color: var(--accent); }

.price-name {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
}

.price-tagline {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.price-amount {
  margin-top: 20px;
  font-family: var(--font-serif);
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum" 1;
  font-size: clamp(32px, 4vw, 40px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.015em;
}

.price-unit {
  margin-left: 4px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
}

/* 价格值占位态（07-09）：拿不到真实价格时展示「以结账页为准」——降级为
   正文字号次要色，避免占位文案以 40px 衬线大字出现；pricing.js 填入真实
   金额后移除 is-placeholder，恢复 .price-amount 的大字排版。 */
.price-amount-value.is-placeholder {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary);
}

/* 08-06：`.price-note`（「实际价格以在线结账页为准」）连同它的 12 处模板引用一起
   删除，规则块不留空壳。删的理由不是排版：Stripe Price 的金额创建后不可修改
   （internal/adminapp/billing_price.go 文件头），门面确认页与 Checkout 又被
   billing_price_map.go 强制走同一个 priceID——卡上的价格与最终扣款必然一致，
   这句免责保护的是一个不存在的风险。而它印在真实金额正下方，语用含义是「上面那个
   数字不算数」，恰好坐实了买号品类最核心的疑虑「会不会到付款页变价」。
   注意 pricing.js 的 applyCatalog 只改 [data-sku-price]，这句没有任何 data-* 钩子，
   所以真价注入成功后它依旧留在原位——不是降级态文案，是常驻的自我否定。 */

/* 实时库存状态（pricing.js 从公开商品目录注入）：占位/降级态中性灰；
   有货走正向绿 --ok-text，缺货预订用赭橙 --accent-text 提醒。
   07-30 从 services.css 移来：首页价格快照与服务介绍页价卡共用同一批
   data-sku-* 钩子，这条状态条随之成为跨页商业组件（两页各留一份必然漂移）。
   07-31：13px 文字原本用 --terminal-string（白卡底 2.25:1）与 --accent（4.23:1），
   两档都不达 AA——而有货/缺货是转化路径上最关键的一行字。 */
.price-stock {
  margin: 14px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.price-stock::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

.price-stock.is-in-stock {
  color: var(--ok-text);
  border-color: color-mix(in srgb, var(--ok-text) 40%, var(--border));
}

.price-stock.is-backorder {
  color: var(--accent-text);
  border-color: color-mix(in srgb, var(--accent-text) 40%, var(--border));
}

.price-card hr {
  width: 100%;
  margin: 20px 0;
  border: none;
  border-top: 1px solid var(--border);
}

.price-card .feature-points { margin-top: 0; }

.price-card .btn { margin-top: 24px; width: 100%; }

.price-card .feature-points + .btn { margin-top: auto; }

.price-card.is-featured {
  border: 1.5px solid var(--accent);
  box-shadow: var(--shadow-sm);
}

/* 推荐档徽章：11px 白字，与 .plan-badge 同一处理（4.04 → 5.25:1）。
   08-06 起文案是「推荐 / Recommended」，不再是「最受欢迎 / Most popular」——没有
   任何销量 / 浏览量字段能支撑后者，而买家最先怀疑的就是这类核实不了的断言；控制台
   购买页的同一枚徽章（.sku-badge）写的也是「推荐」，两侧口径必须同源。
   绊线：TestHandlerPricingBadgeMakesNoPopularityClaim（四个渲染点逐个核）。
   claude.gohtml 的 .plan-badge **不在**这条约束内：那说的是上游自家套餐之间的
   对比，是转述别人家的事实。 */
.price-badge {
  position: absolute;
  top: -12px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: var(--radius-full);
  background: var(--accent-hover);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 249, 242, 0.18);
}

.price-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

@media (max-width: 900px) {
  .entry-card-grid,
  .price-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .entry-card-grid,
  .price-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- */
/* 联系/售后收口面板 .contact-panel                                        */
/* ---------------------------------------------------------------------- */

.contact-panel {
  position: relative;
  margin-top: 48px;
  padding: 48px 32px;
  background-color: var(--accent-soft);
  /* background 上的 rgba(193, 95, 60)（= --accent 数值展开）保持字面量：不支持
     color-mix 的浏览器会丢掉整条 background-image，公开营销页上直接掉底纹。 */
  background-image: radial-gradient(120% 120% at 50% -10%, rgba(193, 95, 60, 0.12), rgba(193, 95, 60, 0) 60%);
  /* 描边则是降级安全的：先写死一档合法的 border，再用 border-color 覆盖成 accent 淡染，
     color-mix 不被支持时只回落成 --border 的中性描边，边框不会整条消失。
     color-mix(… 16%, transparent) 与原 rgba(…, 0.16) 计算值相同。 */
  border: 1px solid var(--border);
  border-color: color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: var(--radius-panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  text-align: center;
}

.contact-panel .hero-actions { margin-top: 24px; }

.contact-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--text-secondary);
}

.contact-meta li { display: inline-flex; align-items: center; gap: 8px; }

/* ---------------------------------------------------------------------- */
/* 动效降级                                                                */
/* ---------------------------------------------------------------------- */

/* hover 已无位移/缩放，prefers-reduced-motion 无需额外覆写本文件组件 */