/* Jeff Elite v0.2.4 — Scroll Experience
   Layout rebuilt to keep the AC centered and preserve normal page flow after pinning. */

.jel-lp .jel-ac-experience {
    position: relative;
    z-index: 3;
    width: 100%;
    min-height: 100svh;
    height: auto; /* IMPORTANT: allows ScrollTrigger pin spacer to expand the section */
    overflow: visible;
    background: #050505;
    color: #fff;
}

.jel-lp .jel-ac-stage {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 720px;
    overflow: clip;
    background:
        radial-gradient(circle at 50% 50%, rgba(176,140,60,.09), transparent 37%),
        linear-gradient(180deg, #060606 0%, #050505 100%);
    isolation: isolate;
}

.jel-lp .jel-ac-bg,
.jel-lp .jel-ac-bg__grid,
.jel-lp .jel-ac-bg__glow,
.jel-lp .jel-ac-bg__axis {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.jel-lp .jel-ac-bg__grid {
    opacity: .48;
    background-image:
        linear-gradient(rgba(255,255,255,.027) 1px, transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.027) 1px,transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 18%, transparent 78%);
    mask-image: radial-gradient(circle at 50% 50%, #000 18%, transparent 78%);
}

.jel-lp .jel-ac-bg__glow {
    border-radius: 50%;
    filter: blur(110px);
}

.jel-lp .jel-ac-bg__glow--1 {
    inset: 22% auto auto 50%;
    width: min(46vw, 740px);
    height: min(46vw, 740px);
    transform: translateX(-50%);
    background: rgba(176,140,60,.11);
}

.jel-lp .jel-ac-bg__glow--2 {
    inset: 8% auto auto 12%;
    width: 20vw;
    height: 20vw;
    background: rgba(255,255,255,.025);
}

.jel-lp .jel-ac-bg__axis--h {
    top: 50%;
    bottom: auto;
    height: 1px;
    background: linear-gradient(90deg,transparent,rgba(176,140,60,.08),transparent);
}

.jel-lp .jel-ac-bg__axis--v {
    left: 50%;
    right: auto;
    width: 1px;
    background: linear-gradient(180deg,transparent,rgba(176,140,60,.08),transparent);
}

.jel-lp .jel-ac-kicker {
    position: absolute;
    z-index: 20;
    top: 105px;
    left: clamp(24px,4vw,68px);
    right: clamp(24px,4vw,68px);
    display: flex;
    align-items: center;
    gap: 11px;
    color: #817d75;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.jel-lp .jel-ac-kicker__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--jel-gold);
    box-shadow: 0 0 20px rgba(176,140,60,.85);
}

.jel-lp .jel-ac-kicker__status {
    margin-left: auto;
    color: #53504a;
}

.jel-lp .jel-ac-viewport {
    position: absolute;
    inset: 0;
    width: min(1680px, calc(100% - 48px));
    margin: auto;
}

/* COPY SYSTEM:
   title on top, supporting text / CTA on bottom, machine remains center. */
.jel-lp .jel-ac-copyrail {
    position: absolute;
    z-index: 14;
    inset: 0;
    pointer-events: none;
}

.jel-lp .jel-ac-copy {
    position: absolute;
    inset: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.jel-lp .jel-ac-copy.is-active {
    visibility: visible;
    opacity: 1;
}

.jel-lp .jel-ac-copy__top {
    position: absolute;
    top: clamp(138px, 15vh, 170px);
    left: 50%;
    width: min(1120px, calc(100% - 150px));
    transform: translateX(-50%);
    text-align: center;
}

.jel-lp .jel-ac-copy__label {
    margin: 0 0 13px;
    color: var(--jel-gold-light);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.jel-lp .jel-ac-copy h1 {
    margin: 0 auto;
    max-width: 1040px;
    color: #f5f1e8;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(36px, 4.35vw, 66px);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 600;
    text-wrap: balance;
}

.jel-lp .jel-ac-copy:not(:first-child) h1 {
    font-size: clamp(34px, 3.8vw, 58px);
}

.jel-lp .jel-ac-copy__bottom {
    position: absolute;
    left: 50%;
    bottom: clamp(48px, 6vh, 74px);
    width: min(760px, calc(100% - 120px));
    transform: translateX(-50%);
    text-align: center;
}

.jel-lp .jel-ac-copy__text {
    max-width: 720px;
    margin: 0 auto;
    color: #aaa69d;
    font-size: clamp(13px, 1.05vw, 16px);
    line-height: 1.62;
}

.jel-lp .jel-ac-copy__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 20px;
    pointer-events: auto;
}

.jel-lp .jel-ac-copy__hint {
    color: #65615b;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

/* MACHINE:
   always geometrically centered in the viewport. */
.jel-lp .jel-ac-machine {
    position: absolute;
    z-index: 7;
    left: 50% !important;
    right: auto !important;
    top: 55%;
    width: min(52vw, 760px);
    max-width: min(760px, calc(100vw - 220px));
    transform: translate3d(-50%, -50%, 0) !important;
    margin: 0 !important;
    will-change: transform, opacity;
}

.jel-lp .jel-ac-machine__halo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 72%;
    aspect-ratio: 1;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    background:
        radial-gradient(circle,rgba(176,140,60,.14),rgba(176,140,60,.025) 38%,transparent 68%);
    filter: blur(12px);
}

.jel-lp .jel-ac-svg {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 28px 45px rgba(0,0,0,.34));
}

.jel-lp .jel-ac-svg [data-front-panel],
.jel-lp .jel-ac-svg [data-filter-left],
.jel-lp .jel-ac-svg [data-filter-right],
.jel-lp .jel-ac-svg [data-coil],
.jel-lp .jel-ac-svg [data-blower],
.jel-lp .jel-ac-svg [data-pipes] {
    transform-box: fill-box;
    transform-origin: center center;
    will-change: transform, opacity;
}

.jel-lp .jel-ac-machine__readout {
    position: absolute;
    z-index: 26;
    top: 210px;
    right: clamp(18px, 3vw, 54px);
    left: auto;
    bottom: auto;
    display: grid;
    gap: 4px;
    min-width: 196px;
    padding: 14px 16px 14px 18px;
    border-left: 2px solid rgba(176,140,60,.55);
    color: #7d786f;
    background: rgba(8,8,8,.86);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 36px rgba(0,0,0,.24);
}
.jel-lp .jel-ac-machine__readout::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255,255,255,.05);
    pointer-events: none;
}
.jel-lp .jel-ac-machine__readout span {
    font-size: 8px;
    letter-spacing: .17em;
}
.jel-lp .jel-ac-machine__readout strong {
    color: #e5ded0;
    font: 700 21px "Space Grotesk", sans-serif;
    line-height: 1;
    letter-spacing: -.02em;
}

.jel-lp .jel-ac-machine__readout span {
    font-size: 8px;
    letter-spacing: .17em;
}

.jel-lp .jel-ac-machine__readout strong {
    color: #d9d4ca;
    font: 600 12px "Space Grotesk", sans-serif;
    letter-spacing: .05em;
}

/* Official icon as the AC's identity core */
@keyframes jelIconLoop {
    0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
    50% { transform: translate(-50%, -50%) scale(1.06) rotate(4deg); }
}
.jel-lp .jel-ac-machine__icon-core {
    position: absolute;
    z-index: 12;
    left: 50%;
    top: 43%;
    width: 78px;
    height: 78px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.jel-lp .jel-ac-machine__icon-mark {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 78px;
    height: auto;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 18px rgba(176,140,60,.18));
    opacity: 1;
    animation: jelIconLoop 2.6s ease-in-out infinite;
}

.jel-lp .jel-ac-progress {
    position: absolute;
    z-index: 18;
    top: 50%;
    right: 7px;
    display: grid;
    gap: 2px;
    transform: translateY(-50%);
}

.jel-lp .jel-ac-progress span {
    display: grid;
    grid-template-columns: 26px 24px;
    align-items: center;
    gap: 8px;
    height: 28px;
    color: #4c4944;
    font-size: 8px;
    transition: color .2s ease;
}

.jel-lp .jel-ac-progress span i {
    width: 8px;
    height: 1px;
    justify-self: end;
    background: currentColor;
    transition: width .2s ease, background .2s ease;
}

.jel-lp .jel-ac-progress span b { font-weight: 700; }
.jel-lp .jel-ac-progress span.is-active { color: var(--jel-gold-light); }
.jel-lp .jel-ac-progress span.is-active i {
    width: 24px;
    background: var(--jel-gold);
}

