@layer components {
  .card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  .card-body { padding: var(--s6); }
  .card-header {
    padding: var(--s5) var(--s6);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
  }
  .card-header-title { font-size: 14px; font-weight: 600; color: var(--ink-900, var(--ink-950)); }
  .card-footer {
    padding: var(--s4) var(--s6);
    border-top: 1px solid var(--color-border);
    background: var(--ink-50);
    display: flex;
    gap: var(--s3);
    align-items: center;
  }

  /* Package / pricing card */
  .package-card {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--r-lg);
    padding: var(--s6);
    cursor: pointer;
    transition: border-color var(--transition-md), box-shadow var(--transition-md), transform var(--transition-md);
    position: relative;
  }
  .package-card:hover { border-color: var(--forest-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
  .package-card.selected { border-color: var(--forest-700); box-shadow: 0 0 0 3px var(--forest-100), var(--shadow-md); }
  .package-card .package-name { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--ink-950); }
  .package-card .package-price { font-size: 28px; font-weight: 600; color: var(--forest-700); line-height: 1; margin: var(--s3) 0 var(--s2); }
  .package-card .package-price-sub { font-size: 13px; color: var(--ink-400); font-weight: 400; }
  .package-card .package-desc { font-size: 13px; color: var(--ink-600); line-height: 1.5; }
  .package-check {
    position: absolute;
    top: var(--s4);
    right: var(--s4);
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--forest-700);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition);
  }
  .package-card.selected .package-check { opacity: 1; }

  /* Early bird ribbon */
  .early-bird-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--amber-50);
    border: 1px solid var(--amber-300);
    color: var(--amber-700);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: var(--r-full);
    margin-bottom: var(--s3);
  }
}