/* =============================================================================
   solution.css — Solutions hub + solution landing pages. Async. Tokens only.
   ============================================================================= */

.pd-solution-hero__badge { margin: 0 0 var(--pd-space-4); }
.pd-solution-hero__intro { max-width: 70ch; margin: var(--pd-space-6) auto 0; color: var(--pd-on-dark-muted); }
.pd-solution-hero .pd-btn-row { margin-top: var(--pd-space-8); }

/* ---- Problem ---- */
.pd-solution-problem h2 { margin-bottom: var(--pd-space-6); }
.pd-solution-problem p { margin-bottom: var(--pd-space-4); }

/* ---- Solution (text + screenshot) ---- */
.pd-solution-solve__grid { display: grid; gap: var(--pd-space-8); align-items: center; }
.pd-solution-solve__text h2 { margin-block: var(--pd-space-2) var(--pd-space-4); }
.pd-solution-solve__text h2 .pd-badge { vertical-align: middle; margin-inline-start: var(--pd-space-3); }
.pd-solution-solve__pro { margin-top: var(--pd-space-4); }
.pd-solution-solve__text p .pd-badge { vertical-align: middle; margin-inline-end: var(--pd-space-2); }
@media (min-width: 900px) { .pd-solution-solve__grid { grid-template-columns: 1fr 1fr; gap: var(--pd-space-16); } }

/* ---- How it works ---- */
.pd-how { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pd-space-6); }
@media (min-width: 600px) { .pd-how { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .pd-how { grid-template-columns: repeat(4, 1fr); } }
.pd-how__step h3 { font-size: var(--pd-h3); margin-block: var(--pd-space-4) var(--pd-space-2); }
.pd-how__num { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--pd-radius-pill); background: var(--pd-grad-brand); color: var(--pd-white); font-family: var(--pd-font-display); font-weight: 700; }

.pd-solution-faq__cta { margin-top: var(--pd-space-12); }

/* ---- Hub cards ---- */
.pd-solutions-index__card { display: block; }
.pd-solutions-index__card h2 { font-size: var(--pd-h3); margin-bottom: var(--pd-space-3); }
.pd-solutions-index__card:hover { text-decoration: none; }
.pd-solutions-index__more { display: inline-flex; align-items: center; gap: .4rem; margin-top: var(--pd-space-4); color: var(--pd-violet); font-weight: 600; }
.pd-solutions-index__card:hover .pd-solutions-index__more { gap: .7rem; }
.pd-solutions-index__more-soon { margin-top: var(--pd-space-12); }