.jel-lp .jel-ac-footerline {
    position: absolute;
    z-index: 8;
    left: clamp(24px,4vw,68px);
    right: clamp(24px,4vw,68px);
    bottom: 18px;
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    align-items: center;
    gap: 12px;
    color: #4f4c46;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .18em;
}

.jel-lp .jel-ac-footerline i {
    height: 1px;
    background: linear-gradient(90deg,rgba(176,140,60,.3),rgba(255,255,255,.05));
}

/* Make the rest of the landing page flow above any stale compositor layer. */
.jel-lp .jel-authority,
.jel-lp .jel-services,
.jel-lp .jel-process,
.jel-lp .jel-maintenance,
.jel-lp .jel-quote,
.jel-lp .jel-faq,
.jel-lp .jel-footer {
    position: relative;
    z-index: 4;
}

/* Laptop / smaller desktop */
@media (max-width: 1180px) {
    .jel-lp .jel-ac-stage { min-height: 680px; }

    .jel-lp .jel-ac-copy__top {
        top: 125px;
        width: min(920px, calc(100% - 100px));
    }

    .jel-lp .jel-ac-copy h1 {
        font-size: clamp(34px,4.6vw,54px);
    }

    .jel-lp .jel-ac-copy:not(:first-child) h1 {
        font-size: clamp(31px,4vw,48px);
    }

    .jel-lp .jel-ac-machine {
        left: 50% !important;
        top: 56%;
        width: min(58vw, 720px);
        max-width: calc(100vw - 140px);
        transform: translate3d(-50%, -50%, 0) !important;
    }

    .jel-lp .jel-ac-copy__bottom {
        bottom: 44px;
        width: min(690px, calc(100% - 100px));
    }
}

/* Mobile / tablet: same information hierarchy, reduced motion travel */
@media (max-width: 820px) {
    .jel-lp .jel-ac-experience {
        min-height: 100dvh;
    }

    .jel-lp .jel-ac-stage {
        height: 100dvh;
        min-height: 640px;
        max-height: none;
        overflow: hidden;
    }

    /* Mobile prioritizes the explanation over decorative technical chrome. */
    .jel-lp .jel-ac-kicker,
    .jel-lp .jel-ac-footerline,
    .jel-lp .jel-ac-svg [data-tech-lines],
    .jel-lp .jel-ac-svg [data-filter-callouts],
    .jel-lp .jel-ac-svg [data-internal-callouts] {
        display: none !important;
    }

    .jel-lp .jel-ac-viewport {
        width: calc(100% - 16px);
        overflow: visible;
    }

    /* Completely different mobile hierarchy:
       the whole explanation occupies a readable block at the top. */
    .jel-lp .jel-ac-copy {
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 94px 14px 0;
        text-align: center;
    }

    .jel-lp .jel-ac-copy__top,
    .jel-lp .jel-ac-copy__bottom {
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        max-width: 610px;
        transform: none;
        text-align: center;
    }

    .jel-lp .jel-ac-copy__top {
        margin: 0 auto;
    }

    .jel-lp .jel-ac-copy__bottom {
        margin: 9px auto 0;
    }

    .jel-lp .jel-ac-copy__label {
        margin: 0 0 8px;
        font-size: 7px;
        letter-spacing: .16em;
    }

    .jel-lp .jel-ac-copy h1,
    .jel-lp .jel-ac-copy:not(:first-child) h1 {
        max-width: 600px;
        font-size: clamp(27px, 7.8vw, 40px);
        line-height: 1;
        letter-spacing: -.045em;
    }

    .jel-lp .jel-ac-copy__text {
        max-width: 550px;
        margin: 0 auto;
        color: #aaa69d;
        font-size: clamp(11.5px, 3vw, 13px);
        line-height: 1.45;
    }

    .jel-lp .jel-ac-copy__actions {
        justify-content: center;
        gap: 8px;
        margin-top: 11px;
        flex-wrap: wrap;
    }

    .jel-lp .jel-ac-copy__actions .jel-button {
        min-height: 41px;
        padding: 0 16px;
        font-size: 10px;
    }

    .jel-lp .jel-ac-copy__hint {
        display: none;
    }

    /* Product is moved to a dedicated lower visual zone. */
    .jel-lp .jel-ac-machine {
        left: 50% !important;
        right: auto !important;
        top: 70%;
        width: min(88vw, 555px);
        max-width: calc(100vw - 18px);
        transform: translate3d(-50%, -50%, 0) !important;
        margin: 0 !important;
    }

    .jel-lp .jel-ac-machine__readout {
    position: absolute;
    z-index: 26;
    top: 210px;
    right: clamp(18px, 3vw, 54px);
    left: auto;
    bottom: auto;
    display: grid;
    gap: 4px;
    min-width: 196px;
    padding: 14px 16px 14px 18px;
    border-left: 2px solid rgba(176,140,60,.55);
    color: #7d786f;
    background: rgba(8,8,8,.86);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 36px rgba(0,0,0,.24);
}
.jel-lp .jel-ac-machine__readout::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255,255,255,.05);
    pointer-events: none;
}
.jel-lp .jel-ac-machine__readout span {
    font-size: 8px;
    letter-spacing: .17em;
}
.jel-lp .jel-ac-machine__readout strong {
    color: #e5ded0;
    font: 700 21px "Space Grotesk", sans-serif;
    line-height: 1;
    letter-spacing: -.02em;
}

} /* close @media (max-width: 820px) — repaired in v0.3.4 */

@media (max-width: 520px) {
    .jel-lp .jel-ac-stage {
        min-height: 620px;
    }

    .jel-lp .jel-ac-copy {
        padding-top: 86px;
        padding-left: 11px;
        padding-right: 11px;
    }

    .jel-lp .jel-ac-copy h1,
    .jel-lp .jel-ac-copy:not(:first-child) h1 {
        font-size: clamp(25px, 8.4vw, 35px);
        line-height: 1;
    }

    .jel-lp .jel-ac-copy__bottom {
        margin-top: 7px;
    }

    .jel-lp .jel-ac-copy__text {
        max-width: 96%;
        font-size: 10.8px;
        line-height: 1.4;
    }

    .jel-lp .jel-ac-copy__actions {
        margin-top: 9px;
    }

    .jel-lp .jel-ac-copy__actions .jel-button {
        min-height: 39px;
        padding: 0 14px;
    }

    .jel-lp .jel-ac-machine {
        left: 50% !important;
        top: 71%;
        width: min(91vw, 500px);
        max-width: calc(100vw - 12px);
        transform: translate3d(-50%, -50%, 0) !important;
    }
}

