.wf-compare { --wf-primary:#C8102E; --wf-accent:#111827; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; border:1px solid #e5e7eb; border-radius:16px; overflow:hidden; }
.wf-compare .wf-billing-toggle { display:flex; gap:8px; padding:10px; justify-content:flex-end; background:#fff; border-bottom:1px solid #e5e7eb; }
.wf-compare .wf-toggle { background:#f3f4f6; border:1px solid #e5e7eb; border-radius:999px; padding:6px 12px; font-weight:600; cursor:pointer; }
.wf-compare .wf-toggle.is-active { background:var(--wf-primary); color:#fff; border-color:var(--wf-primary); }
.wf-compare .wf-head { display:grid; grid-template-columns: minmax(160px, 1fr) repeat(var(--wf-cols,3), minmax(180px, 1fr)); background:#f9fafb; border-bottom:1px solid #e5e7eb; }
.wf-compare .wf-body { display:block; }
.wf-compare .wf-row { display:grid; grid-template-columns: minmax(160px, 1fr) repeat(var(--wf-cols,3), minmax(180px, 1fr)); border-bottom:1px solid #f3f4f6; }
.wf-compare .wf-cell { padding:16px; display:flex; align-items:center; justify-content:center; text-align:center; position:relative; }
.wf-compare .wf-feature-header { font-weight:700; }
.wf-compare .wf-feature { justify-content:flex-start; text-align:left; font-weight:600; color:#111827; }
.wf-compare .wf-col-head { background:#fff; border-left:1px solid #e5e7eb; display:flex; flex-direction:column; gap:6px; }
.wf-compare .wf-badge { position:absolute; top:8px; right:8px; background:var(--wf-primary); color:#fff; font-size:12px; padding:4px 8px; border-radius:999px; }
.wf-compare .wf-plan-name { font-weight:800; font-size:18px; color:#111827; }
.wf-compare .wf-plan-sub { font-size:13px; color:#6b7280; }
.wf-compare .wf-price { font-size:22px; font-weight:800; color:var(--wf-accent); }
.wf-compare .wf-price-year { display:none; } /* default month */
.wf-compare.wf-billing-year .wf-price-month { display:none; }
.wf-compare.wf-billing-year .wf-price-year { display:inline; }
.wf-compare .wf-btn { display:inline-block; padding:10px 14px; border-radius:10px; background:var(--wf-primary); color:#fff; text-decoration:none; font-weight:700; outline: none; }
.wf-compare .wf-btn:focus { box-shadow:0 0 0 3px rgba(200,16,46,.35); }
.wf-compare .wf-ic { width:22px; height:22px; fill: var(--wf-primary); }
.wf-compare .wf-col-head.wf-highlight { background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.06); border-radius: 14px; transform: translateY(-2px); }
.wf-compare .wf-body .wf-row .wf-highlight { background: rgba(200,16,46,.04); }
.wf-compare .wf-highlight { outline: none; box-shadow: none; }
.wf-compare [data-tooltip]{ cursor:help; }
.wf-compare [data-tooltip]:hover::after{ content:attr(data-tooltip); position:absolute; left:16px; bottom:100%; transform:translateY(-8px); max-width:280px; background:#111827; color:#fff; padding:8px 10px; border-radius:8px; font-size:12px; z-index:5; }
.wf-cards { display:none; }
@media (max-width: 900px) {
  .wf-compare .wf-head, .wf-compare .wf-row { display:none; }
  .wf-compare { border:none; }
  .wf-cards { display:grid; gap:16px; }
  .wf-card { border:1px solid #e5e7eb; border-radius:16px; padding:16px; background:#fff; }
  .wf-card .wf-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
  .wf-card .wf-card-title { font-weight:800; font-size:18px; }
  .wf-card .wf-card-sub { font-size:13px; color:#6b7280; }
  .wf-card .wf-card-badge { background:var(--wf-primary); color:#fff; font-size:12px; padding:4px 8px; border-radius:999px; }
  .wf-card .wf-price { margin-top:8px; }
  .wf-card ul { margin:12px 0; padding-left:18px; }
  .wf-card li { margin:6px 0; }
  .wf-card .wf-btn { display:inline-block; margin-top:8px; text-align:center; width:100%; }
}