/* ArsLudi landing — Funzionalità */

#funzionalita.landing-features-section {
    margin-top: -1px;
    margin-bottom: -1px;
    border-top: 0 !important;
    border-bottom: 0 !important;
    position: relative;
    isolation: isolate;
    overflow: hidden;

    --landing-features-surface-before: var(--arsludi-ivory-0, #fffdf8);
    --landing-features-surface-after: var(--landing-brand-green, #042f2e);
    --landing-features-band: var(--arsludi-ivory-100, #f7f4ea);

    background:
        linear-gradient(
            to bottom,
            var(--landing-features-surface-before) 0%,
            var(--landing-features-surface-before) 50%,
            var(--landing-features-surface-after) 50%,
            var(--landing-features-surface-after) 100%
        );

    --landing-features-clip: 0 8.2%, 24% 14.2%, 48% 10.6%, 68% 4.4%, 100% 3.2%, 100% 93.3%, 78% 97.8%, 42% 94.1%, 0 97.1%;
}

.landing-features-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 18% 22%,
            rgba(15, 118, 110, 0.032),
            transparent 22rem
        ),
        radial-gradient(
            circle at 82% 74%,
            rgba(180, 83, 9, 0.032),
            transparent 20rem
        ),
        linear-gradient(
            180deg,
            var(--landing-features-band) 0%,
            var(--landing-features-band) 100%
        );

    -webkit-clip-path: polygon(var(--landing-features-clip));
    clip-path: polygon(var(--landing-features-clip));
}

.landing-features-shell,
.landing-features-content {
    position: relative;
    z-index: 1;
}

.landing-features-icon-list {
    -webkit-mask: url("/icons/fontawesome/free/solid/list-check.svg") center / contain no-repeat;
    mask: url("/icons/fontawesome/free/solid/list-check.svg") center / contain no-repeat;
}

.landing-features-icon-formats {
    -webkit-mask: url("/icons/fontawesome/free/solid/shapes.svg") center / contain no-repeat;
    mask: url("/icons/fontawesome/free/solid/shapes.svg") center / contain no-repeat;
}

.landing-features-icon-rounds {
    -webkit-mask: url("/icons/fontawesome/free/solid/layer-group.svg") center / contain no-repeat;
    mask: url("/icons/fontawesome/free/solid/layer-group.svg") center / contain no-repeat;
}

.landing-features-icon-rules {
    -webkit-mask: url("/icons/fontawesome/free/solid/sliders.svg") center / contain no-repeat;
    mask: url("/icons/fontawesome/free/solid/sliders.svg") center / contain no-repeat;
}

.landing-features-icon-roles {
    -webkit-mask: url("/icons/fontawesome/free/solid/shield-halved.svg") center / contain no-repeat;
    mask: url("/icons/fontawesome/free/solid/shield-halved.svg") center / contain no-repeat;
}

.landing-features-icon-players {
    -webkit-mask: url("/icons/fontawesome/free/solid/users.svg") center / contain no-repeat;
    mask: url("/icons/fontawesome/free/solid/users.svg") center / contain no-repeat;
}

.landing-features-icon-activity {
    -webkit-mask: url("/icons/fontawesome/free/solid/gauge-high.svg") center / contain no-repeat;
    mask: url("/icons/fontawesome/free/solid/gauge-high.svg") center / contain no-repeat;
}


.landing-features-icon-lifecycle {
    display: block;
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: url("/icons/fontawesome/free/solid/arrows-rotate.svg") center / contain no-repeat;
    mask: url("/icons/fontawesome/free/solid/arrows-rotate.svg") center / contain no-repeat;
}

.landing-features-lifecycle-section {
    margin-top: -1px;
    margin-bottom: -1px;
    border-top: 0 !important;
    border-bottom: 0 !important;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--arsludi-ivory-0, #fffdf8);
}

/*
 * Il verde parte pieno dal bordo superiore: il raccordo geometrico è quello
 * già disegnato dalla sezione Funzionalità sopra. Qui ritagliamo soltanto
 * l'uscita inferiore verso il Catalogo.
 */
.landing-features-lifecycle-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--landing-brand-green, #042f2e);
    -webkit-clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - 2.8rem),
        76% calc(100% - 0.3rem),
        42% calc(100% - 3.1rem),
        0 calc(100% - 0.55rem)
    );
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - 2.8rem),
        76% calc(100% - 0.3rem),
        42% calc(100% - 3.1rem),
        0 calc(100% - 0.55rem)
    );
}

.landing-features-lifecycle-shell {
    position: relative;
    z-index: 1;
    padding-top: 6.5rem;
    padding-bottom: 4.1rem;
}

.landing-features-lifecycle {
    margin: 0 auto;
    max-width: 72rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.landing-features-lifecycle::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(64rem, 92vw);
    height: 100%;
    transform: translateX(-50%);
    pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.035),
        transparent 68%
    );
}

.landing-features-lifecycle-copy,
.landing-features-lifecycle-flows,
.landing-features-lifecycle-closing {
    position: relative;
    z-index: 1;
}

.landing-features-lifecycle-copy {
    display: flex;
    max-width: 54rem;
    flex-direction: column;
    align-items: center;
}

