/* 會員方案頁, 共用樣式見 static/css/site.css */

/* 三張會員卡的金屬材質色: 金卡/香檳鈦御璽卡/黑卡屬於實體卡片的材質表現,
   設計系統的珊瑚色階無法呈現, 因此集中定義在此, 不散落在各規則中 */
.site {
  --metal-gold-light: #f7df95;
  --metal-gold: #e0b24d;
  --metal-gold-deep: #b98a2c;
  --metal-gold-ink: #3b2a07;
  /* 香檳鈦: 帶橄欖調的暖灰金屬, 明暗反差大、有鏡面高光,
     與金卡的高彩度亮金拉開層級 */
  --metal-titanium-glint: #f6ebd1;
  --metal-titanium-light: #d8caa7;
  --metal-titanium: #afa182;
  --metal-titanium-mid: #8b7f62;
  --metal-titanium-deep: #5f5741;
  --metal-titanium-shadow: #433c2c;
  --metal-titanium-ink: #1f1c16;
  --metal-black: #0b0b0d;
  --metal-black-soft: #1d1c20;
  --metal-black-gold: #d6b25e;
  --metal-aurora: #7fbfb0;
}

/* - Hero - */
.member-hero-inner { padding-block: 104px 56px; text-align: center; }
.member-hero-title { margin: 0 auto var(--space-6); font-size: 56px; line-height: 1.15; }
.member-route { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 14px; }
.member-route-arrow { font-size: 0.6em; color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.member-hero-lead {
  max-width: 680px; margin: 0 auto; font-size: 17px; line-height: 1.75; text-wrap: balance;
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
}

/* - 免費試用 - */
.member-trial {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px;
  padding: 24px 28px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--color-accent) 14%, var(--site-panel-strong)), var(--site-panel));
  border: 1.5px solid color-mix(in srgb, var(--color-accent) 35%, transparent); border-radius: var(--site-radius-lg);
  box-shadow: var(--site-shadow);
}
.member-trial-icon {
  width: 64px; height: 64px; display: grid; place-items: center; font-size: 32px;
  background: color-mix(in srgb, var(--color-accent) 16%, transparent); border-radius: 50%;
}
.member-trial-title { margin: 0; font-size: 26px; }
.member-trial-desc { margin: var(--space-2) 0 0; font-size: 14px; line-height: 1.7; color: color-mix(in srgb, var(--color-text) 75%, transparent); }
.member-trial-cta { white-space: nowrap; }

/* - 付款週期切換 - */
.member-cycle { display: flex; justify-content: center; margin: 48px 0 40px; }
.site .member-cycle .seg { border-radius: var(--site-radius-pill); }
.member-cycle .seg-opt { padding: 10px 22px; font-size: 14px; }
/* 沿用目前文字色, 選取與未選取狀態下都清楚可讀 */
.member-cycle-badge {
  padding: 2px 8px; font-size: 11px; font-weight: 700;
  background: color-mix(in srgb, currentColor 16%, transparent); border-radius: var(--site-radius-pill);
}

/* - 訂閱對話框 - */
.site .member-dialog { border-radius: var(--site-radius-lg); border-color: var(--site-border-strong); }
.member-dialog-google { display: flex; justify-content: center; min-height: 44px; }

/* - 方案卡片 - */
.member-plans-section { padding-block: 40px 24px; }
.member-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
/* 三張卡的邊框粗細、內距一律相同, 卡面與各列內容才會落在同一水平線 */
.member-plan {
  position: relative; display: flex; flex-direction: column; gap: 28px; padding: 24px;
  background: linear-gradient(170deg, var(--site-panel-strong), var(--site-panel));
  border: 1.5px solid var(--site-border); border-radius: var(--site-radius-lg);
  box-shadow: var(--site-shadow);
  transition: transform 0.35s var(--site-ease), box-shadow 0.35s var(--site-ease);
}
.member-plan:hover { transform: translateY(-6px); }

/* LEVEL 2 主推: 香檳鈦漸層邊框 (padding-box 填底色, border-box 顯示邊框漸層) */
.member-plan.is-featured {
  border: 1.5px solid transparent;
  background:
    linear-gradient(170deg, var(--site-panel-strong), var(--color-bg)) padding-box,
    linear-gradient(162deg, var(--metal-titanium-glint), var(--metal-titanium-deep) 30%, var(--metal-titanium-light) 55%, var(--metal-titanium-shadow) 78%, var(--metal-titanium)) border-box;
  box-shadow: 0 24px 64px color-mix(in srgb, var(--metal-titanium) 18%, transparent), var(--site-shadow);
}

