/* SEO landing pages (/x402-gift-cards-esims, /agent-spending-limits, /x402-llm-api).
   Built on style.css + dev.css components (hero, quick-steps, works-grid, code, term,
   mtable, band-dark, cta). Only what those two files do not have: section rhythm,
   grid modifiers, running text and the FAQ list. Same rules: Inter 400, hairline
   cards, no shadows, Emerald only where an action is taken. */

.lp-section { padding: 0 0 128px; }
.lp-section h3 { font-size: 24px; line-height: 1.17; margin: 48px 0 16px; }
.lp-text { color: var(--ash); max-width: 68ch; }
.lp-text a { color: var(--brand-ink); }
.lp-text + .lp-text { margin-top: 12px; }

/* works-grid variants for two- and four-card rows */
.works-grid.is-2 { grid-template-columns: 1fr 1fr; }
.works-grid.is-4 { grid-template-columns: repeat(4, 1fr); }

/* FAQ: hairline-separated questions, always visible (matches the FAQPage JSON-LD) */
.faq { border-bottom: 1px solid var(--hairline); }
.faq-item { border-top: 1px solid var(--hairline); padding: 24px 0; }
.faq-item h3 { font-size: 20px; line-height: 1.3; margin: 0 0 8px; }
.faq-answer { color: var(--ash); max-width: 68ch; }
.faq-answer a { color: var(--brand-ink); }

@media (max-width: 960px) {
  .works-grid.is-2, .works-grid.is-4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .lp-section { padding: 0 0 96px; }
  .works-grid.is-2, .works-grid.is-4 { grid-template-columns: 1fr; }
}