/* ============================================================
   Home Solutions / Security page — xfr-prefixed, additive only
   ============================================================ */

/* ---- Security feature grid: 3-col at ≥900px (matches React source) ---- */
.xfr-page-home-solutions #how-it-works .xfr-feature-grid {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
    .xfr-page-home-solutions #how-it-works .xfr-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .xfr-page-home-solutions #how-it-works .xfr-feature-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Staggered reveal delays for the 6 feature cards ---- */
.xfr-page-home-solutions #how-it-works .xfr-fcard:nth-child(1) { --reveal-delay: 0ms; }
.xfr-page-home-solutions #how-it-works .xfr-fcard:nth-child(2) { --reveal-delay: 80ms; }
.xfr-page-home-solutions #how-it-works .xfr-fcard:nth-child(3) { --reveal-delay: 160ms; }
.xfr-page-home-solutions #how-it-works .xfr-fcard:nth-child(4) { --reveal-delay: 240ms; }
.xfr-page-home-solutions #how-it-works .xfr-fcard:nth-child(5) { --reveal-delay: 320ms; }
.xfr-page-home-solutions #how-it-works .xfr-fcard:nth-child(6) { --reveal-delay: 400ms; }

/* ---- Equipment list items: stagger their own reveals ---- */
.xfr-equip__item:nth-child(1).xfr-reveal { --reveal-delay: 0ms; }
.xfr-equip__item:nth-child(2).xfr-reveal { --reveal-delay: 100ms; }
.xfr-equip__item:nth-child(3).xfr-reveal { --reveal-delay: 200ms; }

/* ---- Equipment split layout ---- */
.xfr-equip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.xfr-equip__content {}

.xfr-equip__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 28px;
    margin-bottom: 32px;
}

.xfr-equip__item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.xfr-equip__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--brand) 10%, #fff);
    color: var(--brand);
    border: 1px solid color-mix(in srgb, var(--brand) 16%, #fff);
}

.xfr-equip__icon svg {
    width: 24px;
    height: 24px;
}

.xfr-equip__item-body {}

.xfr-equip__item-title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 5px;
}

.xfr-equip__item-desc {
    font-size: 14px;
    color: var(--muted-fg);
    line-height: 1.65;
}

.xfr-equip__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ---- Equipment image side ---- */
.xfr-equip__visual {
    position: relative;
}

.xfr-equip__visual img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Caption / real-time badge overlaid on image */
.xfr-equip__badge {
    position: absolute;
    bottom: -20px;
    left: 24px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 20px;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.xfr-equip__badge-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand);
}

.xfr-equip__badge-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--fg);
}

@media (max-width: 900px) {
    .xfr-equip {
        grid-template-columns: 1fr;
    }
    .xfr-equip__visual {
        order: -1;
    }
    .xfr-equip__badge {
        bottom: -16px;
        left: 16px;
    }
}

@media (max-width: 600px) {
    .xfr-equip__actions {
        flex-direction: column;
    }
    .xfr-equip__actions .xfr-btn {
        width: 100%;
    }
}