/* ==========================================================================
   Labmonitor page — Figma "labmonitor" 407:1363.
   Shared module parts (hero, titles, feature card, accordion, spec table, module card) live in styles-modules.css.
   ========================================================================== */

/* ---------- Macro-environment ---------- */
.lab-macro {
    width: var(--mod-w);
    margin-inline: auto;
    padding-top: var(--mg-section-space);
}

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

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

/* ---------- Seamless integration + steps ---------- */
.lab-seam {
    width: var(--mod-w);
    margin-inline: auto;
    padding-top: var(--mg-section-space);
}

.lab-seam__text {
    max-width: 880px;
    margin: var(--mg-space-4) auto 0;
    font: 400 var(--mg-fs-body)/var(--mg-lh-body) var(--mg-font);
    text-align: center;
    color: var(--mg-ink-81);
}

.lab-seam__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--mg-space-16);
    align-items: start;
    margin-top: var(--mg-space-12);
}

.lab-seam__phone {
    justify-self: center;
    perspective: 1000px;
}

.lab-seam__phone img {
    width: 288px;
    height: auto;
}

.lab-steps {
    margin-top: var(--mg-space-36); /* sits level with the middle of the phone */
}

.lab-steps .mod-acc__chev {
    width: 12px;
    height: 8px;
    margin-right: var(--mg-space-1);
}

.lab-step__text {
    max-width: 560px;
    padding-top: var(--mg-space-3);
    font: 400 var(--mg-fs-body)/var(--mg-lh-body) var(--mg-font);
    color: var(--mg-ink-81);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .lab-seam__grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--mg-space-12);
        max-width: 640px;
        margin-inline: auto;
    }

    .lab-steps {
        margin-top: 0;
    }

    .lab-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .lab-features {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--mg-space-4);
    }

    .lab-seam__phone img {
        width: 240px;
    }
}