/* Pricing, FAQ and use-case pages. Colours, type and spacing come from tokens.css; shared pieces from styles.css and landing.css. */
.pp-hero { display: grid; justify-items: start; gap: var(--space-lg); max-width: 52rem; padding-block: var(--space-xxxl) var(--space-xl); }
.pp-hero .lede { max-width: 40rem; }
.pp-hero .lp-cta { margin-top: var(--space-sm); }
.pp-hero .hero-title em { font-style: normal; color: var(--accent-ink); }
.page-main > .pp-hero { padding-inline: 0; }

/* Pricing: questions beside their heading, like the other price sections */
.pp-faq-sec { align-items: start; }
.pp-faq { margin-top: 0; max-width: none; }

/* FAQ list */
.pp-faq-list { max-width: 52rem; margin-top: var(--space-xl); }
.pp-faq-list a { overflow-wrap: anywhere; }

/* Use cases */
.pp-lead { padding-block: var(--space-4xl); }
.pp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); margin-top: var(--space-xxl); }
.pp-cards article { display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-xl); border: var(--card-border-width) solid var(--line); border-radius: var(--radius-card); background: var(--card-fill); color: var(--ink-2); }
.pp-cards h3 { color: var(--ink); }
.pp-cards .go { align-self: end; margin-top: var(--space-xs); }
.pp-more { margin-top: var(--space-xxxl); }
.pp-band { margin-top: var(--space-4xl); }
.pp-band-card { margin-top: var(--space-5xl); border-radius: var(--radius-panel); }
.pp-band-card .cta-band { padding: var(--space-xxxl) var(--space-xxl); }

@media (max-width: 48rem) {
  .pp-cards { grid-template-columns: minmax(0, 1fr); }
  .pp-hero { padding-block: var(--space-xxl) var(--space-md); }
}