/* ============================================================================
   compare.css — Veriroo vs [competitor] pages + /compare/ hub
   Built entirely on --vr-* brand tokens (brand-tokens.css), so it follows
   the site's dark-default / light opt-in theming automatically.
   ============================================================================ */

/* ---------- hero ---------- */
.vr-compare-hero .vr-section-lead em{
  font-style:italic;color:var(--vr-text);
}

/* ---------- 30-second box ---------- */
.vr-compare-tldr{
  background:var(--vr-card);border:1px solid var(--vr-border);
  border-radius:var(--vr-radius-lg);padding:var(--vr-space-lg);
}
.vr-compare-tldr h2{font-size:1.1rem;margin:0 0 var(--vr-space-sm)}
.vr-compare-tldr p{margin:var(--vr-space-sm) 0;color:var(--vr-text-muted)}
.vr-compare-tldr strong{color:var(--vr-text)}

/* ---------- receipts (signature element) ---------- */
.vr-receipts{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--vr-space-lg);
  align-items:start;margin:var(--vr-space-lg) 0;
}
@media(max-width:720px){.vr-receipts{grid-template-columns:1fr}}
.vr-receipt{
  background:var(--vr-surface-alt);border:1px solid var(--vr-border);
  border-radius:var(--vr-radius-md);position:relative;
  font-family:'Courier New',ui-monospace,monospace;
  padding:var(--vr-space-lg) var(--vr-space-md) var(--vr-space-md);
}
.vr-receipt--vr{border-color:var(--vr-primary)}
.vr-receipt h3{
  font-family:var(--vr-font-body);font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;text-align:center;color:var(--vr-text-muted);
  border-bottom:1px dashed var(--vr-border);padding-bottom:var(--vr-space-sm);
  margin:0 0 var(--vr-space-sm);
}
.vr-receipt table{width:100%;border-collapse:collapse;font-size:.92rem}
.vr-receipt td{padding:.3rem 0;color:var(--vr-text)}
.vr-receipt td:last-child{text-align:right;white-space:nowrap}
.vr-receipt tr.minus td{color:var(--vr-danger)}
.vr-receipt tr.incl td{color:var(--vr-text-muted)}
.vr-receipt tr.total td{
  border-top:1px dashed var(--vr-border);padding-top:.6rem;
  font-weight:700;font-size:1.1rem;
}
.vr-receipt tr.total.win td{color:var(--vr-trust-verified)}
.vr-receipt .vr-receipt-note{
  font-family:var(--vr-font-body);font-size:.75rem;color:var(--vr-text-faint);
  text-align:center;margin-top:var(--vr-space-sm);
}
.vr-receipt-stamp{position:absolute;top:10px;right:10px;width:56px;height:56px;transform:rotate(8deg)}
.vr-compare-receipt-caption{color:var(--vr-text-muted);max-width:62ch}

/* ---------- comparison table ---------- */
.vr-compare-tablewrap{overflow-x:auto;border:1px solid var(--vr-border);border-radius:var(--vr-radius-lg);background:var(--vr-card)}
.vr-compare-table{width:100%;border-collapse:collapse;min-width:640px;font-size:.93rem}
.vr-compare-table th,.vr-compare-table td{
  padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--vr-border);vertical-align:top;color:var(--vr-text);
}
.vr-compare-table thead th{
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--vr-text-muted);background:var(--vr-surface-alt);
}
.vr-compare-table thead th:nth-child(2){color:var(--vr-primary)}
.vr-compare-table tbody tr:last-child td{border-bottom:none}
.vr-compare-table td.vr-yes{color:var(--vr-trust-verified);font-weight:600}
.vr-compare-table td.vr-no{color:var(--vr-trust-self)}
.vr-compare-table td.vr-rowlabel{font-weight:600}
.vr-compare-table tr.vr-concede td{background:color-mix(in srgb, var(--vr-warning) 8%, transparent)}
.vr-compare-verified-note{font-size:.78rem;color:var(--vr-text-faint);margin-top:var(--vr-space-sm)}

/* ---------- honest section ---------- */
.vr-compare-honest{
  background:var(--vr-card);border:1px solid var(--vr-border);
  border-left:3px solid var(--vr-warning);
  border-radius:var(--vr-radius-md);padding:var(--vr-space-lg);
}
.vr-compare-honest h2{margin:0 0 var(--vr-space-sm);font-size:1.3rem}
.vr-compare-honest p{color:var(--vr-text-muted);max-width:66ch;margin:0}

/* ---------- trust section ---------- */
.vr-compare-trust{
  background:var(--vr-bg-elevated);border:1px solid var(--vr-border);
  border-radius:var(--vr-radius-lg);padding:var(--vr-space-xl) var(--vr-space-lg);
}
.vr-compare-trust h2{margin-top:0}
.vr-compare-trust>p{color:var(--vr-text-muted);max-width:62ch}
.vr-compare-trust ul{
  list-style:none;margin:var(--vr-space-lg) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--vr-space-md);
}
.vr-compare-trust li{
  background:var(--vr-card);border:1px solid var(--vr-border);
  border-radius:var(--vr-radius-md);padding:var(--vr-space-md);font-size:.92rem;color:var(--vr-text-muted);
}
.vr-compare-trust li strong{display:block;color:var(--vr-text);margin-bottom:.25rem}

