/* ==========================================================================
   Incubator page — Figma "incubator" 391:513.
   Shared module parts (hero, titles, feature card, spec table, module card) live in styles-modules.css.
   ========================================================================== */

/* ---------- Master your media ---------- */
.inc-media {
    width: var(--mod-w);
    margin-inline: auto;
    padding-top: var(--mg-section-space);
}

.inc-media__copy {
    max-width: 880px;
    margin-top: var(--mg-space-4);
}

.inc-media__copy p {
    font: 400 var(--mg-fs-body)/var(--mg-lh-body) var(--mg-font);
    color: var(--mg-ink);
}

.inc-media__copy p + p {
    margin-top: var(--mg-space-4);
}

.inc-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mg-space-6);
    margin-top: var(--mg-space-12);
}

/* ---------- Seamless integration ---------- */
.inc-seam {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--mg-space-16);
    width: var(--mod-w);
    margin-inline: auto;
    padding-top: var(--mg-section-space);
}

.inc-seam__text {
    max-width: 480px;
    margin-top: var(--mg-space-4);
    font: 400 var(--mg-fs-body)/var(--mg-lh-body) var(--mg-font);
    color: var(--mg-ink);
}

.inc-seam__cards {
    display: flex;
    flex-direction: column;
    gap: var(--mg-space-4);
    margin-top: var(--mg-space-8);
}

.inc-info {
    width: 100%;
    max-width: 480px;
    padding: var(--mg-space-6);
    background-color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: var(--mg-radius-lg);
    box-shadow: 0 0 0 1px rgba(var(--mg-sage-rgb), 0.12), 0 2px 4px -2px rgba(var(--mg-ink-rgb), 0.06), 0 8px 16px -8px rgba(var(--mg-ink-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.inc-info__title {
    font: 600 18px/28px var(--mg-font);
    letter-spacing: -0.02em;
    color: var(--mg-green-text);
}

.inc-info__title span {
    display: inline-block;
    width: 28px;
}

.inc-info__text {
    margin-top: var(--mg-space-2);
    font: 400 var(--mg-fs-body)/var(--mg-lh-body) var(--mg-font);
    color: var(--mg-ink);
}

/* Device shot: images only, positioned in a 560px stage and centred in its column */
.inc-seam__device {
    position: relative;
    min-height: 560px;
}

.inc-seam__shadow {
    position: absolute;
    left: calc(50% - 176px);
    top: 496px;
    width: 352px;
    height: 72px;
    max-width: none;
    opacity: 0.85;
}

.inc-seam__module {
    position: absolute;
    left: calc(50% - 140px);
    top: 260px;
    width: 280px;
    height: 284px;
    overflow: hidden;
}

.inc-seam__module img {
    position: absolute;
    left: -78.79%;
    top: -20.9%;
    width: 272.73%;
    height: 151.19%;
    max-width: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .inc-seam {
        grid-template-columns: minmax(0, 1fr);
        max-width: 560px;
    }

    .inc-seam__device {
        min-height: 0;
        height: 332px;
        margin-top: var(--mg-space-6);
    }

    .inc-seam__module {
        top: 12px;
    }

    .inc-seam__shadow {
        top: 248px;
    }
}

@media (max-width: 768px) {
    .inc-features {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--mg-space-4);
        margin-top: var(--mg-space-8);
    }
}

@media (max-width: 480px) {
    .inc-seam__shadow {
        width: 304px;
        left: calc(50% - 152px);
    }
}