/* LEVEL 3 黑卡: 黑金底與金色漸層邊框 */
.plan-supercar {
  border: 1.5px solid transparent;
  background:
    radial-gradient(420px 260px at 100% 0%, color-mix(in srgb, var(--metal-black-gold) 16%, transparent), transparent 70%) padding-box,
    linear-gradient(170deg, var(--metal-black-soft), var(--metal-black)) padding-box,
    linear-gradient(135deg, var(--metal-gold-light), var(--metal-black-gold) 35%, color-mix(in srgb, var(--metal-black-gold) 20%, transparent) 60%, var(--metal-gold)) border-box;
}

.member-plan-badge {
  position: absolute; top: -15px; left: 50%; z-index: 2; transform: translateX(-50%);
  margin: 0; padding: 6px 16px; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--color-bg);
  background: linear-gradient(135deg, var(--color-accent-300), var(--color-accent) 50%, var(--color-accent-500));
  border-radius: var(--site-radius-pill);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

/* - 會員卡卡面: 比照實體信用卡比例 - */
.member-card {
  position: relative; overflow: hidden; isolation: isolate;
  width: 100%; aspect-ratio: 1.586 / 1; padding: 20px 22px;
  display: flex; flex-direction: column; justify-content: space-between;
  border-radius: var(--site-radius-md);
  box-shadow: 0 16px 36px color-mix(in srgb, #000000 45%, transparent);
}
/* 反光: 一道斜向高光, 滑過方案卡時掃過卡面 */
.member-card::after {
  content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.28) 50%, transparent 58%);
  transform: translateX(-60%); transition: transform 0.9s var(--site-ease);
}
.member-plan:hover .member-card::after { transform: translateX(60%); }

.member-card-top { display: flex; align-items: center; justify-content: space-between; }
.member-card-level { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 13px; letter-spacing: 0.18em; }
.member-card-type { font-size: 10px; letter-spacing: 0.22em; opacity: 0.75; }
.member-card-chip {
  width: 44px; height: 33px; border-radius: 7px;
  background:
    linear-gradient(90deg, transparent 32%, rgba(0, 0, 0, 0.18) 32% 34%, transparent 34% 66%, rgba(0, 0, 0, 0.18) 66% 68%, transparent 68%),
    linear-gradient(0deg, transparent 45%, rgba(0, 0, 0, 0.18) 45% 55%, transparent 55%),
    linear-gradient(135deg, var(--metal-gold-light), var(--metal-gold) 55%, var(--metal-gold-deep));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.member-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.member-card-icon { font-size: 26px; line-height: 1; }
.member-card-en { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15px; letter-spacing: 0.04em; text-align: right; }

/* 金卡: 亮金色 + 霧面顆粒 */
.card-gold {
  color: var(--metal-gold-ink);
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(255, 255, 255, 0.4), transparent 55%),
    linear-gradient(135deg, var(--metal-gold-light) 0%, var(--metal-gold) 40%, var(--metal-gold-deep) 70%, var(--metal-gold-light) 100%);
}
.card-gold::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.55;
  background-image:
    repeating-radial-gradient(circle at 30% 40%, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 3px),
    repeating-radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 4px);
}

/* 御璽卡: 香檳鈦金屬 (參考拋光鈦金屬卡). 與金卡刻意做出層級差:
   - 金卡是高彩度亮金霧面; 御璽卡改用低彩度、偏深的鈦灰金, 視覺更沉穩
   - 多道近水平的明暗反光帶 + 一條銳利鏡面高光, 呈現拋光金屬板的立體起伏
   - 細拉絲紋、上緣亮邊與下緣暗邊的切邊感, 文字以壓印效果呈現 */
