/* The plans on the front page: three cards, one price each. The free and the
   monthly card are quiet; the year's plan stands in the middle, lifted above
   the row on the dark surface, and carries the badge and the box saying what it
   saves. It restates its colours through the tokens it reads rather than
   overriding each declaration, so the dark theme needs nothing of its own. */

@layer components {
  .home-plans {
    display: grid;
    gap: 1.25rem;
    margin-block-start: 3rem;

    @media (width >= 768px) {
      align-items: start;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* The card lays out as a column so the button sits at the foot, level
     across the row however many lines the list above it runs to. */
  .home-plan {
    --plan-ink: var(--color-ink);
    --plan-ink-quiet: var(--color-ink-secondary);
    --plan-mark: var(--color-brand);
    --plan-rule: var(--color-border-subtle);

    background: var(--color-surface-tint);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-xl);
    color: var(--plan-ink);
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    padding: 1.75rem 1.5rem;
  }

  /* The year's price is the one being recommended, so it is the dark card of
     the three and rises above them where there is a row to rise out of. */
  .home-plan--featured {
    --plan-ink: var(--color-ink-inverted);
    --plan-ink-quiet: var(--color-ink-inverted-muted);
    --plan-mark: var(--color-ink-inverted);
    --plan-rule: oklch(from var(--color-ink-inverted) l c h / 25%);

    background: var(--color-surface-inverted);
    border-color: transparent;
    box-shadow: var(--shadow-lifted);

    @media (width >= 768px) {
      margin-block: -2.25rem 0;
      padding-block: 2.25rem;
    }
  }

  .home-plan__name {
    align-items: center;
    background: var(--color-surface);
    border-radius: var(--radius-pill);
    color: var(--color-ink);
    display: flex;
    font-size: 0.8125rem;
    font-weight: 700;
    gap: 0.375rem;
    margin: 0 0 1.25rem;
    padding: 0.3125rem 0.875rem;
    width: fit-content;
  }

  /* The badge on the dark card is the brand as a surface, so it reads as the
     recommendation rather than as another white pill. */
  .home-plan--featured .home-plan__name {
    background: var(--color-brand-fill);
    color: var(--color-ink-inverted);
  }

  .home-plan__price {
    align-items: baseline;
    display: flex;
    font-size: 2.5rem;
    font-weight: 700;
    gap: 0.375rem;
    letter-spacing: -0.02em;
    margin: 0 0 0.875rem;
  }

  .home-plan__period {
    color: var(--plan-ink-quiet);
    font-size: 0.875rem;
    font-weight: 400;
  }

  .home-plan__text {
    color: var(--plan-ink-quiet);
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0 0 1.25rem;
  }

  /* What the year saves, in the one place on the dark card that is lighter
     than it: the figure first, the arithmetic under it. */
  .home-plan__save {
    background: var(--color-brand-fill);
    border-radius: var(--radius-md);
    margin: 0 0 1.25rem;
    padding: 0.75rem 0.875rem;

    & b {
      display: block;
      font-size: 0.9375rem;
      font-weight: 700;
    }

    & span {
      color: oklch(from var(--color-ink-inverted) l c h / 80%);
      display: block;
      font-size: 0.8125rem;
      line-height: 1.5;
      margin-block-start: 0.125rem;
    }
  }

  .home-plan__list {
    border-block-start: 1px solid var(--plan-rule);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 1.25rem 0 0;
  }

  .home-plan__item {
    display: flex;
    font-size: 0.875rem;
    gap: 0.625rem;
    line-height: 1.5;
  }

  .home-plan__mark {
    color: var(--plan-mark);
    flex-shrink: 0;
    margin-block-start: 0.125rem;
  }

  /* The featured card's marks sit in a ring, so they read as marks against
     the dark rather than as ticks floating on it. */
  .home-plan--featured .home-plan__mark {
    background: oklch(from var(--color-ink-inverted) l c h / 22%);
    block-size: 1.125rem;
    border-radius: var(--radius-pill);
    inline-size: 1.125rem;
    margin-block-start: 0;
    padding: 0.125rem;
  }

  /* The button takes its colour from the primitive it carries — outline on the
     quiet cards, the brand as a surface on the recommended one — so the plan
     only has to say it spans the card and sits at its foot. */
  .home-plan__cta {
    align-self: end;
    justify-content: center;
    width: 100%;
  }
}