/* New Capabilities Grid for Sandbox Hero */
.lex-capabilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 32px;
    margin-bottom: 32px;
    width: 100%;
    max-width: 500px;
}

.lex-capability-item {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 16px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
}

.lex-capability-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(4px);
}

/* Brackets styling via pseudo elements */
.lex-capability-item::before {
    content: '[';
    margin-right: 8px;
    opacity: 0.5;
    font-weight: 400;
}
.lex-capability-item::after {
    content: ']';
    margin-left: auto;
    opacity: 0.5;
    font-weight: 400;
}

/* Color Theming */
.cap-teal .lex-capability-item { border-left: 2px solid #00FFCC; }
.cap-teal .lex-capability-item::before, .cap-teal .lex-capability-item::after { color: #00FFCC; }
.cap-teal .lex-capability-item:hover { border-color: rgba(0,255,204,0.3); box-shadow: 0 0 15px rgba(0,255,204,0.05); }

.cap-purple .lex-capability-item { border-left: 2px solid #8A2BE2; }
.cap-purple .lex-capability-item::before, .cap-purple .lex-capability-item::after { color: #8A2BE2; }
.cap-purple .lex-capability-item:hover { border-color: rgba(138,43,226,0.3); box-shadow: 0 0 15px rgba(138,43,226,0.05); }

.cap-orange .lex-capability-item { border-left: 2px solid #FF4500; }
.cap-orange .lex-capability-item::before, .cap-orange .lex-capability-item::after { color: #FF4500; }
.cap-orange .lex-capability-item:hover { border-color: rgba(255,69,0,0.3); box-shadow: 0 0 15px rgba(255,69,0,0.05); }

/* Learn More Button */
.lex-learn-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #FFF;
    text-decoration: none;
    padding: 12px 24px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 100px;
    transition: all 0.3s ease;
    background: transparent;
}

.lex-learn-more-btn:hover {
    background: #FFF;
    color: #000;
    border-color: #FFF;
    gap: 14px;
}

.lex-learn-more-btn i {
    font-size: 10px;
}