.card-titanium {
  color: var(--metal-titanium-ink);
  border: 1px solid color-mix(in srgb, var(--metal-titanium-glint) 45%, transparent);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, rgba(0, 0, 0, 0.04) 1px 2px, transparent 2px 3px),
    linear-gradient(162deg,
      var(--metal-titanium-light) 0%,
      var(--metal-titanium-glint) 9%,
      var(--metal-titanium) 20%,
      var(--metal-titanium-deep) 34%,
      var(--metal-titanium-shadow) 42%,
      var(--metal-titanium-mid) 52%,
      var(--metal-titanium-light) 58%,
      var(--metal-titanium-glint) 61%,
      var(--metal-titanium-light) 64%,
      var(--metal-titanium-mid) 72%,
      var(--metal-titanium-deep) 82%,
      var(--metal-titanium) 94%,
      var(--metal-titanium-light) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--metal-titanium-glint) 85%, transparent),
    inset 0 -2px 0 color-mix(in srgb, var(--metal-titanium-shadow) 70%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #000000 18%, transparent),
    0 18px 40px color-mix(in srgb, #000000 55%, transparent),
    0 0 44px color-mix(in srgb, var(--metal-titanium) 16%, transparent);
}
/* 斜向柔光: 讓反光帶在卡面右上方較亮、左下方較暗, 避免像平面色塊 */
.card-titanium::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 85% 0%, color-mix(in srgb, var(--metal-titanium-glint) 22%, transparent), transparent 55%),
    radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--metal-titanium-shadow) 30%, transparent), transparent 60%);
}
/* 壓印字: 暗色字 + 下方一道細亮邊, 模擬刻在金屬上的凹字 */
.card-titanium .member-card-level,
.card-titanium .member-card-type,
.card-titanium .member-card-en {
  color: var(--metal-titanium-ink);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--metal-titanium-glint) 45%, transparent);
}
.card-titanium .member-card-type { opacity: 0.85; }
.card-titanium .member-card-chip {
  background:
    linear-gradient(90deg, transparent 32%, rgba(0, 0, 0, 0.18) 32% 34%, transparent 34% 66%, rgba(0, 0, 0, 0.18) 66% 68%, transparent 68%),
    linear-gradient(0deg, transparent 45%, rgba(0, 0, 0, 0.18) 45% 55%, transparent 55%),
    linear-gradient(135deg, #f2f2f0, #bdbdb8 55%, #8f8f8a);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 0 color-mix(in srgb, var(--metal-titanium-glint) 40%, transparent);
}

/* 黑卡: 黑金奢華 + 極光金線條 + 持續緩慢流動的反光 */
.card-black {
  color: var(--metal-gold-light);
  border: 1px solid color-mix(in srgb, var(--metal-black-gold) 55%, transparent);
  background:
    radial-gradient(80% 60% at 90% 5%, color-mix(in srgb, var(--metal-black-gold) 32%, transparent), transparent 60%),
    radial-gradient(70% 55% at 5% 100%, color-mix(in srgb, var(--metal-aurora) 22%, transparent), transparent 65%),
    repeating-linear-gradient(115deg, transparent 0 20px, color-mix(in srgb, var(--metal-black-gold) 12%, transparent) 20px 21px),
    linear-gradient(160deg, var(--metal-black-soft), var(--metal-black) 70%);
}
.card-black .member-card-level,
.card-black .member-card-en {
  background: linear-gradient(120deg, var(--metal-gold-light), var(--metal-black-gold) 60%, var(--metal-gold-light));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.card-black::after {
  background: linear-gradient(105deg, transparent 40%, color-mix(in srgb, var(--metal-gold-light) 30%, transparent) 50%, transparent 60%);
  animation: member-card-shine 6s ease-in-out infinite;
}
@keyframes member-card-shine {
  0%, 55% { transform: translateX(-60%); }
  100% { transform: translateX(60%); }
}

/* - 方案內容 - */
.member-plan-body { display: flex; flex: 1; flex-direction: column; }
.member-plan-level { margin: 0 0 var(--space-2); font-size: 12px; letter-spacing: 0.12em; color: var(--color-muted); }
.member-plan-name { margin: 0; font-size: 28px; }
.member-plan-price { display: flex; flex-direction: column; margin: var(--space-6) 0; }
.member-price-main { display: flex; align-items: baseline; gap: 6px; margin: 0; }
/* 年繳價格錨點: 原價刪除線搭配省下金額, 字級足以對比但仍明顯弱於實付價格 */
.member-price-anchor { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; }
.member-price-original {
  font-family: var(--font-heading); font-weight: 600; font-size: 20px; line-height: 1;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  text-decoration-color: color-mix(in srgb, var(--color-loss) 85%, transparent); text-decoration-thickness: 2px;
}
.member-price-save {
  padding: 4px 10px; font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--color-gain);
  background: color-mix(in srgb, var(--color-gain) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-gain) 30%, transparent); border-radius: var(--site-radius-pill);
}
.member-price-note { margin: 10px 0 0; font-size: 13px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.member-price-note strong { color: var(--color-text); }
.member-price-nudge {
  align-self: flex-start; margin-top: 10px; padding: 0; font: inherit; font-size: 13px; cursor: pointer;
  color: var(--color-accent-300); background: none; border: 0;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  transition: text-decoration-color 0.2s var(--site-ease);
}
.member-price-nudge:hover { text-decoration-color: currentColor; }
.member-price-currency { font-size: 13px; color: var(--color-muted); }
.member-price-amount { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 48px; line-height: 1; }
.member-price-unit { font-size: 14px; color: var(--color-muted); }

/* 權益列表: 三張卡使用相同的五項基準, 每項為「圖示 + 項目名稱 + 內容」,
   間距一律由每列的上下內距控制 (不用 gap), 桌機改為 subgrid 時才能沿用同一套樣式 */
.member-features { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--site-border); }
.member-features li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; align-items: start;
  padding: 12px 0;
}
.member-features li:first-child { padding-top: 20px; }
.member-features li::before {
  grid-row: 1 / span 2; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.member-feature-label { font-size: 12px; line-height: 1.4; color: var(--color-muted); }
.member-feature-value { font-size: 15px; font-weight: 600; line-height: 1.45; }
.member-features li.is-yes::before { content: "✓"; color: var(--color-bg); background: var(--color-gain); }
.plan-supercar .member-features { border-top-color: color-mix(in srgb, var(--metal-black-gold) 30%, transparent); }
.plan-supercar .member-feature-value { color: var(--metal-gold-light); }
.plan-supercar .member-plan-name {
  background: linear-gradient(120deg, var(--metal-gold-light), var(--metal-black-gold) 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.member-plan-cta { width: 100%; margin-top: auto; white-space: normal; text-align: center; }
.member-features + .member-plan-cta { margin-top: 28px; }

/* 桌機三欄並排: 方案卡改用 subgrid 共用同一組列高, 卡面、名稱、價格、
   每一項權益與按鈕都落在同一水平線; 某張卡文字換行時, 其他卡同一列
   會一起撐高, 而不是讓後續內容上下錯位. 列數 = 卡面 1 + 等級 1 + 名稱 1
   + 價格 1 + 權益 2 + 按鈕 1 (熱銷標籤為絕對定位, 不佔列).
   增減權益項目時必須同步調整 span: subgrid 不會自動長出新列, 多出的
   項目會被塞進最後一列, 與按鈕重疊 */
@media (min-width: 1024px) {
  .member-plans { row-gap: 0; }
  .member-plan {
    display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0;
  }
  .member-plan-body, .member-features { display: contents; }
  .member-card { margin-bottom: 28px; }
  .member-features li:first-child { border-top: 1px solid var(--site-border); }
  .plan-supercar .member-features li:first-child { border-top-color: color-mix(in srgb, var(--metal-black-gold) 30%, transparent); }
  .member-plan-cta { align-self: end; }
}
.plan-bicycle .member-plan-cta {
  color: var(--metal-gold-ink);
  background: linear-gradient(135deg, var(--metal-gold-light), var(--metal-gold) 55%, var(--metal-gold-deep));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--metal-gold) 25%, transparent);
}
.plan-bicycle .member-plan-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px color-mix(in srgb, var(--metal-gold) 35%, transparent); }
.plan-supercar .member-plan-cta {
  color: var(--metal-gold-light); background: var(--metal-black);
  border: 1px solid var(--metal-black-gold);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--metal-black-gold) 20%, transparent), 0 10px 30px color-mix(in srgb, var(--metal-black-gold) 22%, transparent);
}
.plan-supercar .member-plan-cta:hover { transform: translateY(-2px); background: var(--metal-black-soft); }

