/* Public /features page. --features-brand is set inline from the group's
   background colour, falling back to NEOnet blue. */

.features-page {
    --features-brand: var(--neonet-blue);
    --features-brand-soft: color-mix(in srgb, var(--features-brand) 8%, #fff);
    --features-brand-dark: color-mix(in srgb, var(--features-brand) 80%, #000);
}

.features-page section[id],
.features-page article[id] {
    scroll-margin-top: 5rem;
}

.features-page .btn-brand {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--features-brand);
    --bs-btn-border-color: var(--features-brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--features-brand-dark);
    --bs-btn-hover-border-color: var(--features-brand-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--features-brand-dark);
    --bs-btn-active-border-color: var(--features-brand-dark);
}

.features-page .btn-outline-brand {
    --bs-btn-color: var(--features-brand);
    --bs-btn-border-color: var(--features-brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--features-brand);
    --bs-btn-hover-border-color: var(--features-brand);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--features-brand-dark);
    --bs-btn-active-border-color: var(--features-brand-dark);
}

.features-hero {
    background:
        radial-gradient(60rem 30rem at 85% 0%, var(--features-brand-soft), transparent 70%),
        linear-gradient(#fff, #f8f9fb);
}

.features-hero__title {
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.features-eyebrow {
    background-color: var(--features-brand-soft);
    color: var(--features-brand);
}

.features-icon {
    width: 3rem;
    height: 3rem;
    background-color: var(--features-brand);
}

.features-icon--soft {
    background-color: var(--features-brand-soft);
    color: var(--features-brand);
}

/* Illustrative example event in the hero, styled after the calendar's hover
   tooltip (components/calendar/tooltip). */
.features-preview {
    max-width: 26rem;
}

.features-label {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}

.features-preview .progress-bar {
    background-color: var(--features-brand);
}

.features-jump {
    top: 0;
    z-index: 1010;
    backdrop-filter: blur(6px);
    background-color: rgba(255, 255, 255, 0.92);
}

.features-jump__list {
    scrollbar-width: none;
}

/* Centres the links when they fit and scrolls from the first one when they
   do not, which justify-content: center would clip. */
.features-jump__list > :first-child {
    margin-inline-start: auto;
}

.features-jump__list > :last-child {
    margin-inline-end: auto;
}

.features-jump__list::-webkit-scrollbar {
    display: none;
}

.features-jump .nav-link {
    color: var(--bs-body-color);
    white-space: nowrap;
}

.features-jump .nav-link:hover,
.features-jump .nav-link:focus-visible {
    background-color: var(--features-brand-soft);
    color: var(--features-brand);
}

.features-card {
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.features-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.1) !important;
}

@media (min-width: 768px) {
    .features-card--wide .features-list {
        columns: 2;
        column-gap: 2rem;
    }

    .features-card--wide .features-list li {
        break-inside: avoid;
    }
}

.features-step__number {
    width: 2rem;
    height: 2rem;
    background-color: var(--features-brand);
}

.features-cta {
    background:
        radial-gradient(40rem 20rem at 100% 0%, rgba(255, 255, 255, 0.12), transparent 70%),
        var(--features-brand);
}

@media (prefers-reduced-motion: reduce) {
    .features-card,
    .features-card:hover {
        transition: none;
        transform: none;
    }
}