/*
 * An offer card (`powerpack_offers`): Powerpack, or a free account, sold in
 * place of what the reader just met — the overview's estimates
 * (companies/keystats/_estimates_offer), the screener's cut results
 * (screeners/_offer). A caps label with its lock, a headline that names
 * what is on offer, a sentence or two, one button straight to signup or
 * Checkout (shared/_powerpack_offer_action) with what it costs under it,
 * and a quiet line about the rest.
 *
 * On the paper under a heavy rule, in the raised tint. `--raised` lifts it
 * off a table it sits over, with the overlay's shadow; `--quiet` is the
 * free account's beside Powerpack's, in the page's own paper.
 */
@layer components {
  .offer-card {
    display: grid;
    align-content: start;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border-block-start: var(--rule-heavy);
    background-color: var(--color-surface-raised);
    color: var(--color-ink);
    font-family: var(--font-prose);
  }

  .offer-card--raised {
    box-shadow: var(--shadow-overlay);
  }

  .offer-card--quiet {
    background-color: var(--color-surface);
  }

  .offer-card__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
  }

  .offer-card__headline {
    margin: 0;
  }

  .offer-card__lead {
    margin: 0;
    font-size: var(--text-prose);
    line-height: var(--leading-prose);
  }

  .offer-card__body {
    margin: 0;
    color: var(--color-ink-soft);
    font-size: var(--text-prose-sm);
    line-height: var(--leading-prose-sm);
  }

  .offer-card__button {
    justify-content: center;
    inline-size: 100%;
  }

  .offer-card__price,
  .offer-card__more {
    margin: 0;
    color: var(--color-ink-muted);
    font-family: var(--font-ui);
    font-size: var(--text-meta);
    line-height: var(--leading-meta);
  }
}