.solution-hero {
    padding: 64px 0 56px;
    border-bottom: 1px solid var(--color-line);
    background: var(--color-paper);
}

.solution-hero__inner {
    max-width: 900px;
}

.solution-hero h1 {
    max-width: 760px;
    margin-bottom: 20px;
    font-size: clamp(2.25rem, 4vw, 3.25rem);
}

.solution-hero__lead {
    max-width: 720px;
    margin: 0 0 28px;
    color: var(--color-muted);
    font-size: clamp(1.125rem, 1.7vw, 1.25rem);
    line-height: 1.55;
}

.solution-section {
    padding: 72px 0;
}

.solution-section--surface {
    background: var(--color-surface);
}

.solution-section--ink {
    color: var(--color-paper);
    background: var(--color-dark-surface);
}

.solution-section__inner {
    max-width: 1080px;
}

.solution-section__intro {
    max-width: 760px;
    margin-bottom: 32px;
    color: var(--color-muted);
}

.solution-section--ink .solution-section__intro,
.solution-section--ink .solution-card,
.solution-section--ink .solution-card p {
    color: var(--color-paper);
}

.solution-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.solution-card {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-paper);
}

.solution-card h3 {
    margin-bottom: 10px;
}

.solution-card p:last-child {
    margin-bottom: 0;
    color: var(--color-muted);
}

.solution-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    counter-reset: step;
}

.solution-steps > div {
    min-width: 0;
    padding-top: 14px;
    border-top: 3px solid var(--color-electric-cyan);
}

.solution-steps strong::before {
    display: block;
    margin-bottom: 8px;
    color: var(--color-brand);
    font-size: .8rem;
    content: '0' counter(step);
    counter-increment: step;
}

.solution-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.solution-links a {
    font-weight: 700;
    text-decoration: none;
}

.solution-cta {
    padding: 40px;
    border-radius: var(--radius);
    color: var(--color-paper);
    background: var(--color-primary-navy);
}

.solution-cta h2 {
    color: inherit;
}

.solution-cta p {
    max-width: 700px;
    color: inherit;
}

@media (max-width: 780px) {
    .solution-hero { padding: 44px 0 40px; }
    .solution-hero h1 { font-size: clamp(2rem, 9vw, 2.4rem); }
    .solution-section { padding: 52px 0; }
    .solution-grid,
    .solution-steps,
    .solution-links { grid-template-columns: 1fr; }
    .solution-cta { padding: 28px 22px; }
}