/* Products page specific styles */
.page-hero {
    padding: 60px 0 40px;
    background: linear-gradient(135deg, #EFF6FF 0%, #F8FAFC 100%);
    text-align: center;
}
.page-title { font-size: 2.5rem; font-weight: 700; margin-bottom: 16px; }
.page-subtitle { font-size: 1.1rem; color: var(--color-text-secondary); max-width: 720px; margin: 0 auto; }

.solutions-detail { padding: 64px 0; }
.solution-detail-card {
    display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px;
    align-items: center; padding: 48px 0;
    border-bottom: 1px solid var(--color-border);
}
.solution-detail-card:last-child { border-bottom: none; }
.solution-tag {
    display: inline-block; padding: 4px 12px;
    background: #DBEAFE; color: var(--color-primary);
    border-radius: 999px; font-size: .8rem; font-weight: 600;
    margin-bottom: 16px;
}
.solution-detail-title { font-size: 1.75rem; font-weight: 700; margin-bottom: 16px; }
.solution-detail-desc { font-size: 1.05rem; color: var(--color-text-secondary); margin-bottom: 24px; }
.solution-detail-features { list-style: none; margin-bottom: 32px; }
.solution-detail-features li {
    padding: 10px 0 10px 28px; position: relative;
    font-size: .95rem; color: var(--color-text-secondary); line-height: 1.6;
}
.solution-detail-features li::before {
    content: '✓'; position: absolute; left: 0; top: 10px;
    color: var(--color-success); font-weight: 700;
}
.solution-detail-features li strong { color: var(--color-text); }

/* Feature mockup */
.feature-mockup {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-md);
}
.mockup-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0; border-bottom: 1px solid var(--color-border-light);
}
.mockup-row:last-child { border-bottom: none; }
.mockup-label { font-size: .9rem; color: var(--color-text-secondary); }
.mockup-status {
    font-size: .8rem; font-weight: 600; padding: 4px 10px;
    border-radius: 999px;
}
.status-active { background: #DBEAFE; color: #1E40AF; }
.status-verified { background: #D1FAE5; color: #065F46; }
.status-pending { background: #FEF3C7; color: #92400E; }
.status-info { background: #F1F5F9; color: var(--color-text-secondary); }

@media (max-width: 1024px) {
    .solution-detail-card { grid-template-columns: 1fr; gap: 32px; }
    .solution-detail-visual { display: none; }
}
@media (max-width: 768px) {
    .page-title { font-size: 2rem; }
    .solution-detail-title { font-size: 1.4rem; }
}