.card{
  background:var(--color-background);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:box-shadow .3s var(--ease-out), transform .3s var(--ease-out)
}
.card:hover{
  box-shadow:0 12px 40px -12px rgba(17,17,17,.15);
  transform:translateY(-4px)
}
.card img{aspect-ratio:16/10;object-fit:cover;width:100%}
.card-body{padding:1.75rem}

.card--dark{
  background:var(--color-primary);
  color:#fff;
  border:none
}
.card--dark .btn--primary{
  background:#fff;
  color:var(--color-primary);
  border-color:#fff
}
.card--dark .btn--primary:hover{
  background:var(--color-surface);
  color:var(--color-primary);
  border-color:var(--color-surface)
}
.card--dark .btn--secondary{
  border-color:#fff;
  color:#fff
}
.card--dark .btn--secondary:hover{
  background:#fff;
  color:var(--color-primary)
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:var(--color-surface);
  color:var(--color-primary);
  border:1px solid var(--color-border);
  border-radius:var(--radius-pill);
  padding:.375rem .875rem;
  font-size:var(--fs-caption);
  font-weight:400;
  letter-spacing:0.04em;
  text-transform:uppercase
}

.tag{
  background:var(--color-surface);
  color:var(--color-primary);
  padding:.35rem .8rem;
  border-radius:var(--radius-pill);
  font-size:var(--fs-caption);
  font-weight:400;
  letter-spacing:0.04em;
}

.fee-table{width:100%;border-collapse:collapse;background:var(--color-background);border-radius:var(--radius-lg);overflow:hidden}
.fee-table th,.fee-table td{padding:1rem 1.2rem;text-align:left;border-bottom:1px solid var(--color-border)}
.fee-table th{font-family:var(--font-display);background:var(--color-primary);color:#fff;font-weight:400}