.commercial__hero { max-width: 58rem; padding-bottom: 2rem; }
.commercial__hero .hero__headline { max-width: 54rem; }
.commercial__note { font-size: .88rem; color: var(--color-text-muted); margin: 1rem 0 0; }
.commercial__section { padding: 2.5rem 0; border-top: 1px solid var(--color-border); }
.commercial__section > h2 { max-width: 48rem; }
.commercial__section .prose { max-width: 48rem; }
.commercial__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.75rem; }
.commercial__card { display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid var(--color-border); border-top: 2px solid var(--color-accent-cyan); background: var(--color-panel); color: var(--color-text); }
.commercial__card:hover, .commercial__card:focus-visible { border-color: var(--color-accent); color: var(--color-text); text-decoration: none; }
.commercial__card p { font-size: .96rem; }
.commercial__card-link { margin-top: auto; color: var(--color-accent); font-size: .9rem; }
.commercial__closing { padding: 2rem; background: var(--color-panel); border-left: 3px solid var(--color-accent); margin-top: 1.5rem; }
.commercial__closing > p { max-width: 46rem; }
@media (max-width: 760px) {
    .commercial__cards { grid-template-columns: 1fr; }
    .commercial__hero .hero__headline { font-size: clamp(2rem, 8vw, 2.75rem); }
    .commercial__closing { padding: 1.5rem; }
    .commercial .btn { white-space: normal; text-align: center; }
}