/* - 規格對比 - */
.member-compare {
  display: grid; grid-template-columns: minmax(150px, 0.9fr) repeat(3, minmax(0, 1.2fr));
  overflow: hidden; background: var(--site-panel);
  border: 1px solid var(--site-border); border-radius: var(--site-radius-lg);
}
.member-compare-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.member-compare-row + .member-compare-row { border-top: 1px solid var(--site-border); }
.member-compare-row > * { padding: 18px 20px; font-size: 14px; line-height: 1.5; }
.member-compare-row > .is-featured { background: color-mix(in srgb, var(--metal-titanium) 8%, transparent); }
.member-compare-row > .is-vip { background: color-mix(in srgb, var(--metal-black-gold) 7%, transparent); }
.member-compare-domain { font-weight: 600; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.member-compare-head > * {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 13px; letter-spacing: 0.1em;
}
.member-compare-head small { font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: 0; }
.member-compare-head > .is-vip small { color: var(--metal-gold-light); }
.member-compare-icon { font-size: 22px; letter-spacing: 0; margin-bottom: 4px; }
.member-compare-price > [role="cell"] { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 22px; }
.member-compare-price > .is-vip { color: var(--metal-gold-light); }
.member-compare-original {
  margin-right: 8px; font-size: 0.8em;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  text-decoration-color: var(--color-loss); text-decoration-thickness: 2px;
}
.member-compare-note { margin-top: var(--space-4); text-align: center; }

/* - Responsive - */
@media (max-width: 1023.98px) {
  .member-hero-inner { padding-block: 80px 40px; }
  .member-hero-title { font-size: 44px; }
  /* 平板改為單欄, 卡面在左、方案內容在右, 避免卡面放太大 */
  .member-plans { grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 760px; margin-inline: auto; }
  .member-plan { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; gap: 28px; padding: 28px; }
  .member-plan.is-featured, .member-plan.is-featured:hover, .member-plan:hover { transform: none; }
  .member-plan-body { min-height: 100%; }
  .member-plans-section { padding-top: 32px; }
  .member-trial { grid-template-columns: auto minmax(0, 1fr); max-width: 760px; margin-inline: auto; }
  .member-trial-cta { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 639.98px) {
  .member-hero-inner { padding-block: 52px 24px; }
  .member-hero-title { font-size: 30px; }
  /* 手機寬度放不下一行, 改為三個等級直排、箭頭朝下, 避免箭頭落在行首 */
  .member-route { flex-direction: column; gap: 2px; }
  .member-route-arrow { transform: rotate(90deg); font-size: 0.5em; }
  .member-hero-lead { font-size: 15px; }
  .member-trial { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px 18px; text-align: center; border-radius: 20px; }
  .member-trial-icon { margin-inline: auto; }
  .member-trial-title { font-size: 21px; }
  .member-trial-cta { white-space: normal; }
  .member-cycle { margin: 36px 0 32px; }
  .site .member-dialog { border-radius: 0; }
  .member-plans { gap: 36px; }
  /* 上內距預留熱銷標籤的高度, 三張卡一律相同, 卡面位置才一致 */
  .member-plan { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 28px 18px 18px; border-radius: 20px; }
  .member-plan-badge { font-size: 12px; }
  .member-card { padding: 16px 18px; }
  .member-plan-name { font-size: 24px; }
  .member-price-amount { font-size: 40px; }
  .member-price-original { font-size: 18px; }
  .member-plan-price { margin: var(--space-4) 0; }

  /* 手機的規格對比改為每個規格一張卡, 三個等級上下列出 */
  .member-compare { display: flex; flex-direction: column; gap: 12px; overflow: visible; background: none; border: 0; border-radius: 0; }
  .member-compare-row {
    display: block; padding: 16px; background: var(--site-panel);
    border: 1px solid var(--site-border); border-radius: var(--site-radius-md);
  }
  /* 每張規格卡已標示等級, 表頭列不再需要; 需放在列樣式之後才不會被 display: block 覆蓋 */
  .member-compare-row.member-compare-head { display: none; }
  .member-compare-row + .member-compare-row { border-top: 1px solid var(--site-border); }
  .member-compare-row > * { padding: 0; }
  .member-compare-row > .is-featured, .member-compare-row > .is-vip { background: none; }
  .member-compare-domain { margin-bottom: var(--space-2); font-size: 15px; color: var(--color-text); }
  .member-compare-row > [role="cell"] {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
    padding: 10px 0; text-align: right; border-top: 1px solid var(--site-border);
  }
  .member-compare-row > [role="cell"]::before {
    content: attr(data-tier); flex: none; text-align: left; font-size: 12px;
    font-family: var(--font-body); font-weight: 400; color: var(--color-muted);
  }
  .member-compare-price > [role="cell"] { font-size: 18px; }
}