.landing-features-lifecycle-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-size: 0.66rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.17em;
    color: #f2cc63;
}

.landing-features-lifecycle-title {
    margin-top: 0.8rem;
    max-width: 46rem;
    text-wrap: balance;
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.045em;
    color: #fffdf8;
}

.landing-features-lifecycle-description {
    margin: 0.9rem auto 0;
    max-width: 50rem;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.5rem;
    color: rgba(241, 245, 249, 0.88);
}

.landing-features-lifecycle-flows {
    margin-top: 1.8rem;
    display: grid;
    width: min(100%, 64rem);
    gap: 0.65rem;
    justify-items: center;
}

.landing-features-lifecycle-techline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.48rem;
    margin: 0;
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 450;
    line-height: 1.55rem;
    letter-spacing: 0.018em;
    text-transform: uppercase;
}

.landing-features-lifecycle-techlabel {
    color: #f2cc63;
    font-weight: 600;
    letter-spacing: 0.09em;
}

.landing-features-lifecycle-techseparator {
    color: #f2cc63;
    font-weight: 500;
}

.landing-features-lifecycle-techstates {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.42rem;
    color: rgba(255, 253, 248, 0.98);
}

.landing-features-lifecycle-techstates > span:nth-child(even) {
    color: #f2cc63;
    font-weight: 500;
}

.landing-features-lifecycle-closing {
    margin-top: 2.25rem;
}

.landing-features-lifecycle-closing .landing-section-separator-line {
    background: rgba(242, 204, 99, 0.78);
}

.landing-features-lifecycle-closing .landing-section-separator-leaf {
    color: #f2cc63;
}
@media (min-width: 1024px) {

    .landing-features-lifecycle-shell {
        padding-top: 6.85rem;
        padding-bottom: 4.6rem;
    }

    .landing-features-lifecycle-title {
        font-size: 2.85rem;
        line-height: 1.02;
    }

    .landing-features-lifecycle-description {
        font-size: 0.94rem;
        line-height: 1.6rem;
    }

    .landing-features-lifecycle-techline {
        font-size: 1.02rem;
        line-height: 1.65rem;
    }


    .landing-features-lifecycle-closing {
        margin-top: 2.35rem;
    }

    .landing-features-shell {
        padding-top: 4.75rem;
        padding-bottom: 5rem;
    }
}

@media (max-width: 1023px) {
    .landing-features-shell {
        padding-top: 3.25rem;
        padding-bottom: 3.2rem;
    }

    .landing-features-lifecycle-shell {
        padding-top: 5.45rem;
        padding-bottom: 3.6rem;
    }
}

@media (max-width: 639px) {
    .landing-features-lifecycle-section::before {
        -webkit-clip-path: polygon(
            0 0,
            100% 0,
            100% calc(100% - 1.8rem),
            62% calc(100% - 0.2rem),
            28% calc(100% - 1.65rem),
            0 calc(100% - 0.45rem)
        );
        clip-path: polygon(
            0 0,
            100% 0,
            100% calc(100% - 1.8rem),
            62% calc(100% - 0.2rem),
            28% calc(100% - 1.65rem),
            0 calc(100% - 0.45rem)
        );
    }

    .landing-features-lifecycle-shell {
        padding-top: 4.7rem;
        padding-bottom: 3.15rem;
    }

    .landing-features-lifecycle-title {
        margin-top: 0.7rem;
        font-size: 1.8rem;
        line-height: 1.08;
    }

    .landing-features-lifecycle-description {
        margin-top: 0.75rem;
        font-size: 0.8rem;
        line-height: 1.38rem;
    }

    .landing-features-lifecycle-flows {
        margin-top: 1.45rem;
        gap: 0.75rem;
    }

    .landing-features-lifecycle-techline {
        gap: 0.34rem;
        font-size: 0.8rem;
        font-weight: 450;
        line-height: 1.35rem;
        letter-spacing: 0.01em;
    }

    .landing-features-lifecycle-techlabel {
        width: 100%;
        letter-spacing: 0.10em;
    }

    .landing-features-lifecycle-techseparator {
        display: none;
    }

    .landing-features-lifecycle-techstates {
        width: 100%;
        gap: 0.3rem;
    }

    #funzionalita.landing-features-section {
        --landing-features-clip: 0 2.8%, 41% 1.0%, 100% 2.5%, 100% 96.8%, 66% 98.7%, 30% 96.1%, 0 98.0%;
    }

    .landing-features-shell {
        padding-top: 2.9rem;
        padding-bottom: 3.1rem;
    }
}

/* Geometric junctions: no flat separator line may cross the cuts. */
#funzionalita.landing-features-section + section {
    border-top-color: transparent !important;
}

section:has(+ #funzionalita.landing-features-section) {
    border-bottom-color: transparent !important;
}


/* Junction cleanup for the dedicated lifecycle section. */
#funzionalita.landing-features-section + .landing-features-lifecycle-section,
.landing-features-lifecycle-section + section {
    border-top-color: transparent !important;
}

section:has(+ .landing-features-lifecycle-section),
.landing-features-lifecycle-section:has(+ section) {
    border-bottom-color: transparent !important;
}