/* Original selected image, with live copy, product figures and consultation buttons.
 * Scoped to the overview. Restore the previous stylesheet/include to roll back. */
.portal-image-main { display: none; }
.portal-consult-rail { display: none; }

@media (min-width: 1280px) {
    body.portal-site.portal-image-led {
        --portal-consult-width: 25vw;
        padding-right: var(--portal-consult-width);
        background: #fff;
    }
    body.portal-image-led main { overflow: hidden; background: #fff; }
    body.portal-image-led .portal-hero,
    body.portal-image-led .portal-coded-main { display: none; }
    body.portal-image-led .portal-coded-fv { display: block; padding-top: 72px; }

    body.portal-image-led .portal-header,
    body.portal-image-led .portal-header.is-scrolled {
        right: var(--portal-consult-width);
        width: auto;
        height: 72px;
        border: 0;
        background: #fff;
        box-shadow: none;
        backdrop-filter: none;
    }
    body.portal-image-led .portal-header-inner {
        display: grid;
        width: 100%;
        height: 72px;
        min-height: 72px;
        grid-template-columns: minmax(260px, 1fr) auto auto;
        gap: 26px;
        padding: 0 38px 0 40px;
        margin: 0;
    }
    body.portal-image-led .portal-header .brand {
        display: inline-flex;
        width: auto;
        max-width: 100%;
        height: auto;
        align-items: center;
        gap: 18px;
        overflow: visible;
        background: none;
    }
    body.portal-image-led .portal-header .brand-logo { width: 184px; }
    body.portal-image-led .portal-header .brand-tagline {
        color: #161713;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0;
    }
    body.portal-image-led .portal-header .nav-toggle,
    body.portal-image-led .portal-header-login,
    body.portal-image-led .portal-mobile-actions,
    body.portal-image-led .portal-nav-number,
    body.portal-image-led .portal-nav-arrow { display: none; }
    body.portal-image-led .portal-global-nav,
    body.portal-image-led .portal-global-nav.is-open {
        position: static;
        inset: auto;
        display: flex;
        width: auto;
        max-height: none;
        gap: 24px;
        align-items: center;
        justify-content: flex-end;
        padding: 0;
        border: 0;
        overflow: visible;
        background: transparent;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    body.portal-image-led .portal-global-nav .portal-nav-link {
        display: inline-flex;
        min-height: 72px;
        align-items: center;
        padding: 0 !important;
        border: 0;
        background: transparent;
        color: #111;
        font-size: 14px;
        font-weight: 650;
        letter-spacing: 0;
        white-space: nowrap;
    }
    body.portal-image-led .portal-nav-link::after { bottom: 14px; }
    body.portal-image-led .portal-header-actions { display: flex; gap: 0; }
    body.portal-image-led .portal-header-actions .header-cta {
        display: inline-flex;
        min-width: 196px;
        min-height: 44px;
        justify-content: center;
        gap: 12px;
        padding: 10px 20px;
        border: 0;
        border-radius: 999px;
        background: linear-gradient(110deg, #ffdb25, #ffde32 60%, #ffd91b);
        box-shadow: 0 3px 5px #6d590324;
        color: #090a06;
        font-size: 14px;
        font-weight: 800;
    }

    body.portal-image-led .portal-image-main {
        position: relative;
        display: block;
        width: 100%;
        aspect-ratio: 1152 / 576;
        container-type: inline-size;
        overflow: hidden;
        background: #fcfbf6;
    }
    body.portal-image-led .portal-image-art,
    body.portal-image-led .portal-image-art img {
        position: absolute;
        display: block;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }
    body.portal-image-led .portal-image-art { inset: 0; }
    body.portal-image-led .portal-image-art img { top: -6.25cqw; left: 0; height: auto; }
    /* The figures move upward; mask their original raster position independently. */
    body.portal-image-led .portal-image-art::after {
        position: absolute;
        top: 37.1cqw;
        left: 3.3cqw;
        width: 48.2cqw;
        height: 8.2cqw;
        background: #fcfbf6;
        content: '';
    }
    body.portal-image-led .portal-image-copy {
        position: absolute;
        top: 22.4cqw;
        left: 0;
        width: 52cqw;
        height: 14.8cqw;
        padding: 0.52cqw 0 0 3.47cqw;
        color: #10120e;
    }
    /* Cover only the two raster paragraphs, leaving the headline and photo intact. */
    body.portal-image-led .portal-image-copy::before {
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, #fcfbf6 91%, #fcfbf600);
        mask-image: linear-gradient(transparent, #000 0.5cqw, #000 calc(100% - 0.6cqw), transparent);
        content: '';
    }
    body.portal-image-led .portal-image-metrics {
        position: absolute;
        top: 32cqw;
        left: 3.45cqw;
        display: grid;
        width: 47.9cqw;
        height: 7.6cqw;
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 0.8cqw;
        background: #fcfbf6;
    }
    body.portal-image-led .portal-image-metric {
        position: relative;
        display: flex;
        height: 7.6cqw;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        background: #fcfbf6;
        color: #060704;
        text-align: center;
        white-space: nowrap;
        line-height: 1.1;
    }
    body.portal-image-led .portal-image-metric::before,
    body.portal-image-led .portal-image-metric::after {
        position: absolute;
        top: 0;
        width: 3.15cqw;
        height: 7.6cqw;
        background-image: url('/eigyo/service/assets/fv-image2-exact-left.webp');
        background-size: 100cqw auto;
        content: '';
    }
    body.portal-image-led .portal-image-metric::before { left: 0; background-position: -3.45cqw -43.75cqw; }
    body.portal-image-led .portal-image-metric::after { right: 0; width: 2.78cqw; background-position: -15.885cqw -43.75cqw; }
    body.portal-image-led .portal-image-metric > span { font-size: clamp(12px, 1.13cqw, 16px); font-weight: 800; }
    body.portal-image-led .portal-image-metric > strong {
        margin: 5px 0 2px;
        font-size: 2.95cqw;
        font-weight: 900;
        letter-spacing: -0.055em;
        line-height: 1.05;
    }
    body.portal-image-led .portal-image-metric.is-delivery > strong { font-size: 2.3cqw; }
    body.portal-image-led .portal-image-metric small { font-size: 1.32cqw; font-weight: 800; letter-spacing: -0.03em; }
    body.portal-image-led .portal-image-metric > b { font-size: clamp(12px, 1.13cqw, 16px); font-weight: 700; }
    body.portal-image-led .portal-image-actions {
        position: absolute;
        top: 40.5cqw;
        bottom: 0;
        left: 17.2cqw;
        width: 58.7cqw;
    }
    body.portal-image-led .portal-image-actions::before {
        position: absolute;
        inset: 4.6cqw -5cqw 0 0;
        background: linear-gradient(90deg, #fcfbf600, #fcfbf6 3%, #fcfbf6 90%, #fcfbf600);
        mask-image: linear-gradient(transparent, #000 1.3cqw);
        content: '';
    }
    body.portal-image-led .portal-image-action-buttons {
        position: absolute;
        top: 0.95cqw;
        left: -13.73cqw;
        display: grid;
        width: 93.06cqw;
        height: 7.5cqw;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.4cqw;
        align-items: center;
    }
    body.portal-image-led .portal-image-consult {
        position: relative;
        display: flex;
        width: 100%;
        height: 7.5cqw;
        align-items: center;
        border-radius: 999px;
        color: #0b0c08;
        text-decoration: none;
        cursor: pointer;
    }
    body.portal-image-led .portal-image-consult-badge {
        z-index: 1;
        display: flex;
        width: 7.5cqw;
        height: 7.5cqw;
        flex: 0 0 7.5cqw;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #12130f;
        color: #ffdb25;
        font-size: 1.95cqw;
        font-weight: 800;
        line-height: 1.2;
    }
    body.portal-image-led .portal-image-consult-button {
        display: flex;
        height: 6.35cqw;
        flex: 1;
        align-items: center;
        justify-content: center;
        gap: 1.55cqw;
        padding: 0 2cqw;
        margin-left: -0.3cqw;
        border-radius: 999px;
        background: #ffdb25;
        box-shadow: 0 2px 3px #6d59031a;
        font-size: 2cqw;
        font-weight: 800;
        letter-spacing: 0.025em;
        line-height: 1.3;
        white-space: nowrap;
        transition: background-color 150ms ease;
    }
    body.portal-image-led .portal-image-signup {
        display: flex;
        height: 6.35cqw;
        align-items: center;
        justify-content: center;
        gap: 1.55cqw;
        padding: 0 2cqw;
        border: 1.5px solid #171813;
        border-radius: 999px;
        background: #fff;
        box-shadow: 0 2px 3px #1718130d;
        color: #0b0c08;
        font-size: 2cqw;
        font-weight: 800;
        letter-spacing: 0.025em;
        line-height: 1.3;
        text-decoration: none;
        white-space: nowrap;
        transition: background-color 150ms ease;
    }
    body.portal-image-led .portal-image-consult-button svg,
    body.portal-image-led .portal-image-signup svg { width: 2.35cqw; height: 1.75cqw; flex: 0 0 auto; }
    body.portal-image-led .portal-image-consult:hover .portal-image-consult-button { background: #ffcf13; }
    body.portal-image-led .portal-image-signup:hover { background: #fff7d7; }
    body.portal-image-led .portal-image-consult:focus-visible,
    body.portal-image-led .portal-image-signup:focus-visible { outline: 3px solid #13140e; outline-offset: 2px; }

    body.portal-image-led .portal-coded-benefits {
        container-type: inline-size;
        padding: 52px 40px 32px;
        background: #fff;
    }
    body.portal-image-led .portal-coded-benefits-heading { text-align: center; }
    body.portal-image-led .portal-coded-benefits-heading h2 {
        margin: 0 0 4px;
        font-size: clamp(26px, 2.43cqw, 32px);
        font-weight: 900;
        letter-spacing: -0.045em;
        line-height: 1.3;
    }
    body.portal-image-led .portal-coded-benefits-heading p { margin: 0; color: #4b4d48; font-size: 14px; line-height: 1.6; }
    body.portal-image-led .portal-coded-benefit-list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 22px; }
    body.portal-image-led .portal-coded-benefit-list article { position: relative; min-width: 0; padding: 0 12px; text-align: center; }
    body.portal-image-led .portal-coded-benefit-list article + article::before { position: absolute; top: 28px; bottom: 4px; left: 0; width: 1px; background: #eee; content: ''; }
    body.portal-image-led .portal-coded-benefit-icon { display: grid; width: 76px; height: 72px; place-items: center; margin: 0 auto 8px; border-radius: 50%; background: #fef7d7; color: #10110e; }
    body.portal-image-led .portal-coded-benefit-icon svg { width: 48px; height: 48px; overflow: visible; }
    body.portal-image-led .portal-coded-benefit-list h3 { margin: 0 0 8px; font-size: clamp(16px,1.65cqw,20px); font-weight: 900; letter-spacing: -0.04em; }
    body.portal-image-led .portal-coded-benefit-list p { margin: 0; color: #494b47; font-size: 14px; line-height: 1.65; }
    body.portal-image-led .portal-use-price { flex-wrap: wrap; row-gap: 12px; }
    body.portal-image-led .portal-use-price strong { white-space: nowrap; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
    body.portal-image-led .portal-header-inner { grid-template-columns: minmax(240px,1fr) auto auto; gap: 16px; padding-right: 24px; }
    body.portal-image-led .portal-header .brand-logo { width: 168px; }
    body.portal-image-led .portal-header .brand-tagline { display: none; }
    body.portal-image-led .portal-global-nav { gap: 16px; }
    body.portal-image-led .portal-header-actions .header-cta { min-width: 184px; padding-inline: 14px; }
}
