/* Product page layouts. Keep column counts in CSS so breakpoints can apply. */
.product-capabilities--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.product-capabilities--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    max-width: 1000px;
    margin: 0 auto;
}

.product-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    text-align: center;
}

.product-capabilities > *,
.product-benefits > *,
.product-metrics > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

.product-title { font-size: 3rem; }
.product-demo-title { font-size: 2.75rem; }
.product-cta-title { font-size: 2.5rem; }
.product-demo { padding: 60px; }

.product-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 1024px) {
    .product-capabilities,
    .product-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .product-capabilities,
    .product-benefits,
    .product-metrics {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .product-title { font-size: 2rem; }
    .product-demo-title,
    .product-cta-title { font-size: 1.75rem; }
    .product-demo { padding: 24px 16px; }

    .product-hero,
    .cta-section {
        overflow-wrap: anywhere;
    }

    .product-capabilities .pain-card,
    .product-benefits .pain-card {
        padding: 24px;
    }

    .product-actions {
        flex-direction: column;
    }
}