/* System Value Page Styles - Matching Screenshot Aesthetic */

.value-container {
    width: 100%;
    margin-top: 0;
    margin-bottom: 2rem;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.value-group-section {
    margin-bottom: 3.5rem;
    /* Reduced from 5rem to avoid hollow feeling */
}

.group-header-row {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    /* Tighter gap to cards */
    padding-bottom: 0.5rem;
    border-bottom: none;
    /* Removed horizontal line */
}

.value-group-header {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.8rem;
    font-weight: 800;
    color: #1565c0;
    margin-bottom: 0;
    padding-left: 1rem;
    z-index: 1;
}

.value-group-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 1.2rem;
    background: #1565c0;
    border-radius: 3px;
}

.column-header-titles {
    width: 100%;
    display: flex;
    gap: 3rem;
}

.column-header-titles .label-item {
    flex: 1;
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    color: #99abb4;
}

.value-card-container {
    display: flex;
    gap: 3rem;
    align-items: stretch;
}

.value-card-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.column-label {
    display: none;
    /* Hidden as they handled by group-header-row */
}

.value-card {
    flex: 1;
    padding: 1.25rem;
    /* Reduced from 2.5rem */
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

.value-card ul,
.value-card li {
    list-style: none !important;
    padding: 0;
    margin: 0;
}

.value-card li {
    padding: 0.4rem 0;
    /* Reduced from 0.8rem */
    font-size: 1.15rem;
    line-height: 1.4;
    /* Reduced from 1.6 */
    position: relative;
    max-width: 520px;
    /* Limits line length to trigger wrapping for long text only */
    display: block;
}

.value-card-before li {
    margin-left: auto;
    /* Keeps right-aligned items centered/aligned to the right */
}

/* Before Launch Style */
.value-card-before {
    background: #fdfdfe;
    border: 1px solid #f1f3f5;
    text-align: right;
}

.value-card-before li {
    color: #78909c;
}

/* After Launch Style */
.value-card-after {
    background: #eef7ff;
    border: 1px solid #e3f2fd;
    text-align: left;
}

.value-card-after li {
    color: #1565c0;
    font-weight: 500;
    padding-left: 2.5rem;
}

.value-card-after li::before {
    /* Inline SVG thumbs-up icon - replaces Font Awesome dependency */
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%231e88e5' d='M104 224H24c-13.255 0-24 10.745-24 24v240c0 13.255 10.745 24 24 24h80c13.255 0 24-10.745 24-24V248c0-13.255-10.745-24-24-24zM64 472c-13.255 0-24-10.745-24-24s10.745-24 24-24 24 10.745 24 24-10.745 24-24 24zM384 81.452c0 42.416-25.97 66.208-33.277 94.548h101.723c33.397 0 59.397 27.746 59.553 58.098.084 17.938-7.546 37.249-19.439 49.197l-.11.11c9.836 23.337 8.237 56.037-9.308 79.469 8.681 25.895-.069 57.704-16.382 74.757 4.298 17.598 2.244 32.575-6.148 44.632C440.202 511.587 389.616 512 346.839 512l-2.845-.001c-48.287-.017-87.806-17.598-119.56-31.725-15.957-7.099-36.821-15.887-52.651-16.178-6.54-.12-11.783-5.457-11.783-11.998v-213.77c0-3.2 1.282-6.271 3.558-8.521 39.614-39.144 56.648-80.587 89.117-113.111 14.804-14.832 20.188-37.236 25.393-58.902C282.515 39.293 291.817 0 312 0c24 0 72 8 72 81.452z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 1.2rem;
    height: 1.2rem;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
}

.value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* Page Intro */
.value-intro {
    text-align: center;
    margin-bottom: 2.5rem;
    /* Reduced from 5rem */
    margin-top: 1rem;
}

.value-intro h2 {
    font-size: 2.5rem;
    /* Reduced from 3.5rem */
    font-weight: 800;
    color: #1565c0;
    margin-bottom: 0.5rem;
}

.value-intro p {
    font-size: 1.15rem;
    /* Slightly smaller */
    color: #546e7a;
}

/* Mobile Responsive */
@media (max-width: 992px) {
    .group-header-row {
        flex-direction: column;
        align-items: flex-start;
        border: none;
        margin-bottom: 1.5rem;
    }

    .value-group-header {
        margin-bottom: 1rem;
        width: 100%;
        padding-left: 1rem;
    }

    .column-header-titles {
        display: none;
    }

    .value-card-wrapper::before {
        content: attr(data-label);
        display: block;
        text-align: center;
        font-size: 1rem;
        font-weight: 400;
        margin-bottom: 0.8rem;
        color: #99abb4;
    }

    .value-card-container {
        flex-direction: column;
        gap: 2.5rem;
    }

    .value-card-before,
    .value-card-after {
        text-align: left;
    }

    .value-card-after li {
        padding-left: 2.5rem;
    }

    .value-card-before li {
        padding-left: 0;
    }
}