@layer components {
  .course__price {
    margin-block: var(--block-space);
    font-size: var(--text-large);
    font-weight: 600;
    color: var(--color-brand-strong);
  }
  .course__price--free { color: var(--color-clay); }
  .course__pricing { margin-block: var(--block-space); }
  .course__pricing .course__price { margin-block: 0; }

  /* The period's name (e.g. Early bird) trailing the price, in a quieter, lighter weight. */
  .course__price-label {
    margin-inline-start: 0.5em;
    font-size: var(--text-small);
    font-weight: 400;
    color: var(--color-muted);
  }

  /* The hero price's deadline — the early-bird hook ("until 15/08"): a small chip so it reads
     as time pressure, not fine print. */
  .course__price-until {
    display: inline-block;
    margin-inline-start: 0.5em;
    padding: 0.1em 0.5em;
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--color-clay);
    background: color-mix(in oklab, var(--color-clay) 12%, transparent);
    border-radius: var(--radius-small);
    vertical-align: middle;
  }

  /* Upcoming tiers — secondary to the price on offer now: a plain muted list under the hero,
     each tier stating its price and from when. */
  .course__upcoming {
    list-style: none;
    margin-block: 0.35em 0;
    padding-inline-start: 0;
    color: var(--color-muted);
  }
  .course__upcoming-tier { margin-block: 0.15em; font-size: var(--text-small); }
  .course__upcoming-price { font-weight: 600; color: var(--color-text); }
  .course__price-when { margin-inline-start: 0.5em; color: var(--color-subtle); }

  .course-enroll__status {
    margin-block: var(--block-space);
    font-weight: 600;
  }
  .course-enroll__status.is-open { color: var(--color-brand-strong); }
  .course-enroll__status.is-closed,
  .course-enroll__status.is-soon,
  .course-enroll__status.is-ended { color: var(--color-muted); }
}