/* ---------- movement / founding ---------- */
.vr-compare-motto{
  font-family:var(--vr-font-heading);font-style:italic;font-size:1.3rem;
  color:var(--vr-text);margin-top:var(--vr-space-lg);
}
.vr-compare-founding{
  margin-top:var(--vr-space-lg);display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--vr-space-lg);background:var(--vr-surface-alt);
  border:1px solid var(--vr-primary);border-radius:var(--vr-radius-lg);
  padding:var(--vr-space-lg);
}
.vr-compare-founding p{margin:0;max-width:46ch;font-size:.95rem;color:var(--vr-text-muted)}

/* ---------- FAQ ---------- */
.vr-compare-faq details{
  background:var(--vr-card);border:1px solid var(--vr-border);
  border-radius:var(--vr-radius-md);padding:var(--vr-space-md);margin-bottom:var(--vr-space-sm);
}
.vr-compare-faq summary{font-weight:600;cursor:pointer;color:var(--vr-text)}
.vr-compare-faq details p{margin:.6rem 0 0;color:var(--vr-text-muted);max-width:66ch}

/* ---------- hub: competitor picker ---------- */
.vr-compare-picker-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--vr-space-sm);
  margin-top:var(--vr-space-lg);
}
.vr-compare-pick{
  background:var(--vr-card);border:1px solid var(--vr-border);
  border-radius:var(--vr-radius-md);padding:var(--vr-space-md);text-align:left;
  cursor:pointer;color:var(--vr-text);font-family:var(--vr-font-body);
  transition:border-color .15s,transform .15s;
}
.vr-compare-pick:hover{transform:translateY(-2px);border-color:var(--vr-primary)}
.vr-compare-pick[aria-pressed="true"]{border-color:var(--vr-primary);background:var(--vr-surface-alt)}
.vr-compare-pick .vr-pick-name{font-family:var(--vr-font-heading);font-size:1.05rem;display:block}
.vr-compare-pick .vr-pick-fee{font-size:.75rem;color:var(--vr-trust-self);font-weight:600}
.vr-compare-quick{
  margin-top:var(--vr-space-md);background:var(--vr-card);
  border:1px solid var(--vr-primary);border-radius:var(--vr-radius-lg);
  padding:var(--vr-space-lg);display:none;
}
.vr-compare-quick.open{display:block;animation:vrq .3s ease}
@keyframes vrq{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.vr-compare-quick.open{animation:none}}
.vr-compare-quick h3{margin:0}
.vr-quick-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--vr-space-md);margin-top:var(--vr-space-md)}
@media(max-width:600px){.vr-quick-row{grid-template-columns:1fr}}
.vr-quick-col{border:1px solid var(--vr-border);border-radius:var(--vr-radius-md);padding:var(--vr-space-md);font-size:.9rem;color:var(--vr-text-muted)}
.vr-quick-col h4{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--vr-text-muted);margin:0 0 .4rem;font-family:var(--vr-font-body)}
.vr-quick-col.win{border-color:var(--vr-primary);background:var(--vr-surface-alt)}
.vr-quick-col.win h4{color:var(--vr-primary)}
.vr-quick-col ul{list-style:none;margin:0;padding:0}
.vr-quick-col li{padding:.15rem 0}
.vr-quick-cta{margin-top:var(--vr-space-md);display:flex;gap:var(--vr-space-md);flex-wrap:wrap;align-items:center}
.vr-quick-keep{font-family:var(--vr-font-heading);font-size:1rem;color:var(--vr-trust-verified)}

/* ---------- hub cards ---------- */
.vr-compare-cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:var(--vr-space-md);margin-top:var(--vr-space-lg);
}
.vr-compare-card{
  background:var(--vr-card);border:1px solid var(--vr-border);
  border-radius:var(--vr-radius-lg);padding:var(--vr-space-lg);
  text-decoration:none;color:var(--vr-text);display:flex;flex-direction:column;
  gap:var(--vr-space-sm);transition:transform .15s,border-color .15s;
}
.vr-compare-card:hover{transform:translateY(-3px);border-color:var(--vr-primary)}
.vr-compare-card h3{margin:0;font-size:1.15rem}
.vr-compare-card .vr-card-fee{font-size:.8rem;color:var(--vr-trust-self);font-weight:600}
.vr-compare-card p{margin:0;font-size:.9rem;color:var(--vr-text-muted)}
.vr-compare-card .vr-card-go{margin-top:auto;color:var(--vr-primary);font-weight:600;font-size:.9rem}
.vr-compare-card.soon{opacity:.55;pointer-events:none}