/* Commercial pages share the site's existing coast, ink, type and components. */
.solution-body { padding-block: 2rem 5rem; }
.solutions-page .page-window .display { max-width: 19ch; font-size: clamp(2.3rem, 4.8vw, 5.3rem); }
.solutions-page .page-lede { max-width: 46em; }
.solution-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; }
.solution-card { min-width: 0; display: flex; flex-direction: column; gap: 1rem; padding: clamp(22px, 3vw, 38px); background: var(--ink-deep); border: 1px solid var(--rule); text-decoration: none; transition: border-color .2s; }
.solution-card:hover, .solution-card:focus-visible { border-color: var(--peach); }
.solution-card h2, .solution-card h3 { font-family: var(--display); font-stretch: 112%; font-size: clamp(1.35rem, 2vw, 1.85rem); font-weight: 500; color: var(--white); line-height: 1.2; }
.solution-card p { color: var(--muted); line-height: 1.6; }
.solution-card-action { color: var(--peach); font-family: var(--mono); font-size: .75rem; padding-top: .8rem; margin-top: auto; }
.solution-prose { max-width: 900px; margin-top: 3rem; }
.solution-section { padding-block: 2.2rem; border-top: 1px solid var(--rule); }
.solution-section h2, .solution-cta h2 { font-family: var(--display); font-stretch: 112%; font-weight: 500; color: var(--white); font-size: clamp(1.5rem, 2.5vw, 2.4rem); line-height: 1.2; margin-bottom: 1.2rem; }
.solution-section p, .solution-section li { color: var(--text); font-size: 1.05rem; line-height: 1.75; max-width: 68ch; }
.solution-section p + p, .solution-section p + ul { margin-top: 1rem; }
.solution-section ul { list-style: disc; padding-left: 1.3rem; }
.solution-section li + li { margin-top: .65rem; }
.solution-section .text-link { font-size: .95rem; }
.solution-related { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.solution-related > .overline { margin-bottom: 1.5rem; }
.solution-related .solution-card h2 { font-size: 1.35rem; }
.solution-cta { margin-top: 3rem; padding: clamp(24px, 4vw, 52px); background: var(--ink-2); border: 1px solid var(--rule); }
.solution-cta p { color: var(--muted); margin-bottom: 1.5rem; max-width: 48em; }
.solution-faq { border-bottom: 1px solid var(--rule); padding-block: 1.1rem; }
.solution-faq summary, .report-definitions summary { cursor: pointer; color: var(--white); font-weight: 500; }
.solution-faq p { padding-top: 1rem; }
.solution-comparison, .report-table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.solutions-page .table-scroll { max-width: 100%; overflow-x: auto; }
.solution-comparison caption, .report-table caption { text-align: left; color: var(--muted); font-family: var(--mono); font-size: .75rem; padding-block: 1rem; }
.solution-comparison th, .solution-comparison td, .report-table th, .report-table td { padding: 1rem; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; }
.solution-comparison th, .report-table th { color: var(--white); font-weight: 500; }
.solution-comparison td { min-width: 170px; color: var(--text); line-height: 1.6; }
.audience-paths { padding-block: 1rem 4rem; }
.audience-paths > .overline { margin-bottom: 1.5rem; }
.audience-proof { color: var(--muted); margin-top: 1.5rem; line-height: 1.6; }
.audience-proof a { color: var(--white); text-underline-offset: .25em; }
/* Navigation remains usable as the content library grows. */
.page-nav { gap: 20px; padding-right: 20px; }
@media (max-width: 1199px) {
  .page-header-row { flex-wrap: wrap; row-gap: 6px; }
  .page-header .header-cta { margin-left: auto; }
  .page-nav { order: 3; width: 100%; margin-left: 0; flex-wrap: wrap; column-gap: 22px; row-gap: 0; border-right: 0; padding-right: 0; }
  .content-page [id] { scroll-margin-top: 140px; }
}
@media (max-width: 600px) {
  .page-nav { column-gap: 16px; }
  .page-nav a { letter-spacing: .1em; font-size: .58rem; }
  .solution-body { padding-bottom: 3rem; }
}
@media (prefers-reduced-motion: reduce) { .solution-card { transition: none; } }

.site-nav .nav-panel { max-height: calc(100svh - 100px); overflow-y: auto; }
@media (max-width: 380px) {
  .hero-copy .overline { flex-wrap: wrap; row-gap: .6em; }
  .compare-col { min-width: 0; }
  .compare .figure { font-size: 2.5rem; }
}