/*
 * /pricing (pricing/show): a heading and a sentence, the monthly/annual
 * switch, then the plans — the three-tier table (components/pricing-table.css)
 * once the paywall has moved, the Powerpack panel (components/powerpack.css)
 * before — the fine print, and the questions. One centred column; the table
 * takes the page's full width, the panel a card's.
 */
@layer pages {
  .pricing {
    display: grid;
    justify-items: center;
    gap: var(--space-xl);
    max-inline-size: 60rem;
    margin-inline: auto;
  }

  .pricing__head {
    display: grid;
    justify-items: center;
    gap: var(--space-md);
    text-align: center;

    & .heading {
      margin-block-end: 0;
    }
  }

  .pricing__lead {
    max-inline-size: 36rem;
    color: var(--color-ink-soft);
    font-size: var(--text-ui);
    line-height: 1.5;
  }

  .pricing .pricing-table {
    inline-size: 100%;
  }

  .pricing__plans {
    display: grid;
    gap: var(--space-md);
    inline-size: 100%;
    max-inline-size: 24rem;
  }

  .pricing__fine-print {
    max-inline-size: 36rem;
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
    line-height: 1.5;
    text-align: center;
  }

  .pricing__faq {
    inline-size: 100%;
    max-inline-size: 44rem;

    & .card {
      padding-block: var(--space-2xs);
    }
  }
}