/* "Powerful. Intuitive. Great value." section and the trial band (Index.html, Spanner2.html) */

.value-section {
    padding: 72px 0;
    background: #ffffff;
}
.value-eyebrow {
    color: #107080;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.value-title {
    color: #102030;
    font-weight: 800;
    letter-spacing: -0.5px;
}
.value-lead {
    max-width: 720px;
    margin: 0 auto;
    color: #4a5568;
    font-size: 1.15rem;
}
.value-card {
    height: 100%;
    padding: 28px;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    background: #f8f9fa;
}
.value-card i {
    margin-bottom: 14px;
    color: #107080;
    font-size: 1.6rem;
}
.value-card h3 {
    margin-bottom: 10px;
    color: #102030;
    font-size: 1.25rem;
    font-weight: 800;
}
.value-card p {
    margin-bottom: 0;
    color: #4a5568;
}

.trial-band {
    padding: 48px 0;
    background: linear-gradient(135deg, #107080, #0c5866);
    color: #ffffff;
    text-align: center;
    scroll-margin-top: 60px;    /* clears the sticky menu bar when a link jumps here */
}
.trial-band h2 {
    font-weight: 800;
    letter-spacing: -0.5px;
}
.trial-band p {
    max-width: 640px;
    margin: 0 auto 24px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
}
.trial-band .btn-light {
    color: #0c5866;
    font-weight: 600;
}

.trial-link {
    color: #107080;
    font-weight: 600;
    text-decoration: none;
}
.trial-link:hover {
    text-decoration: underline;
}