/* Section Spacing - Unified 8pt-based vertical rhythm */
#product {
    padding: 5rem 0;
    /* py-20: consistent with other sections */
}

#pricing {
    padding: 6rem 0;
}

/* Tighter spacing for the product section title to match other sections */
#product .section-title {
    margin-bottom: 1rem;
}

.feature-card,
.pricing-card {
    margin-bottom: 2rem;
}

/* Feature Section Styles */
#product {
    background: var(--bg-body);
    position: relative;
    overflow: hidden;
}

[data-theme="light"] #product {
    background: linear-gradient(180deg, #fbfdfe 0%, #f9fafb 100%);
}

/* No hairline between Product and Capabilities; rely on tonality + whitespace */
#capabilities {
    border-top: 0;
}

.feature-card {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 2px 6px rgba(17, 24, 39, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    padding: 2rem;
    border-radius: 1rem;
}

.feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 18px rgba(17, 24, 39, 0.10);
}

.feature-card h3 {
    /* Match headline accent to premium indigo→purple */
    background: linear-gradient(90deg, #4338ca, #6b46c1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Neutral card style to match draft aesthetics */
.advantage-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    /* gray-200 */
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
    padding: 2rem;
    border-radius: 1rem;
}

.advantage-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 18px rgba(17, 24, 39, 0.10);
    border-color: rgba(229, 231, 235, 1);
}

[data-theme="dark"] .advantage-card:hover {
    border-color: rgba(148, 163, 184, 0.7);
    box-shadow: 0 20px 45px -28px rgba(15, 23, 42, 0.95);
}

/* Understated variant for Product feature cards (outline-only) */
.product-card {
    background: transparent;
    /* outline-only, no fill */
    border-color: rgba(17, 24, 39, 0.10);
    /* light outline */
    box-shadow: none;
    /* no elevation */
}

.product-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -24px rgba(17, 24, 39, 0.28);
    /* subtle lift without darkening */
    border-color: rgba(79, 70, 229, 0.18);
    /* subtle indigo tint */
}

/* Gentle icon accent for product cards */
.advantage-card.product-card .feature-icon svg,
.advantage-card.product-card .feature-icon i {
    color: #6366f1;
    /* indigo-500 */
}

.advantage-card.product-card:hover .feature-icon svg,
.advantage-card.product-card:hover .feature-icon i {
    color: #4f46e5;
    /* indigo-600 */
}

.advantage-card h3 {
    color: var(--text-main);
    /* gray-900 */
    letter-spacing: -0.01em;
}

.feature-icon {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    /* slightly tighter under-heading spacing for product cards */
}

/* Product: rely on .feature-icon gap; remove UA default top margin on first paragraph */
#product .advantage-card p {
    margin-top: 0;
}

/* Card typography harmonization — Product and Capabilities */
/* Mobile defaults: headings 16/semibold; body 14 with comfortable line-height */
#product .advantage-card h3,
#capabilities .advantage-card h3 {
    font-size: 1rem;
    /* 16px */
}

/* Product card titles: thinner than bold for calmer hierarchy */
#product .advantage-card h3 {
    font-weight: 600;
}

#product .advantage-card p,
#capabilities .advantage-card p {
    font-size: 0.875rem;
    /* 14px */
    line-height: 1.6;
    color: var(--text-secondary);
    /* gray-700 for better readability vs. bold titles */
}

/* md+ viewports: headings 18/semibold; body 15 for dense, readable copy */
@media (min-width: 768px) {

    #product .advantage-card h3,
    #capabilities .advantage-card h3 {
        font-size: 1.125rem;
        /* 18px */
    }

    #product .advantage-card h3 {
        font-weight: 600;
    }

    #product .advantage-card p,
    #capabilities .advantage-card p {
        font-size: 0.9375rem;
        /* 15px */
        line-height: 1.6;
        color: var(--text-secondary);
        /* ensure darker tone on md+ as well */
    }
}

.feature-icon svg {
    width: 1.5rem;
    /* 24px to match lucide w-6 h-6 */
    height: 1.5rem;
    margin-right: 0;
    /* gap handles spacing */
}

/* Subtle icon tint on hover for premium, restrained interactivity */
.advantage-card .feature-icon svg,
.advantage-card .feature-icon i {
    color: var(--text-muted);
    /* gray-600 */
    transition: color 0.18s ease;
}

.advantage-card:hover .feature-icon svg,
.advantage-card:hover .feature-icon i {
    color: #4f46e5;
    /* indigo-600 */
}

[data-theme="dark"] .advantage-card:hover .feature-icon svg,
[data-theme="dark"] .advantage-card:hover .feature-icon i {
    color: #818cf8;
    /* indigo-400 for more vibrancy */
}