@media (max-height: 720px) and (min-width: 821px) {
    .jel-lp .jel-ac-stage { min-height: 620px; }
    .jel-lp .jel-ac-kicker { top: 94px; }
    .jel-lp .jel-ac-copy__top { top: 118px; }
    .jel-lp .jel-ac-copy h1 { font-size: clamp(32px, 3.8vw, 52px); }
    .jel-lp .jel-ac-machine {
        left: 50% !important;
        top: 56%;
        width: min(50vw, 700px);
        max-width: calc(100vw - 180px);
        transform: translate3d(-50%, -50%, 0) !important;
    }
    .jel-lp .jel-ac-copy__bottom { bottom: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    .jel-lp .jel-ac-copy:not(:first-child) { display: none !important; }
    .jel-lp .jel-ac-machine {
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
}


/* v0.2.5 — hard centering safeguards */
.jel-lp .jel-ac-viewport {
    position: absolute;
    inset: 0;
    width: min(1680px, calc(100% - 48px));
    margin: auto;
    overflow: visible;
}

.jel-lp .jel-ac-svg {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.jel-lp .jel-ac-stage {
    overflow: hidden;
}

@media (max-width: 820px) {
    .jel-lp .jel-ac-viewport {
        width: calc(100% - 14px);
    }
}


/* v0.2.7 — desktop callouts moved outside, cleaner text */
@media (min-width: 821px) {
    .jel-lp .jel-ac-svg [data-tech-lines] text,
    .jel-lp .jel-ac-svg [data-filter-callouts] text,
    .jel-lp .jel-ac-svg [data-internal-callouts] text {
        font-size: 12px !important;
        font-weight: 700;
        letter-spacing: 2.2px !important;
        fill: #d6cfbf !important;
    }

    .jel-lp .jel-ac-svg [data-tech-lines] path,
    .jel-lp .jel-ac-svg [data-filter-callouts] path,
    .jel-lp .jel-ac-svg [data-internal-callouts] path {
        stroke-width: 2.5px !important;
    }
}


/* v0.2.7 — mobile copy visibility safeguards */
@media (max-width: 820px) {
    .jel-lp .jel-ac-copyrail {
        z-index: 24;
    }

    .jel-lp .jel-ac-copy {
        visibility: hidden;
        opacity: 0;
    }

    .jel-lp .jel-ac-copy.is-active {
        visibility: visible !important;
        opacity: 1 !important;
    }

    .jel-lp .jel-ac-copy__top,
    .jel-lp .jel-ac-copy__bottom {
        position: relative !important;
        z-index: 2;
        opacity: 1 !important;
    }

    .jel-lp .jel-ac-copy__top {
        margin-top: 0;
    }

    .jel-lp .jel-ac-copy__bottom {
        margin-top: 10px;
    }

    .jel-lp .jel-ac-copy__label,
    .jel-lp .jel-ac-copy h1,
    .jel-lp .jel-ac-copy__text {
        opacity: 1 !important;
        text-shadow: 0 2px 24px rgba(0,0,0,.35);
    }

    .jel-lp .jel-ac-copy h1 {
        color: #f5f1e8;
    }

    .jel-lp .jel-ac-copy__text {
        color: #beb8ae;
    }

    .jel-lp .jel-ac-machine {
        top: 71.5%;
    }
}

@media (max-width: 520px) {
    .jel-lp .jel-ac-copy {
        padding-top: 92px;
    }

    .jel-lp .jel-ac-copy h1,
    .jel-lp .jel-ac-copy:not(:first-child) h1 {
        font-size: clamp(24px, 8vw, 33px);
    }

    .jel-lp .jel-ac-copy__text {
        font-size: 10.7px;
    }

    .jel-lp .jel-ac-machine {
        top: 72.5%;
        width: min(90vw, 490px);
    }
}

/* v0.2.8 — step badge visible and non-overlapping on mobile */
@media (max-width: 820px) {
    .jel-lp .jel-ac-machine__readout {
        display: grid !important;
        top: clamp(250px, 34vh, 305px);
        left: 50%;
        right: auto;
        bottom: auto;
        min-width: 178px;
        padding: 11px 14px 11px 16px;
        transform: translateX(-50%);
        text-align: center;
        border-left-width: 0;
        border-top: 2px solid rgba(176,140,60,.55);
        background: rgba(8,8,8,.92);
    }
    .jel-lp .jel-ac-machine__readout span {
        font-size: 7px;
        letter-spacing: .14em;
    }
    .jel-lp .jel-ac-machine__readout strong {
        font-size: 18px;
    }
    .jel-lp .jel-ac-copy {
        padding-top: 90px;
    }
    .jel-lp .jel-ac-machine {
        top: 73%;
    }
    .jel-lp .jel-ac-copy__bottom {
        margin-top: 12px;
    }
}
@media (max-width: 520px) {
    .jel-lp .jel-ac-machine__readout {
        top: clamp(228px, 33vh, 286px);
        min-width: 164px;
        padding: 10px 12px;
    }
    .jel-lp .jel-ac-machine__readout strong {
        font-size: 16px;
    }
    .jel-lp .jel-ac-machine__icon-core {
        width: 62px;
        height: 62px;
        top: 43%;
    }
    .jel-lp .jel-ac-machine__icon-mark {
        width: 62px;
    }
}
@media (max-height: 720px) and (min-width: 821px) {
    .jel-lp .jel-ac-machine__readout {
        top: 188px;
        min-width: 184px;
    }
    .jel-lp .jel-ac-machine__readout strong {
        font-size: 19px;
    }
}


/* ================================================================
   v0.3.0 — CONSOLIDATED RESPONSIVE REFINEMENT
   ================================================================ */

/* ---- Brand icon: single colored mark, slow rotation only ---- */
@keyframes jelIconRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.jel-lp .jel-ac-machine__icon-core {
    position: absolute;
    z-index: 14;
    left: 50%;
    top: 43%;
    width: 76px;
    height: 76px;
    transform: translate(-50%, -50%) !important;
    opacity: 1 !important;
    pointer-events: none;
}

.jel-lp .jel-ac-machine__icon-mark {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 76px;
    height: auto;
    opacity: 1 !important;
    transform: translate(-50%, -50%) rotate(0deg);
    transform-origin: 50% 50%;
    animation: jelIconRotate 8s linear infinite !important;
    filter: drop-shadow(0 0 18px rgba(176,140,60,.16));
}

/* Old decorative rings stay off. */
.jel-lp .jel-ac-machine__icon-ring {
    display: none !important;
}

/* ---- Desktop technical annotations ---- */
@media (min-width: 821px) {
    /* The black step box is removed from the animation on desktop. */
    .jel-lp .jel-ac-machine__readout {
        display: none !important;
    }

    .jel-lp .jel-ac-svg [data-tech-lines] text,
    .jel-lp .jel-ac-svg [data-filter-callouts] text,
    .jel-lp .jel-ac-svg [data-internal-callouts] text {
        font-size: 22px !important;
        font-weight: 700 !important;
        letter-spacing: 3.2px !important;
        fill: #d8d1c4 !important;
        stroke: none !important;
        paint-order: normal !important;
    }

    .jel-lp .jel-ac-svg [data-tech-lines] path,
    .jel-lp .jel-ac-svg [data-filter-callouts] path,
    .jel-lp .jel-ac-svg [data-internal-callouts] path {
        stroke-width: 3px !important;
    }

    .jel-lp .jel-ac-svg [data-tech-lines] circle,
    .jel-lp .jel-ac-svg [data-filter-callouts] circle,
    .jel-lp .jel-ac-svg [data-internal-callouts] circle {
        r: 6px;
    }

    .jel-lp .jel-ac-mobile-callouts {
        display: none !important;
    }
}

/* ---- Mobile: explanation first, product centered, callouts visible ---- */
@media (max-width: 820px) {
    .jel-lp .jel-ac-stage {
        height: 100dvh;
        min-height: 650px;
        overflow: hidden;
    }

    .jel-lp .jel-ac-kicker,
    .jel-lp .jel-ac-footerline {
        display: none !important;
    }

    /* Native SVG callouts are too small at mobile scale; HTML callouts replace them. */
    .jel-lp .jel-ac-svg [data-tech-lines],
    .jel-lp .jel-ac-svg [data-filter-callouts],
    .jel-lp .jel-ac-svg [data-internal-callouts] {
        display: none !important;
    }

    .jel-lp .jel-ac-viewport {
        width: calc(100% - 14px);
        overflow: visible;
    }

    .jel-lp .jel-ac-copyrail {
        z-index: 26;
    }

    .jel-lp .jel-ac-copy {
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 84px 14px 0;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        text-align: center;
    }

    .jel-lp .jel-ac-copy.is-active {
        visibility: visible !important;
        opacity: 1 !important;
    }

    .jel-lp .jel-ac-copy__top,
    .jel-lp .jel-ac-copy__bottom {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100%;
        max-width: 610px;
        transform: none !important;
        opacity: 1 !important;
        text-align: center;
    }

    .jel-lp .jel-ac-copy__bottom {
        margin-top: 9px;
    }

    .jel-lp .jel-ac-copy__label {
        margin-bottom: 7px;
        font-size: 7px;
        letter-spacing: .16em;
    }

    .jel-lp .jel-ac-copy h1,
    .jel-lp .jel-ac-copy:not(:first-child) h1 {
        max-width: 610px;
        font-size: clamp(26px, 7.6vw, 39px);
        line-height: 1;
        letter-spacing: -.045em;
        color: #f5f1e8;
        opacity: 1 !important;
    }

    .jel-lp .jel-ac-copy__text {
        max-width: 560px;
        margin: 0 auto;
        color: #b9b3a9;
        font-size: clamp(11px, 2.9vw, 13px);
        line-height: 1.43;
        opacity: 1 !important;
    }

    .jel-lp .jel-ac-copy__actions {
        justify-content: center;
        gap: 8px;
        margin-top: 10px;
        flex-wrap: wrap;
    }

    .jel-lp .jel-ac-copy__actions .jel-button {
        min-height: 40px;
        padding: 0 15px;
        font-size: 10px;
    }

    .jel-lp .jel-ac-copy__hint {
        display: none;
    }

    /* AC is geometrically centered in the usable viewport area. */
    .jel-lp .jel-ac-machine {
        left: 50% !important;
        right: auto !important;
        top: 58.5% !important;
        width: min(84vw, 560px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 0 !important;
        transform: translate3d(-50%, -50%, 0) !important;
    }

    .jel-lp .jel-ac-machine__icon-core {
        width: 58px;
        height: 58px;
        top: 43%;
    }

    .jel-lp .jel-ac-machine__icon-mark {
        width: 58px;
    }

    /* Mobile component callouts */
    .jel-lp .jel-ac-mobile-callouts {
        position: absolute;
        z-index: 24;
        inset: 42% 12px 21% 12px;
        pointer-events: none;
    }

    .jel-lp .jel-mobile-callout-group {
        display: none;
        position: absolute;
        inset: 0;
    }

    .jel-lp .jel-mobile-callout-group.is-active {
        display: block;
    }

    .jel-lp .jel-mobile-callout {
        position: absolute;
        display: flex;
        align-items: center;
        width: 41%;
        color: #d5cec0;
        font-size: 9px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: .11em;
        white-space: nowrap;
        text-transform: uppercase;
    }

    .jel-lp .jel-mobile-callout::after {
        content: "";
        position: relative;
        display: block;
        flex: 1;
        min-width: 28px;
        height: 1px;
        margin-left: 8px;
        background: linear-gradient(90deg, #b08c3c, rgba(176,140,60,.2));
    }

    .jel-lp .jel-mobile-callout::before {
        content: "";
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #b08c3c;
    }

    .jel-lp .jel-mobile-callout--left {
        left: 0;
        justify-content: flex-start;
        text-align: left;
    }

    .jel-lp .jel-mobile-callout--left::before {
        right: -2px;
    }

    .jel-lp .jel-mobile-callout--right {
        right: 0;
        flex-direction: row-reverse;
        justify-content: flex-start;
        text-align: right;
    }

    .jel-lp .jel-mobile-callout--right::after {
        margin-right: 8px;
        margin-left: 0;
        background: linear-gradient(90deg, rgba(176,140,60,.2), #b08c3c);
    }

    .jel-lp .jel-mobile-callout--right::before {
        left: -2px;
    }

    .jel-lp .jel-mobile-callout--upper { top: 17%; }
    .jel-lp .jel-mobile-callout--middle { top: 43%; }
    .jel-lp .jel-mobile-callout--lower { top: 70%; }

    /* Footer navigation: horizontal bullets above stage box. */
    .jel-lp .jel-ac-progress {
        top: auto !important;
        left: 50% !important;
        right: auto !important;
        bottom: 96px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 7px;
        width: min(300px, calc(100% - 80px));
        transform: translateX(-50%) !important;
    }

    .jel-lp .jel-ac-progress span {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: auto;
        height: 22px;
        color: #5f5b55;
        font-size: 8px;
    }

    .jel-lp .jel-ac-progress span i {
        display: block;
        width: 12px;
        height: 2px;
        background: currentColor;
    }

    .jel-lp .jel-ac-progress span b {
        display: block !important;
        font-size: 8px;
        font-weight: 700;
    }

    .jel-lp .jel-ac-progress span.is-active {
        color: var(--jel-gold-light);
    }

    .jel-lp .jel-ac-progress span.is-active i {
        width: 24px;
        background: var(--jel-gold);
    }

    /* Compact stage box under horizontal bullets. */
    .jel-lp .jel-ac-machine__readout {
        display: grid !important;
        z-index: 28;
        top: auto !important;
        left: 50% !important;
        right: auto !important;
        bottom: 28px !important;
        min-width: 184px;
        padding: 10px 14px 11px;
        transform: translateX(-50%) !important;
        text-align: center;
        border: 1px solid rgba(255,255,255,.08);
        border-top: 2px solid rgba(176,140,60,.58);
        background: rgba(7,7,7,.92);
        box-shadow: 0 14px 34px rgba(0,0,0,.32);
    }

    .jel-lp .jel-ac-machine__readout::before {
        display: none;
    }

    .jel-lp .jel-ac-machine__readout span {
        font-size: 7px;
        letter-spacing: .14em;
    }

    .jel-lp .jel-ac-machine__readout strong {
        margin-top: 2px;
        color: #ece5d9;
        font-size: 16px;
        line-height: 1;
    }
}

@media (max-width: 520px) {
    .jel-lp .jel-ac-copy {
        padding-top: 80px;
    }

    .jel-lp .jel-ac-copy h1,
    .jel-lp .jel-ac-copy:not(:first-child) h1 {
        font-size: clamp(24px, 7.9vw, 33px);
    }

    .jel-lp .jel-ac-copy__text {
        max-width: 96%;
        font-size: 10.6px;
        line-height: 1.38;
    }

    .jel-lp .jel-ac-machine {
        top: 58.5% !important;
        width: min(86vw, 500px) !important;
    }

    .jel-lp .jel-ac-mobile-callouts {
        inset: 43% 9px 22% 9px;
    }

    .jel-lp .jel-mobile-callout {
        width: 43%;
        font-size: 7.5px;
        letter-spacing: .08em;
    }

    .jel-lp .jel-ac-progress {
        bottom: 91px !important;
        gap: 5px;
    }

    .jel-lp .jel-ac-progress span {
        gap: 3px;
    }

    .jel-lp .jel-ac-progress span i {
        width: 8px;
    }

    .jel-lp .jel-ac-progress span.is-active i {
        width: 16px;
    }

    .jel-lp .jel-ac-machine__readout {
        bottom: 24px !important;
        min-width: 166px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jel-lp .jel-ac-machine__icon-mark {
        animation: none !important;
    }
}


/* ================================================================
   v0.3.1 — DESKTOP REGRESSION FIX + MOBILE PARITY
   These rules intentionally come last and are authoritative.
   ================================================================ */

/* Prevent mobile-only callout labels from ever leaking into desktop. */
.jel-lp .jel-ac-mobile-callouts {
    display: none !important;
}

/* ---------------- DESKTOP ---------------- */
@media (min-width: 821px) {
    /* Remove the floating black stage box from the product area. */
    .jel-lp .jel-ac-machine__readout {
        display: none !important;
        visibility: hidden !important;
    }

    /* Larger technical labels, clean type, outside the product. */
    .jel-lp .jel-ac-svg [data-tech-lines] text,
    .jel-lp .jel-ac-svg [data-filter-callouts] text,
    .jel-lp .jel-ac-svg [data-internal-callouts] text {
        font-size: 32px !important;
        font-weight: 700 !important;
        letter-spacing: 3.6px !important;
        fill: #e0d8c9 !important;
        stroke: none !important;
        paint-order: normal !important;
    }

    .jel-lp .jel-ac-svg [data-tech-lines] path,
    .jel-lp .jel-ac-svg [data-filter-callouts] path,
    .jel-lp .jel-ac-svg [data-internal-callouts] path {
        stroke: #b08c3c !important;
        stroke-width: 3.5px !important;
    }

    .jel-lp .jel-ac-svg [data-tech-lines] circle,
    .jel-lp .jel-ac-svg [data-filter-callouts] circle,
    .jel-lp .jel-ac-svg [data-internal-callouts] circle {
        fill: #b08c3c !important;
    }

    /* Stage navigation stays outside/below the AC, on the right edge. */
    .jel-lp .jel-ac-progress {
        top: auto !important;
        right: clamp(24px, 3vw, 54px) !important;
        bottom: 72px !important;
        left: auto !important;
        transform: none !important;
        z-index: 30;
    }

    /* Keep the branded icon unobstructed. */
    .jel-lp .jel-ac-machine__icon-core {
        z-index: 18;
    }
}

/* ---------------- MOBILE / TABLET ---------------- */
@media (max-width: 820px) {
    .jel-lp .jel-ac-mobile-callouts {
        display: block !important;
        position: absolute;
        z-index: 25;
        left: 50%;
        top: 42%;
        width: min(94vw, 610px);
        height: 32%;
        transform: translateX(-50%);
        pointer-events: none;
        overflow: visible;
    }

    .jel-lp .jel-mobile-callout-group {
        display: none !important;
        position: absolute;
        inset: 0;
    }

    .jel-lp .jel-mobile-callout-group.is-active {
        display: block !important;
    }

    /* Same line language as desktop, rearranged vertically for mobile. */
    .jel-lp .jel-mobile-callout {
        position: absolute;
        display: flex !important;
        align-items: center;
        width: 46%;
        color: #ded6c8;
        font-size: clamp(8px, 2.1vw, 10px);
        font-weight: 800;
        line-height: 1;
        letter-spacing: .1em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .jel-lp .jel-mobile-callout::after {
        content: "";
        display: block;
        flex: 1 1 auto;
        min-width: 34px;
        height: 2px;
        margin-left: 8px;
        background: #b08c3c;
        transform-origin: left center;
    }

    .jel-lp .jel-mobile-callout::before {
        content: "";
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #b08c3c;
    }

    .jel-lp .jel-mobile-callout--left {
        left: 0;
        text-align: left;
        justify-content: flex-start;
    }

    .jel-lp .jel-mobile-callout--left::before {
        right: -2px;
    }

    .jel-lp .jel-mobile-callout--right {
        right: 0;
        text-align: right;
        justify-content: flex-start;
        flex-direction: row-reverse;
    }

    .jel-lp .jel-mobile-callout--right::after {
        margin-left: 0;
        margin-right: 8px;
        transform-origin: right center;
    }

    .jel-lp .jel-mobile-callout--right::before {
        left: -2px;
    }

    /* Mobile places callouts ABOVE and BELOW the product, never on screen edges. */
    .jel-lp .jel-mobile-callout--upper {
        top: 2%;
    }

    .jel-lp .jel-mobile-callout--middle {
        top: 5%;
    }

    .jel-lp .jel-mobile-callout--lower {
        top: auto;
        bottom: 1%;
    }

    /* Slight line angles point inward toward the component zone. */
    .jel-lp .jel-mobile-callout--upper.jel-mobile-callout--left::after,
    .jel-lp .jel-mobile-callout--middle.jel-mobile-callout--left::after {
        transform: rotate(12deg);
    }

    .jel-lp .jel-mobile-callout--upper.jel-mobile-callout--right::after,
    .jel-lp .jel-mobile-callout--middle.jel-mobile-callout--right::after {
        transform: rotate(-12deg);
    }

    .jel-lp .jel-mobile-callout--lower.jel-mobile-callout--left::after {
        transform: rotate(-12deg);
    }

    .jel-lp .jel-mobile-callout--lower.jel-mobile-callout--right::after {
        transform: rotate(12deg);
    }

    /* Same product animation, centered and only scaled to viewport. */
    .jel-lp .jel-ac-machine {
        left: 50% !important;
        right: auto !important;
        top: 56% !important;
        width: min(84vw, 560px) !important;
        max-width: calc(100vw - 26px) !important;
        transform: translate3d(-50%, -50%, 0) !important;
        margin: 0 !important;
    }

    /* The copy remains readable above the animation. */
    .jel-lp .jel-ac-copy {
        padding-top: 80px !important;
    }

    .jel-lp .jel-ac-copy__top,
    .jel-lp .jel-ac-copy__bottom {
        max-width: 620px;
    }

    .jel-lp .jel-ac-copy__bottom {
        margin-top: 8px !important;
    }

    /* Horizontal stages at viewport footer, above the stage box. */
    .jel-lp .jel-ac-progress {
        top: auto !important;
        left: 50% !important;
        right: auto !important;
        bottom: 94px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 7px;
        width: min(310px, calc(100% - 68px));
        transform: translateX(-50%) !important;
        z-index: 31;
    }

    .jel-lp .jel-ac-progress span {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: auto !important;
        height: 22px !important;
        gap: 4px;
    }

    .jel-lp .jel-ac-progress span i {
        width: 10px !important;
        height: 2px !important;
    }

    .jel-lp .jel-ac-progress span.is-active i {
        width: 20px !important;
    }

    .jel-lp .jel-ac-progress span b {
        display: block !important;
        font-size: 8px;
    }

    /* Stage box lives at the bottom, outside the product. */
    .jel-lp .jel-ac-machine__readout {
        display: grid !important;
        visibility: visible !important;
        top: auto !important;
        left: 50% !important;
        right: auto !important;
        bottom: 24px !important;
        min-width: 172px;
        padding: 9px 13px 10px !important;
        transform: translateX(-50%) !important;
        text-align: center;
        border: 1px solid rgba(255,255,255,.08) !important;
        border-top: 2px solid rgba(176,140,60,.58) !important;
        background: rgba(7,7,7,.93) !important;
        z-index: 32;
    }
}

@media (max-width: 520px) {
    .jel-lp .jel-ac-machine {
        top: 56.5% !important;
        width: min(86vw, 500px) !important;
    }

    .jel-lp .jel-ac-mobile-callouts {
        top: 43%;
        width: calc(100% - 20px);
        height: 31%;
    }

    .jel-lp .jel-mobile-callout {
        width: 45%;
        font-size: 7.5px;
        letter-spacing: .08em;
    }

    .jel-lp .jel-ac-progress {
        bottom: 90px !important;
        gap: 5px;
    }

    .jel-lp .jel-ac-machine__readout {
        bottom: 22px !important;
        min-width: 160px;
    }
}


/* ================================================================
   v0.3.2 — VIEWPORT / CALLOUT / STAGE NAV FIXES
   ================================================================ */

/* Never allow technical labels to flash before GSAP initializes them. */
.jel-lp .jel-ac-experience:not(.is-scene-ready) .jel-ac-svg [data-tech-lines],
.jel-lp .jel-ac-experience:not(.is-scene-ready) .jel-ac-svg [data-filter-callouts],
.jel-lp .jel-ac-experience:not(.is-scene-ready) .jel-ac-svg [data-internal-callouts],
.jel-lp .jel-ac-experience:not(.is-scene-ready) .jel-ac-mobile-callouts {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* The stage box now belongs to the viewport, not the AC machine. */
.jel-lp .jel-ac-stage-readout {
    display: none;
}

/* Ensure legacy in-machine readout styles can never leak back in. */
.jel-lp .jel-ac-machine__readout {
    display: none !important;
}

/* ---------------- DESKTOP ---------------- */
@media (min-width: 821px) {
    /* Stage box is intentionally absent on desktop. */
    .jel-lp .jel-ac-stage-readout {
        display: none !important;
    }

    /* Large, readable desktop annotations. */
    .jel-lp .jel-ac-svg [data-tech-lines] text,
    .jel-lp .jel-ac-svg [data-filter-callouts] text,
    .jel-lp .jel-ac-svg [data-internal-callouts] text {
        font-size: 38px !important;
        font-weight: 700 !important;
        letter-spacing: 3.8px !important;
        fill: #e2dbcf !important;
        stroke: none !important;
        paint-order: normal !important;
    }

    .jel-lp .jel-ac-svg [data-tech-lines] path,
    .jel-lp .jel-ac-svg [data-filter-callouts] path,
    .jel-lp .jel-ac-svg [data-internal-callouts] path {
        stroke: #b08c3c !important;
        stroke-width: 3.5px !important;
    }

    /* Keep desktop stage navigation in the far-right safe zone. */
    .jel-lp .jel-ac-progress {
        left: auto !important;
        right: clamp(22px, 2.8vw, 52px) !important;
        top: 50% !important;
        bottom: auto !important;
        display: grid !important;
        gap: 2px !important;
        width: auto !important;
        transform: translateY(-50%) !important;
        z-index: 35;
    }

    .jel-lp .jel-ac-progress span {
        display: grid !important;
        grid-template-columns: 26px 24px;
        align-items: center;
        gap: 8px;
        width: auto !important;
        height: 28px !important;
    }

    .jel-lp .jel-ac-progress span i {
        display: block !important;
        width: 8px !important;
        height: 1px !important;
    }

    .jel-lp .jel-ac-progress span.is-active i {
        width: 24px !important;
    }

    .jel-lp .jel-ac-progress span b {
        display: block !important;
    }
}

/* ---------------- MOBILE ---------------- */
@media (max-width: 820px) {
    .jel-lp .jel-ac-stage {
        height: 100dvh;
        min-height: 650px;
        overflow: hidden;
    }

    /* Same AC animation as desktop; only scaled to the available screen. */
    .jel-lp .jel-ac-machine {
        left: 50% !important;
        right: auto !important;
        top: 57% !important;
        width: min(82vw, 540px) !important;
        max-width: calc(100vw - 28px) !important;
        margin: 0 !important;
        transform: translate3d(-50%, -50%, 0) !important;
    }

    /* Callouts are kept inside a product-centered safe area.
       Upper labels live above the AC; lower labels live below it. */
    .jel-lp .jel-ac-mobile-callouts {
        display: block !important;
        position: absolute;
        z-index: 27;
        left: 50%;
        top: 42.5%;
        width: min(92vw, 600px);
        height: 31%;
        transform: translateX(-50%);
        opacity: 1;
        visibility: visible;
        pointer-events: none;
        overflow: visible;
    }

    .jel-lp .jel-mobile-callout-group {
        display: none !important;
        position: absolute;
        inset: 0;
    }

    .jel-lp .jel-mobile-callout-group.is-active {
        display: block !important;
    }

    .jel-lp .jel-mobile-callout {
        position: absolute;
        display: flex !important;
        align-items: center;
        width: 45%;
        color: #e0d9cd;
        font-size: clamp(10px, 2.7vw, 12px) !important;
        font-weight: 800;
        line-height: 1;
        letter-spacing: .09em;
        white-space: nowrap;
        text-transform: uppercase;
    }

    .jel-lp .jel-mobile-callout::after {
        content: "";
        display: block;
        flex: 1 1 auto;
        min-width: 34px;
        height: 2px;
        margin-left: 10px;
        background: #b08c3c;
        transform-origin: left center;
    }

    .jel-lp .jel-mobile-callout::before {
        content: "";
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #b08c3c;
    }

    .jel-lp .jel-mobile-callout--left {
        left: 0;
        justify-content: flex-start;
        text-align: left;
    }

    .jel-lp .jel-mobile-callout--left::before {
        right: -3px;
    }

    .jel-lp .jel-mobile-callout--right {
        right: 0;
        flex-direction: row-reverse;
        justify-content: flex-start;
        text-align: right;
    }

    .jel-lp .jel-mobile-callout--right::after {
        margin-left: 0;
        margin-right: 10px;
        transform-origin: right center;
    }

    .jel-lp .jel-mobile-callout--right::before {
        left: -3px;
    }

    /* Geometry mapped to the actual product region. */
    .jel-lp .jel-mobile-callout--upper {
        top: 1%;
    }

    .jel-lp .jel-mobile-callout--middle {
        top: 7%;
    }

    .jel-lp .jel-mobile-callout--lower {
        top: auto;
        bottom: 1%;
    }

    /* Top callouts angle inward/down toward the product. */
    .jel-lp .jel-mobile-callout--upper.jel-mobile-callout--left::after,
    .jel-lp .jel-mobile-callout--middle.jel-mobile-callout--left::after {
        transform: rotate(11deg);
    }

    .jel-lp .jel-mobile-callout--upper.jel-mobile-callout--right::after,
    .jel-lp .jel-mobile-callout--middle.jel-mobile-callout--right::after {
        transform: rotate(-11deg);
    }

    /* Bottom callouts angle inward/up toward the product. */
    .jel-lp .jel-mobile-callout--lower.jel-mobile-callout--left::after {
        transform: rotate(-11deg);
    }

    .jel-lp .jel-mobile-callout--lower.jel-mobile-callout--right::after {
        transform: rotate(11deg);
    }

    /* Horizontal 01–06 navigation: always ABOVE the stage box. */
    .jel-lp .jel-ac-progress {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        bottom: 82px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px !important;
        width: min(320px, calc(100% - 54px)) !important;
        transform: translateX(-50%) !important;
        z-index: 41;
    }

    .jel-lp .jel-ac-progress span {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: auto !important;
        height: 22px !important;
        color: #625e57;
    }

    .jel-lp .jel-ac-progress span i {
        width: 10px !important;
        height: 2px !important;
        background: currentColor;
    }

    .jel-lp .jel-ac-progress span.is-active {
        color: var(--jel-gold-light);
    }

    .jel-lp .jel-ac-progress span.is-active i {
        width: 20px !important;
        background: var(--jel-gold);
    }

    .jel-lp .jel-ac-progress span b {
        display: block !important;
        font-size: 8px;
    }

    /* Stage box is viewport-anchored and cannot cover the AC anymore. */
    .jel-lp .jel-ac-stage-readout {
        position: absolute;
        z-index: 42;
        left: 50%;
        bottom: 18px;
        display: grid !important;
        min-width: 174px;
        padding: 9px 14px 10px;
        transform: translateX(-50%);
        text-align: center;
        border: 1px solid rgba(255,255,255,.08);
        border-top: 2px solid rgba(176,140,60,.62);
        background: rgba(7,7,7,.94);
        box-shadow: 0 14px 34px rgba(0,0,0,.34);
    }

    .jel-lp .jel-ac-stage-readout span {
        color: #77716a;
        font-size: 7px;
        letter-spacing: .14em;
    }

    .jel-lp .jel-ac-stage-readout strong {
        margin-top: 2px;
        color: #ece5d9;
        font: 700 16px/1 "Space Grotesk", sans-serif;
    }
}

@media (max-width: 520px) {
    .jel-lp .jel-ac-machine {
        top: 57% !important;
        width: min(84vw, 490px) !important;
    }

    .jel-lp .jel-ac-mobile-callouts {
        top: 43%;
        width: calc(100% - 18px);
        height: 30%;
    }

    .jel-lp .jel-mobile-callout {
        width: 44%;
        font-size: 9.5px !important;
    }

    .jel-lp .jel-ac-progress {
        bottom: 78px !important;
        gap: 4px !important;
    }

    .jel-lp .jel-ac-stage-readout {
        bottom: 16px;
        min-width: 164px;
    }
}

/* ================================================================
   v0.3.3 — FINAL SCENE POLISH
   Desktop stage-copy leak, readable technical callouts, mobile leaders,
   and temperature feedback corrected without changing scroll timing.
   ================================================================ */

@media (min-width: 821px) {
    /* Stage titles 01–05 must never float over the fixed header/logo.
       Keep the original hero copy only; technical progression is communicated
       by the dedicated state bullet below. */
    .jel-lp .jel-ac-copy:not(:first-child) .jel-ac-copy__top {
        display: none !important;
    }

    /* Keep supporting copy inside the scene, away from the menu. */
    .jel-lp .jel-ac-copy:not(:first-child) .jel-ac-copy__bottom {
        bottom: clamp(52px, 6.5vh, 82px) !important;
    }

    /* Restore PRONTO / PRECISÃO / FILTRAGEM / COMPONENTES / etc. on desktop
       as a compact state bullet, not as a large floating stage title. */
    .jel-lp .jel-ac-stage-readout {
        position: absolute !important;
        z-index: 38 !important;
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        bottom: clamp(106px, 12vh, 132px) !important;
        display: inline-flex !important;
        align-items: center;
        min-width: 0 !important;
        padding: 8px 13px 8px 11px !important;
        transform: translateX(-50%) !important;
        border: 1px solid rgba(255,255,255,.08) !important;
        border-radius: 999px;
        background: rgba(8,8,8,.78) !important;
        backdrop-filter: blur(10px);
        box-shadow: 0 10px 30px rgba(0,0,0,.22);
        pointer-events: none;
    }

    .jel-lp .jel-ac-stage-readout::before {
        content: "";
        width: 6px;
        height: 6px;
        margin-right: 9px;
        border-radius: 50%;
        background: var(--jel-gold);
        box-shadow: 0 0 14px rgba(176,140,60,.65);
    }

    .jel-lp .jel-ac-stage-readout span {
        display: none !important;
    }

    .jel-lp .jel-ac-stage-readout strong {
        margin: 0 !important;
        color: #ece5d9 !important;
        font: 800 10px/1 "Manrope", sans-serif !important;
        letter-spacing: .16em !important;
        text-transform: uppercase;
        white-space: nowrap;
    }

    /* SVG extends beyond its 0–1200 design box so leaders can leave the AC
       before reaching their labels. */
    .jel-lp .jel-ac-machine,
    .jel-lp .jel-ac-svg {
        overflow: visible !important;
    }

    .jel-lp .jel-ac-svg [data-tech-lines] text,
    .jel-lp .jel-ac-svg [data-filter-callouts] text,
    .jel-lp .jel-ac-svg [data-internal-callouts] text {
        font-size: 28px !important;
        font-weight: 800 !important;
        letter-spacing: 2.6px !important;
        fill: #e8e1d5 !important;
    }

    .jel-lp .jel-ac-svg [data-tech-lines] path,
    .jel-lp .jel-ac-svg [data-filter-callouts] path,
    .jel-lp .jel-ac-svg [data-internal-callouts] path {
        stroke-width: 3.2px !important;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .jel-lp .jel-ac-svg [data-tech-lines] circle,
    .jel-lp .jel-ac-svg [data-filter-callouts] circle,
    .jel-lp .jel-ac-svg [data-internal-callouts] circle {
        r: 6px;
    }
}

@media (max-width: 820px) {
    /* Mobile callouts are rebuilt as one connected leader:
       label — horizontal segment — 45° segment — anchor dot. */
    .jel-lp .jel-ac-mobile-callouts {
        left: max(14px, env(safe-area-inset-left)) !important;
        right: max(14px, env(safe-area-inset-right)) !important;
        width: auto !important;
        transform: none !important;
        overflow: visible !important;
    }

    .jel-lp .jel-mobile-callout {
        --leader-h: clamp(22px, 7vw, 34px);
        --leader-d: clamp(18px, 5.5vw, 27px);
        width: auto !important;
        max-width: 46%;
        min-height: 32px;
        overflow: visible;
    }

    /* Remove the old single rotating line and loose dot. */
    .jel-lp .jel-mobile-callout::before,
    .jel-lp .jel-mobile-callout::after {
        content: none !important;
    }

    .jel-lp .jel-mobile-callout {
        background-repeat: no-repeat;
    }

    /* Two CSS backgrounds create a horizontal leader + diagonal segment.
       A box-shadowed endpoint supplies the anchor dot so all pieces stay attached. */
    .jel-lp .jel-mobile-callout--left {
        padding-right: calc(var(--leader-h) + var(--leader-d) + 9px);
        background-image:
            linear-gradient(#b08c3c,#b08c3c),
            linear-gradient(45deg, transparent 46%, #b08c3c 47% 53%, transparent 54%);
        background-size:
            var(--leader-h) 2px,
            var(--leader-d) var(--leader-d);
        background-position:
            right var(--leader-d) center,
            right center;
    }

    .jel-lp .jel-mobile-callout--right {
        padding-left: calc(var(--leader-h) + var(--leader-d) + 9px);
        background-image:
            linear-gradient(#b08c3c,#b08c3c),
            linear-gradient(-45deg, transparent 46%, #b08c3c 47% 53%, transparent 54%);
        background-size:
            var(--leader-h) 2px,
            var(--leader-d) var(--leader-d);
        background-position:
            left var(--leader-d) center,
            left center;
    }

    /* Anchors are real children in visual geometry via radial background;
       this keeps the dot attached to the diagonal instead of floating. */
    .jel-lp .jel-mobile-callout--left {
        box-shadow: inset -1px 0 0 rgba(0,0,0,0);
    }
    .jel-lp .jel-mobile-callout--right {
        box-shadow: inset 1px 0 0 rgba(0,0,0,0);
    }

    .jel-lp .jel-mobile-callout--upper,
    .jel-lp .jel-mobile-callout--middle {
        top: 0 !important;
    }

    .jel-lp .jel-mobile-callout--lower {
        bottom: 0 !important;
    }

    /* Separate multiple labels in the same component state. */
    .jel-lp [data-mobile-callout-group="3"] .jel-mobile-callout--right.jel-mobile-callout--upper {
        top: 0 !important;
    }
    .jel-lp [data-mobile-callout-group="3"] .jel-mobile-callout--right.jel-mobile-callout--lower {
        bottom: 0 !important;
    }
}

@media (max-width: 520px) {
    .jel-lp .jel-mobile-callout {
        --leader-h: 22px;
        --leader-d: 18px;
        max-width: 48%;
        font-size: 9.5px !important;
        letter-spacing: .075em !important;
    }
}

/* v0.3.3 mobile leader structural override: horizontal + 45deg + endpoint dot */
@media (max-width: 820px) {
    .jel-lp .jel-mobile-callout {
        display: flex !important;
        align-items: center !important;
        background: none !important;
        padding: 0 !important;
        gap: 8px;
    }

    .jel-lp .jel-mobile-callout__label {
        position: relative;
        z-index: 2;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .jel-lp .jel-mobile-callout__leader {
        position: relative;
        display: block;
        flex: 0 0 calc(var(--leader-h) + var(--leader-d));
        width: calc(var(--leader-h) + var(--leader-d));
        height: var(--leader-d);
    }

    .jel-lp .jel-mobile-callout__leader::before {
        content: "";
        position: absolute;
        top: 50%;
        height: 2px;
        width: var(--leader-h);
        background: #b08c3c;
        transform: translateY(-50%);
    }

    .jel-lp .jel-mobile-callout__leader::after {
        content: "";
        position: absolute;
        top: 50%;
        width: var(--leader-d);
        height: 2px;
        background: #b08c3c;
        transform-origin: center;
    }

    .jel-lp .jel-mobile-callout__leader b {
        position: absolute;
        top: 50%;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #b08c3c;
        box-shadow: 0 0 10px rgba(176,140,60,.28);
    }

    .jel-lp .jel-mobile-callout--left {
        left: 0 !important;
        right: auto !important;
        flex-direction: row !important;
        text-align: left !important;
    }
    .jel-lp .jel-mobile-callout--left .jel-mobile-callout__leader::before {
        left: 0;
    }
    .jel-lp .jel-mobile-callout--left .jel-mobile-callout__leader::after {
        right: 1px;
        transform: translateY(-50%) rotate(45deg);
    }
    .jel-lp .jel-mobile-callout--left .jel-mobile-callout__leader b {
        right: -2px;
        transform: translateY(calc(-50% + var(--leader-d) * .35));
    }

    .jel-lp .jel-mobile-callout--right {
        right: 0 !important;
        left: auto !important;
        flex-direction: row-reverse !important;
        text-align: right !important;
    }
    .jel-lp .jel-mobile-callout--right .jel-mobile-callout__leader::before {
        right: 0;
    }
    .jel-lp .jel-mobile-callout--right .jel-mobile-callout__leader::after {
        left: 1px;
        transform: translateY(-50%) rotate(-45deg);
    }
    .jel-lp .jel-mobile-callout--right .jel-mobile-callout__leader b {
        left: -2px;
        transform: translateY(calc(-50% + var(--leader-d) * .35));
    }

    /* Bottom leaders point upward toward the equipment. */
    .jel-lp .jel-mobile-callout--lower.jel-mobile-callout--left .jel-mobile-callout__leader::after {
        transform: translateY(-50%) rotate(-45deg);
    }
    .jel-lp .jel-mobile-callout--lower.jel-mobile-callout--left .jel-mobile-callout__leader b {
        transform: translateY(calc(-50% - var(--leader-d) * .35));
    }
    .jel-lp .jel-mobile-callout--lower.jel-mobile-callout--right .jel-mobile-callout__leader::after {
        transform: translateY(-50%) rotate(45deg);
    }
    .jel-lp .jel-mobile-callout--lower.jel-mobile-callout--right .jel-mobile-callout__leader b {
        transform: translateY(calc(-50% - var(--leader-d) * .35));
    }
}


/* ================================================================
   v0.3.6 — MOBILE PARITY / ORIGINAL SCROLL PRESERVED
   Keeps the original six-step scroll behavior. Only layout and SVG
   presentation are adapted so mobile carries the same information.
   ================================================================ */

/* Temperature badge is part of the engineering feedback sequence. */
.jel-lp [data-temperature-status] {
    display: inline !important;
}

/* The official mark now lives inside [data-front-panel], so it inherits
   the lid's GSAP transform and never appears detached/flat while opening. */
.jel-lp .jel-ac-machine__icon-core {
    display: none !important;
}

/* Technical leader styling shared by desktop and mobile. */
.jel-lp .jel-ac-svg [data-tech-lines] path,
.jel-lp .jel-ac-svg [data-filter-callouts] path,
.jel-lp .jel-ac-svg [data-internal-callouts] path {
    stroke: #b18e42 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.jel-lp .jel-ac-svg [data-tech-lines] text,
.jel-lp .jel-ac-svg [data-filter-callouts] text,
.jel-lp .jel-ac-svg [data-internal-callouts] text {
    fill: #e7e1d6 !important;
    font-weight: 800 !important;
}

@media (min-width: 821px) {
    .jel-lp .jel-ac-svg [data-tech-lines] text,
    .jel-lp .jel-ac-svg [data-filter-callouts] text,
    .jel-lp .jel-ac-svg [data-internal-callouts] text {
        font-size: 18px !important;
        letter-spacing: 2.1px !important;
    }

    .jel-lp .jel-ac-svg [data-tech-lines] path,
    .jel-lp .jel-ac-svg [data-filter-callouts] path,
    .jel-lp .jel-ac-svg [data-internal-callouts] path {
        stroke-width: 2.8px !important;
    }
}

@media (max-width: 820px) {
    /* Do NOT hide desktop SVG information on mobile. */
    .jel-lp .jel-ac-svg [data-tech-lines],
    .jel-lp .jel-ac-svg [data-filter-callouts],
    .jel-lp .jel-ac-svg [data-internal-callouts] {
        display: inline !important;
    }

    .jel-lp .jel-ac-stage,
    .jel-lp .jel-ac-viewport {
        overflow: hidden !important;
    }

    .jel-lp .jel-ac-machine,
    .jel-lp .jel-ac-svg {
        overflow: visible !important;
    }

    /* Same hierarchy as desktop on EVERY scene:
       title > machine > description / CTA. */
    .jel-lp .jel-ac-copy {
        inset: 0 !important;
        display: block !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .jel-lp .jel-ac-copy__top {
        position: absolute !important;
        top: clamp(112px, 13.5dvh, 146px) !important;
        left: 50% !important;
        width: calc(100% - 32px) !important;
        max-width: 660px !important;
        margin: 0 !important;
        transform: translateX(-50%) !important;
        text-align: center !important;
    }

    .jel-lp .jel-ac-copy__label {
        margin-bottom: 8px !important;
        font-size: clamp(7px, 1.8vw, 9px) !important;
        letter-spacing: .17em !important;
    }

    .jel-lp .jel-ac-copy h1,
    .jel-lp .jel-ac-copy:not(:first-child) h1 {
        max-width: 630px !important;
        font-size: clamp(26px, 7.6vw, 42px) !important;
        line-height: 1.01 !important;
        letter-spacing: -.047em !important;
    }

    /* Center the AC and leave safe room around it for native SVG callouts. */
    .jel-lp .jel-ac-machine {
        left: 50% !important;
        top: 53% !important;
        width: min(76vw, 520px) !important;
        max-width: calc(100vw - 58px) !important;
        transform: translate3d(-50%, -50%, 0) !important;
        margin: 0 !important;
    }

    /* Supporting copy is physically below the equipment, not grouped with title. */
    .jel-lp .jel-ac-copy__bottom {
        position: absolute !important;
        left: 50% !important;
        top: 69.5% !important;
        bottom: auto !important;
        width: calc(100% - 38px) !important;
        max-width: 610px !important;
        margin: 0 !important;
        transform: translateX(-50%) !important;
        text-align: center !important;
    }

    .jel-lp .jel-ac-copy__text {
        max-width: 560px !important;
        margin: 0 auto !important;
        font-size: clamp(11px, 2.8vw, 14px) !important;
        line-height: 1.48 !important;
    }

    .jel-lp .jel-ac-copy__actions {
        justify-content: center !important;
        margin-top: 13px !important;
    }

    .jel-lp .jel-ac-copy__actions .jel-button {
        min-height: 44px !important;
        padding: 0 20px !important;
        font-size: 11px !important;
    }

    .jel-lp .jel-ac-copy__hint {
        display: none !important;
    }

    /* Native desktop leaders remain legible after the whole SVG scales down. */
    .jel-lp .jel-ac-svg [data-tech-lines] text,
    .jel-lp .jel-ac-svg [data-filter-callouts] text,
    .jel-lp .jel-ac-svg [data-internal-callouts] text {
        font-size: 31px !important;
        letter-spacing: 1.7px !important;
    }

    .jel-lp .jel-ac-svg [data-tech-lines] path,
    .jel-lp .jel-ac-svg [data-filter-callouts] path,
    .jel-lp .jel-ac-svg [data-internal-callouts] path {
        stroke-width: 3.6px !important;
    }

    .jel-lp .jel-ac-svg [data-tech-lines] circle,
    .jel-lp .jel-ac-svg [data-filter-callouts] circle,
    .jel-lp .jel-ac-svg [data-internal-callouts] circle {
        r: 6px !important;
    }

    /* Old parallel mobile callout system stays disabled. */
    .jel-lp .jel-ac-mobile-callouts,
    .jel-lp .jel-mobile-callout {
        display: none !important;
    }
}

@media (max-width: 520px) {
    .jel-lp .jel-ac-copy__top {
        top: clamp(104px, 12.5dvh, 126px) !important;
        width: calc(100% - 24px) !important;
    }

    .jel-lp .jel-ac-copy h1,
    .jel-lp .jel-ac-copy:not(:first-child) h1 {
        font-size: clamp(24px, 7.8vw, 35px) !important;
    }

    .jel-lp .jel-ac-machine {
        top: 52.5% !important;
        width: min(74vw, 455px) !important;
        max-width: calc(100vw - 54px) !important;
    }

    .jel-lp .jel-ac-copy__bottom {
        top: 68.5% !important;
        width: calc(100% - 28px) !important;
    }

    .jel-lp .jel-ac-copy__text {
        font-size: clamp(10.5px, 2.85vw, 12.5px) !important;
    }

    .jel-lp .jel-ac-svg [data-tech-lines] text,
    .jel-lp .jel-ac-svg [data-filter-callouts] text,
    .jel-lp .jel-ac-svg [data-internal-callouts] text {
        font-size: 33px !important;
    }
}

/* ================================================================
   v0.3.7 — DIFFUSE AIR + ARCHITECTURAL CONTEXT
   ================================================================ */
.jel-lp .jel-ac-svg [data-airflow] {
    opacity: .82;
}

.jel-lp .jel-ac-svg [data-airflow] [data-air-path] {
    opacity: .66;
}

.jel-lp .jel-ac-svg [data-airflow] [data-air-particle] {
    opacity: .36;
}

.jel-lp .jel-ac-svg [data-room-sketch] {
    vector-effect: non-scaling-stroke;
}

@media (max-width: 820px) {
    /* Keep the architectural sketch visible but lighter on small screens so it
       creates context without competing with technical labels or the machine. */
    .jel-lp .jel-ac-svg [data-room-sketch] {
        opacity: .78;
    }
    .jel-lp .jel-ac-svg [data-airflow] {
        opacity: .74;
    }
}


/* ================================================================
   v0.3.9 — JEFF ELITE FULL-VIEWPORT BLUEPRINT CONTEXT
   ================================================================ */
.jel-lp .jel-ac-svg [data-room-sketch] {
    opacity: .96;
    vector-effect: non-scaling-stroke;
}

@media (max-width: 820px) {
    .jel-lp .jel-ac-svg [data-room-sketch] {
        opacity: .92;
    }
}


/* v0.4.0 — slightly larger blueprint + temperature feedback */
@media (max-width: 820px) {
  .jel-lp [data-temperature-status] {
    transform-box: fill-box;
    transform-origin: center;
  }
}

/* v0.7.2 — interactive scene anchors + scroll guidance integrated under the hero title */
.jel-lp .jel-ac-progress [data-jel-ac-jump]{
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:color .22s ease,opacity .22s ease,transform .22s ease;
}
.jel-lp .jel-ac-progress [data-jel-ac-jump]:hover{color:var(--jel-gold-light);transform:translateY(-1px)}
.jel-lp .jel-ac-progress [data-jel-ac-jump]:focus-visible{outline:1px solid rgba(224,192,111,.72);outline-offset:7px;border-radius:4px}
.jel-lp .jel-ac-scrollhint{
    position:relative;
    z-index:18;
    width:max-content;
    max-width:100%;
    margin:18px auto 0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:rgba(225,220,210,.52);
    font:700 8px/1.15 "Manrope",sans-serif;
    letter-spacing:.11em;
    text-transform:uppercase;
    white-space:nowrap;
    opacity:1;
    transition:opacity .42s ease,transform .42s ease;
    pointer-events:none;
}
.jel-lp .jel-ac-scrollhint__line{
    width:clamp(20px,2.4vw,42px);
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(210,173,85,.45));
}
.jel-lp .jel-ac-scrollhint__line:last-child{transform:scaleX(-1)}
.jel-lp .jel-ac-scrollhint__mouse{
    width:17px;
    height:26px;
    border:1px solid rgba(213,177,91,.5);
    border-radius:99px;
    display:grid;
    place-items:start center;
    padding-top:5px;
    flex:0 0 auto;
}
.jel-lp .jel-ac-scrollhint__mouse i{
    width:2px;
    height:6px;
    border-radius:99px;
    background:#d2ad55;
    animation:jelAcScrollDot 1.65s ease-in-out infinite;
}
.jel-lp .jel-ac-experience.is-progressing .jel-ac-scrollhint{opacity:0;transform:translateY(6px)}
@keyframes jelAcScrollDot{0%{transform:translateY(0);opacity:.25}40%{opacity:1}75%,100%{transform:translateY(7px);opacity:0}}
@media(max-width:820px){
    .jel-lp .jel-ac-scrollhint{
        margin-top:12px;
        gap:7px;
        font-size:6.5px;
        letter-spacing:.075em;
        white-space:normal;
        text-align:center;
        width:min(280px,88vw);
    }
    .jel-lp .jel-ac-scrollhint__line{width:18px;flex:0 0 18px}
    .jel-lp .jel-ac-scrollhint__mouse{width:14px;height:22px;padding-top:4px}
}
@media(max-width:420px){
    .jel-lp .jel-ac-scrollhint{width:min(250px,90vw);font-size:6px;margin-top:10px}
    .jel-lp .jel-ac-scrollhint__line{width:12px;flex-basis:12px}
}
@media(prefers-reduced-motion:reduce){.jel-lp .jel-ac-scrollhint__mouse i{animation:none}}