/* ============================================================
   FEATURES PAGE — CTA
   ============================================================ */

.spec-card h3 {
    margin: 0 0 10px;
    color: var(--text, #f6f8ff);
}

.spec-card p {
    margin: 0;
    color: var(--muted, rgba(232,239,255,.72));
}

/* section-sub used on features page */
.section-sub {
    color: var(--muted, rgba(232, 239, 255, .72));
    max-width: 820px;
    margin: 0 0 4px;
}

/* CTA two-column layout for outcome/feature endings */
.cta-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 40px;
}

.cta-card {
    padding: 28px;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.024));
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
}

.cta-card h3 {
    margin: 0 0 10px;
}

.cta-card p {
    margin: 0 0 18px;
    color: var(--muted, rgba(232, 239, 255, 0.72));
    line-height: 1.6;
}

@media (max-width: 1180px) {
    .cta-wrap {
        grid-template-columns: 1fr;
    }
}

/* ── Mobile Spacing Compression ──────────────────────────────────────
   Targets sections carrying the exact inline style="padding: 84px 0"
   string. !important is required to beat inline style specificity.
   Attribute selector + class gives (0,1,1,1) + !important — safe.
   Hero sections use "padding: 110px 0 70px" and are NOT matched here.
──────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    section.reveal[style*="padding: 84px 0"] {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }
}

@media (max-width: 680px) {
    section.reveal[style*="padding: 84px 0"] {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }
}

/* ── Phone Grid Collapse ─────────────────────────────────────────────
   app.css collapses .grid-4 → repeat(2,1fr) at ≤1180px.
   No further phone-level override exists. This closes that gap.
──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .grid-4 {
        grid-template-columns: 1fr !important;
    }
}

/* ── Outcome Diagram Images: Mobile Decode Constraint (max-width: 768px) ──────
   Three <img> elements in automation.blade.php carry inline style="min-height:
   300px". This forces the browser to reserve and paint a 300px tall block before
   the image byte arrives, defeating the lazy-load paint-deferral benefit. The
   wide-source images (2152px, 2122px, 1702px) also produce oversized decode
   buffers at narrow viewports. These overrides cap the paint region and clear
   the forced paint reservation without disturbing text or other layout elements.
   The !important is required to beat inline-style specificity.
──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .diagram-box img {
        min-height: 0 !important;        /* clears inline min-height: 300px    */
        max-height: 480px !important;    /* caps decode buffer on narrow screens */
        width: auto !important;          /* natural flow within .panel container */
        max-width: 100% !important;      /* prevents overflow                    */
        object-fit: contain;
    }
}