/*
 * SEO.5C-HERO-BLEND: Shared public marketing hero visual refinements.
 *
 * Scope: About, Industries and Contact pages, whose hero markup uses .g2d-ref-hero.
 * Do not change the Features, Pricing, application, Customer Portal or Platform UI.
 * All illustration files are the original bundled artwork; no new services or fonts.
 * The mask fades their embedded lavender background into the existing site gradient.
 */

/* Match the already approved Features hero background. */
.g2d-ref-page .g2d-ref-hero {
    background:
        radial-gradient(circle at 80% 20%, #e4e1ff 0%, transparent 45%),
        linear-gradient(120deg, #f0f5ff 0%, #ffffff 56%, #f8f5ff 100%);
    padding-block: clamp(2.625rem, 4vw, 4.25rem);
    overflow: hidden;
    isolation: isolate;
}

/* Maintain the existing two-column composition and branded headline emphasis. */
.g2d-ref-page .g2d-ref-hero-grid {
    gap: clamp(1.25rem, 3.5vw, 3.5rem);
}
.g2d-ref-page .g2d-ref-copy h1 em {
    font-style: normal;
    color: #505fe3;
}

/*
 * The images currently include a flat lavender outer rectangle.
 * Two intersecting fades remove that rectangle without touching the dashboard,
 * services, or support illustration at the center. Keep the mask on the image,
 * NOT on the figure, to preserve legible figcaptions and their accessibility.
 */
.g2d-ref-page .g2d-ref-hero-media {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
}
.g2d-ref-page .g2d-ref-hero-media img {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    mix-blend-mode: multiply;
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, #000 7%, #000 86%, transparent 96%);
    mask-image:
        linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, #000 7%, #000 86%, transparent 96%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

/*
 * The source Industries illustration has a fragment of a mockup heading
 * underneath the intended art. Crop only that bottom fragment in layout;
 * the original source image remains untouched and available for re-use.
 */
.g2d-ref-page .g2d-ref-hero-media img[src*="industries-mockup-art"] {
    -webkit-clip-path: inset(0 0 8% 0);
    clip-path: inset(0 0 8% 0);
    margin-bottom: -7%;
}

/* Honor existing tablet/mobile one-column navigation and visual layout. */
@media (max-width: 991.98px) {
    .g2d-ref-page .g2d-ref-hero {
        padding-block: clamp(2rem, 6vw, 3rem);
    }
    .g2d-ref-page .g2d-ref-hero-media {
        width: min(100%, 650px);
        margin-inline: auto;
    }
}
@media (max-width: 575.98px) {
    .g2d-ref-page .g2d-ref-hero-media {
        width: 100%;
    }
    .g2d-ref-page .g2d-ref-hero-media img {
        /* Keep the core interface and service imagery visible on narrow screens. */
        -webkit-mask-image:
            linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%),
            linear-gradient(to bottom, transparent 0%, #000 5%, #000 88%, transparent 99%);
        mask-image:
            linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%),
            linear-gradient(to bottom, transparent 0%, #000 5%, #000 88%, transparent 99%);
    }
}